<template>
  <TargetReportCard :item-i-d="itemID" />
</template>

<script>
import TargetReportCard from '~/components/report_cards/target/TargetReportCard.vue'
import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'

export default {
  components: {
    TargetReportCard,
  },
  layout: 'reportCard',
  async asyncData({ $axios, error, params }) {
    try {
      const docSource = ['pref_name']
      const result = await MetadataLoader.getMetadataForEntity(
        EntityNames.EubopenTarget.entityID,
        params.id,
        docSource
      )
      return {
        rawMetadata: result.data._source,
      }
    } catch (e) {
      error({
        statusCode: 404,
        message: `No ${EntityNames.EubopenTarget.singularEntityName} found with id ${params.id}`,
      })
    }
  },
  head() {
    return {
      title: `${EntityNames.EubopenTarget.singularEntityName} ${this.itemID}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `${this.rawMetadata.pref_name}`,
        },
      ],
    }
  },
  computed: {
    itemID() {
      return this.$route.params.id
    },
  },
}
</script>

<style></style>