<template>
  <!-- 元数据 -->
  <div class="pa-3" style="background-color: #FFF;">
    <filter-list @search="handleSearch" />
    <table-list
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :is-tools="false"
      :show-select="false"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #status="{ item }">
        <v-chip
          :color="item.status ? 'success' : 'error'"
          small
        >
          {{ item.status ? '已启用' : '已禁用'}}
        </v-chip>
      </template>
      <template #tag="{ item }">
        <!-- <m-graph-drill
          :id="item.tag?.id"
          :title="`${item.tag?.name_zh}血缘图谱`"
        >{{ item.tag?.name_zh }}</m-graph-drill> -->
        {{ item.tag.map(e => e.name_zh).join(',') }}
      </template>
      <!-- <template #blood_count="{ item }">
        <m-graph-drill
          :id="item.id"
          :title="`${item.name_zh}血缘图谱`"
          :to-api="api.getMetaDataGraph"
        >{{ item.blood_count }}</m-graph-drill>
      </template> -->
      <template v-slot:name_zh = "{item}">
        <span class="defaultLink" @click="toDetail(item)">{{ item.name_zh }}</span>
      </template>
    </table-list>
  </div>
</template>

<script>
import FilterList from '../../dataGovernance/components/Filter'
import TableList from '@/components/List/table'
import { api } from '@/api/dataGovernance'
// import MGraphDrill from '../components/mGraphDrill'
export default {
  name: 'meta-data',
  components: {
    FilterList,
    TableList
    // MGraphDrill
  },
  data () {
    return {
      api,
      loading: false,
      headers: [
        { text: '中文名', value: 'name_zh' },
        { text: '英文名', value: 'name_en' },
        { text: '分类', value: 'category', sortable: false },
        { text: '描述', value: 'describe', sortable: false },
        { text: '标签', value: 'tag', sortable: false },
        { text: '状态', value: 'status', sortable: false },
        { text: '血缘关系数量', value: 'blood_count', align: 'center' },
        { text: '创建时间', value: 'create_time' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        size: 10,
        current: 1
      },
      query: {},
      orders: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.getMetaDataList({ ...this.pageInfo, ...this.query })
        this.total = data.total
        this.items = data.records
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    toDetail (item) {
      this.$router.push(`${this.$route.path}/details/${item.id}/${item.name_zh}`)
    },
    handleSearch (obj) {
      Object.assign(this.query, obj)
      this.pageInfo.current = 1
      this.init()
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
