<template>
  <div class="pa-3">
    <m-card title="元数据成员">
      <div class="pa-3">
        <m-table
          :headers="headers"
          :items="items"
          :elevation="0"
          :is-tools="false"
          :show-select="false"
          :loading="loading"
          :page-info="pageInfo"
          :total="total"
          @pageHandleChange="pageHandleChange"
        >
          <template #status="{ item }">
            <v-chip
              :color="item.status ? 'success' : 'error'"
              small
            >
              {{ item.status ? '已启用' : '已禁用'}}
            </v-chip>
          </template>
        </m-table>
      </div>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import MTable from '@/components/List/table'
import { api } from '@/api/dataGovernance'
export default {
  name: 'data-book-resource-metadata',
  components: {
    MCard,
    MTable
  },
  data () {
    return {
      loading: false,
      headers: [
        { text: '名称', value: 'name_zh' },
        { text: '英文名称', value: 'name_en' },
        { text: '类型', value: 'data_type' },
        { text: '状态', value: 'status' },
        { text: '创建时间', value: 'create_time' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      const id = this.$route.params.id
      if (!id) {
        return
      }
      this.loading = true
      try {
        const { data } = await api.searchAssociatedMetadata({ id: +id, ...this.pageInfo })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
