<template>
  <m-card title="数据域">
    <table-list
      ref="table"
      class="pb-3"
      :headers="headers"
      :items="tableData"
      :show-select="false"
      :is-tools="false"
      :loading="false"
      :showPage="false"
      :elevation="0"
      :height="height"
      :disable-sort="true"
    >
      <template v-slot:name="{ item }">
        <span style="color:#5aabff;cursor:pointer;text-decoration: underline;" @click="nodeClick(item)">{{item.name}}</span>
      </template>
    </table-list>
  </m-card>
</template>

<script>
// 元数据-数据域
import { metaDataDetail } from '@/api/dataBook.js'
import TableList from '@/components/List/table.vue'
import MCard from '@/components/MCard'
export default {
  name: 'metaDomain',
  components: { TableList, MCard },
  props: {
    query: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      height: 100,
      metaDataId: '',
      headers: [
        { text: '数据域名称', value: 'name' },
        { text: '英文名称', value: 'engName' },
        { text: '表名称', value: 'tableName' },
        { text: '备注', value: 'remark' }
      ],
      tableData: []
    }
  },
  created () {
    this.metaDataId = this.query.metaDataId
    this.metaDataDetail()
  },
  mounted () {
    this.$nextTick(() => {
      const el = this.$refs.table.$el.getBoundingClientRect()
      this.height = window.innerHeight - el.top - 50
    })
  },
  methods: {
    async metaDataDetail () {
      try {
        const { data } = await metaDataDetail({ metaDataId: this.metaDataId })
        this.tableData = data?.metaDataCombinations
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    nodeClick ({ metaDataCombinationId, name, type }) {
      const tabType = type || 0
      const src = this.$router.resolve({
        path: `/dataBook/dataField/details/${metaDataCombinationId}/${name}?tab=domainInfo&type=${tabType}`
      })
      window.open(src.href)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
