<template>
  <div class="pa-3 white">
    <m-filter :filter="['name_zh', 'name_en', 'category']" categoryValue="DataOps" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :disable-sort="true"
      :show-select="false"
      :is-tools="false"
      @edit="handleEdit"
      @delete="handleDelete"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #group="{ item }">
        {{ item.group ? '是' : '否' }}
      </template>
      <template #status="{ item }">
        <v-chip
          :color="item.status ? 'success' : 'error'"
          small
        >
          {{ item.status ? '已启用' : '已禁用'}}
        </v-chip>
      </template>
      <template #navBtn>
        <v-btn class="elevation-5 mr-2 buttons" rounded color="primary" @click="handleAdd">
          <v-icon left>mdi-plus</v-icon>
          新增标签
        </v-btn>
      </template>
    </m-table>
    <m-dialog :title="title" :visible.sync="show" @submit="handleSubmit">
      <edit-page v-if="show" ref="edit" :item-data="itemData" v-loading="loadingSubmit"></edit-page>
    </m-dialog>
    <!-- <m-dialog title="请确认分组信息" :visible.sync="showGroup" widthType="2" @submit="handleSubmit">
      <v-list>
        <v-list-item-group
          v-model="groupActive"
          mandatory
          color="primary"
        >
          <v-list-item
            v-for="group in groups"
            :key="group.id"
          >
            <v-list-item-content>
              <v-list-item-title>{{ group.name }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </m-dialog> -->
  </div>
</template>

<script>
import MFilter from '../components/Filter'
import MTable from '@/components/List/table.vue'
import MDialog from '@/components/Dialog'
import EditPage from './components/edit'
import { api } from '@/api/dataGovernance'

export default {
  name: 'data-label',
  components: {
    MFilter,
    MTable,
    MDialog,
    EditPage
  },
  data () {
    return {
      loadingSubmit: false,
      loading: false,
      show: false,
      queryData: {
        name_zh: null,
        category: 'DataOps'
      },
      headers: [
        { text: '名称', value: 'name_zh' },
        { text: '分类', value: 'category' },
        { text: '适用范围', value: 'scope' },
        { text: '描述', value: 'describe' },
        { text: '标注数量', value: 'number' },
        { text: '是否业务域', value: 'group', align: 'center' },
        { text: '状态', value: 'status' },
        { text: '创建时间', value: 'create_time' },
        { text: '操作', value: 'actions' }
      ],
      itemData: {},
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      groupActive: -1,
      showGroup: false,
      groups: []
    }
  },
  computed: {
    title () {
      return `${Object.keys(this.itemData).length ? '编辑' : '新增'}数据标签`
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.dataLabelList({
          ...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()
    },
    handleAdd () {
      this.itemData = {}
      this.show = true
    },
    async handleEdit (item) {
      try {
        const { data } = await api.dataLabelDetails({ id: item.id })

        this.itemData = data
        this.show = true
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleDelete (ids) {
      if (Array.isArray(ids) && !ids.length) return this.$snackbar.warning('请选择要删除的选项')
      this.$confirm('提示', '是否删除该选项')
        .then(async () => {
          try {
            await api.deleteDataLabel({ id: ids })
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    // async handleConfirm () {
    //   const obj = this.$refs.edit.getValue()
    //   if (!obj) {
    //     return
    //   }
    //   if (!obj.group) {
    //     this.handleSubmit()
    //     return
    //   }
    //   this.loadingSubmit = true
    //   try {
    //     const { data } = await api.dataLabelIdentifyGroup({ content: obj.group })
    //     this.loadingSubmit = false
    //     const _data = data.filter(e => e.name !== obj.group)
    //     if (!_data.length) {
    //       this.groupActive = -1
    //       await this.handleSubmit()
    //       return
    //     }

    //     this.groups = [
    //       { name: obj.group, id: -1 },
    //       ..._data
    //     ]

    //     this.groupActive = 0
    //     this.showGroup = true
    //   } catch (error) {
    //     this.$snackbar.error(error)
    //     this.loadingSubmit = false
    //   }
    // },
    async handleSubmit () {
      const obj = this.$refs.edit.getValue()
      if (!obj) {
        return
      }

      Object.assign(obj, {
        group: obj.group ? '业务域' : null
      })
      // if (this.groupActive > -1) {
      //   Object.assign(obj, {
      //     group: this.groups[this.groupActive].name
      //   })
      // }
      // this.showGroup = false
      this.loadingSubmit = true
      try {
        await api.dataLabelAdd(obj)
        this.$snackbar.success('添加成功')
        this.show = false
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loadingSubmit = false
      }
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
