<template>
  <div class="white pa-3">
    <m-filter :option="filter" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :is-tools="false"
      :disable-sort="true"
      :page-info="pageInfo"
      :show-select="false"
      :can-delete="false"
      @pageHandleChange="pageHandleChange"
    >
      <template #record_type="{ item }">
        {{ item.record_type === 'redundancy' ? '疑似冗余' : '疑似变动' }}
      </template>
      <template #status="{ item }">
        <v-chip small :color="item.status === 'pending' ? 'primary' : item.status === 'resolved' ? 'success' : 'warning'">
          {{ item.status === 'pending' ? '待处理' : item.status === 'resolved' ? '已处理' : '已忽略' }}
        </v-chip>
      </template>
      <template #created_at="{ item }">
        {{ formatDate(item.created_at) }}
      </template>
      <template #actions="{ item }">
        <v-btn color="primary" text @click="handleAction(item)">详情</v-btn>
      </template>
    </m-table>

    <edit-dialog :visible.sync="show" title="数据审核详情" :fullscreen="false" :width-type="0" :footer="false" style="min-height: 80vh;">
      <DetailsComponent
        :info="info"
        @action="handleSubmit"
        @notesChange="val => notes = val"
      />
      <template v-if="info?.status === 'pending'" #footer>
        <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="warning" @click="handleSubmit('ignore')">忽略</v-btn>
          </v-card-actions>
      </template>
    </edit-dialog>
  </div>
</template>

<script>
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table.vue'
import EditDialog from '@/components/Dialog'
import DetailsComponent from './components/details.vue'
import { dataReviewList, dataReviewDetail, dataReviewResolve } from '@/api/dataReview'
import { api } from '@/api/dataGovernance'
import { formatDate } from '@/utils/date'
export default {
  name: 'dataProcess',
  components: {
    MFilter,
    MTable,
    EditDialog,
    DetailsComponent
  },
  data () {
    return {
      show: false,
      loading: false,
      filter: {
        list: [
          {
            type: 'textField',
            value: '',
            label: '关键词',
            key: 'keyword'
          },
          {
            type: 'autocomplete',
            value: null,
            label: '业务域',
            itemValue: 'id',
            itemText: 'name_zh',
            key: 'business_domain_id',
            items: []
          },
          {
            type: 'autocomplete',
            value: null,
            label: '记录类型',
            key: 'record_type',
            items: [{ label: '疑似冗余', value: 'redundancy' }, { label: '疑似变动', value: 'change' }]
          },
          {
            type: 'autocomplete',
            value: null,
            label: '状态',
            key: 'status',
            items: [{ label: '待处理', value: 'pending' }, { label: '已处理', value: 'resolved' }, { label: '已忽略', value: 'ignored' }]
          }
        ]
      },
      queryData: {
        keyword: null,
        status: null,
        business_domain_id: null,
        record_type: null
      },
      headers: [
        { text: '中文名称', align: 'start', value: 'new_meta.name_zh' },
        { text: '英文名称', align: 'start', value: 'new_meta.name_en' },
        { text: '记录类型', align: 'center', value: 'record_type' },
        { text: '状态', align: 'center', value: 'status' },
        { text: '备注', align: 'center', value: 'notes' },
        { text: '创建时间', align: 'start', value: 'created_at' },
        { text: '操作', align: 'center', value: 'actions' }
      ],
      items: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      info: {},
      notes: ''
    }
  },
  created () {
    this.getBusinessDomainList()
    this.init()
  },
  methods: {
    // 获取业务域列表
    async getBusinessDomainList () {
      try {
        const { data } = await api.getBusinessDomainList2()
        const businessDomain = this.filter.list.find(item => item.key === 'business_domain_id')
        if (!data || !data?.length) {
          businessDomain.items = []
          return
        }
        businessDomain.items = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async init () {
      this.loading = true
      try {
        const { data } = await dataReviewList({
          ...this.pageInfo,
          ...this.queryData
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    // 详情、处理
    async handleAction (item) {
      try {
        const { data } = await dataReviewDetail(item.id)
        this.info = data || {}
        this.notes = data?.notes || ''
        this.show = true
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    // 设为主元数据、设为别名、忽略
    async handleSubmit (action, type) {
      const params = {
        id: this.info.id,
        action: action,
        resolved_by: this.$store.getters.userInfo.username,
        notes: this.notes || ''
      }
      // 设为某候选元数据别名
      if (type === 'new_meta' || type === 'candidate') {
        const otherMetaId = this.info.record_type === 'redundancy' ? this.info.candidates[0].snapshot.id : this.info.old_meta.snapshot.id
        params.payload = {
          primary_meta_id: type === 'new_meta' ? this.info.new_meta.id : otherMetaId,
          alias_meta_id: type === 'new_meta' ? otherMetaId : this.info.new_meta.id
        }
      }
      try {
        await dataReviewResolve(params)
        this.$snackbar.success('操作成功')
        this.show = false
        this.notes = ''
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    formatDate (date) {
      return formatDate(date)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
