<template>
   <div>
    <MForm ref="form" class="mt-5" :items="formItems" v-model="formValues"></MForm>
    <MCard title="候选元数据" class="mt-3">
      <template #title>
        <div style="width: 300px; font-weight: normal;">
          <v-text-field
            v-model="search"
            placeholder="输入中文名称回车查找"
            outlined
            hide-details
            dense
            clearable
            append-icon="mdi-magnify"
            @click:append="handleSearch"
            @keyup.enter="handleSearch"
            @click:clear="handleSearch(true)"
          ></v-text-field>
        </div>
      </template>
      <TableList
        ref="table"
        :loading="loading"
        :headers="headers"
        :items="items"
        :total="total"
        :singleSelect="true"
        height="400px"
        :select-item="true"
        fixed-header
        :page-info="pageInfo"
        :is-tools="false"
        :show-select="true"
        :disable-sort="true"
        @pageHandleChange="pageHandleChange"
        @selected="handleSelected"
      >
      </TableList>
    </MCard>
  </div>
</template>

<script>
import MForm from '@/components/MForm'
import MCard from '@/components/MCard'
import TableList from '@/components/List/table'
import { api } from '@/api/dataGovernance'

export default {
  name: 'metadata-add-audit',
  components: { MCard, TableList, MForm },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      search: null,
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      loading: false,
      items: [],
      headers: [
        { text: '中文名称', value: 'name_zh' },
        { text: '英文名称', value: 'name_en' },
        { text: '数据类型', value: 'data_type' }
      ],
      formValues: {
        name_zh: null,
        source: 'manual',
        notes: null,
        record_type: null,
        meta1: {},
        meta2: {}
      }
    }
  },
  computed: {
    formItems () {
      return [
        {
          type: 'text',
          key: 'name_zh',
          disabled: true,
          label: '主元数据 *',
          col: 6
        },
        {
          type: 'text',
          key: 'source',
          value: 'manual',
          label: '请选择触发来源 *',
          col: 6
        },
        {
          type: 'autocomplete',
          key: 'record_type',
          label: '请选择审核记录类型 *',
          items: [{ label: '疑似重复', value: 'redundancy' }, { label: '疑似变动', value: 'change' }, { label: '合并请求', value: 'merge' }],
          col: 6,
          rules: [v => !!v || '请选择审核记录类型']
        },
        {
          type: 'text',
          key: 'notes',
          label: '请输入备注',
          col: 6
        }
      ]
    }
  },
  created () {
    this.init()
    if (!Object.keys(this.itemData).length) {
      return
    }
    this.formValues.name_zh = this.itemData.name_zh
    this.formValues.meta1 = {
      id: this.itemData.id,
      name_zh: this.itemData.name_zh,
      name_en: this.itemData.name_en,
      data_type: this.itemData.data_type,
      status: this.itemData.status
    }
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.getMetaDataList({
            ...this.pageInfo,
            name_zh: this.search
          })
          this.items = data.records
          this.total = data.total
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          this.loading = false
        }
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    },
    handleSearch (clear) {
      if (clear === true) {
        this.search = null
      }
      this.pageInfo.current = 1
      this.init()
    },
    handleSelected (selected) {
      if (!selected || !selected.length) {
        this.formValues.meta2 = {}
        return
      }
      const item = selected[0]
      if (item.id === this.itemData.id) {
        this.$snackbar.warning('候选元数据不能与主元数据相同')
        return
      }
      this.formValues.meta2 = {
        id: item.id,
        name_zh: item.name_zh,
        name_en: item.name_en,
        data_type: item.data_type,
        status: item.status
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      const { name_zh: nameZh, ...rest } = this.formValues
      return {
        ...rest
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
