<template>
  <EntityReportCard
    :report-card-structure="reportCardStructure"
    :item-i-d="itemID"
    :store-module-name="storeModuleName"
  />
</template>

<script>
import { mapState } from 'vuex'
import EntityReportCard from '~/web-components-submodule/components/common/ReportCards/EntityReportCard.vue'
import TargetReportCardGenerator from '~/report_cards_structure/TargetReportCardGenerator.js'

export default {
  components: {
    EntityReportCard,
  },
  props: {
    itemID: {
      type: String,
      default: () => undefined,
    },
  },
  data() {
    return {
      storeModuleName: 'targetReportCard',
    }
  },
  computed: mapState({
    reportCardStructure: (state) => state.targetReportCard.reportCardStructure,
  }),
  mounted() {
    const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure(
      this.itemID
    )
    this.$store.dispatch(
      'targetReportCard/setReportCardStructure',
      reportCardStructure
    )
  },
}
</script>

<style></style>