<template>
  <v-card>
    <v-card-text>
      <ChEMBLDataTable
        :dataset-state="datasetState"
        :store-module-name="storeModuleName"
        :outlined-card="true"
      />
    </v-card-text>
  </v-card>
</template>

<script>
import IndexNames from '@/web-components-submodule/standardisation/IndexNames.js'
import { datasetMixin } from '~/web-components-submodule/mixins/datasets/datasetMixin.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import ChEMBLDataTable from '~/web-components-submodule/components/common/dataSets/data_table/ChEMBLDataTable.vue'

export default {
  components: {
    ChEMBLDataTable,
  },
  mixins: [datasetMixin],
  props: {
    itemID: {
      type: String,
      default: () => undefined,
    },
    chemblID: {
      type: String,
      default: () => undefined,
    },
    storeModuleName: {
      type: String,
      default: () => `main_targets_for_compound`,
    },
  },
  data() {
    return {
      propertiesGroups: {
        1: {
          id: 'main_targets_for_a_compound',
          selected: true,
          allHeaders: [],
        },
      },
      entityID: EntityNames.EubopenMainTarget.entityID,
      customDataRepresentationParams: {
        possiblePageSizes: [5, 10],
        itemsPerPage: 5,
      },
    }
  },
  computed: {
    starterParams() {
      return {
        chemblID: this.chemblID,
        propertiesGroups: this.propertiesGroups,
        initialQuery: {
          query: {
            bool: {
              must: [
                {
                  terms: {
                    'molecule.molecule_eubopen_id.keyword': [this.itemID],
                  },
                },
              ],
            },
          },
        },
        indexName: IndexNames.getIndexNameFromEntityID(this.entityID),
      }
    },
  },
}
</script>

<style></style>