<template>
  <div class="pa-3" style="background-color: #FFF;">
    <filter-list :filter="['name_zh', 'name_en', 'category', 'tag', 'level']" @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 #actions="{ item }">
        <v-btn text color="primary" @click="handleEdit(item)">编辑</v-btn>
        <v-btn text color="error" @click="handleDelete(item.id)">删除</v-btn>
      </template>
      <template #status="{ item }">
        <v-chip
          :color="item.status ? 'success' : 'error'"
          small
        >
          {{ item.status ? '已启用' : '已禁用'}}
        </v-chip>
      </template>
      <template #tag="{ item }">
        {{ item.tag?.name_zh }}
      </template>
      <template #navBtn>
        <v-btn class="elevation-5 mr-2 buttons" rounded color="primary" @click="handleAdd('ddl')">
          <v-icon left>mdi-plus</v-icon>
          ddl解析
        </v-btn>
        <v-btn class="elevation-5 mr-2 buttons" rounded color="primary" @click="handleAdd('model')">
          <v-icon left>mdi-plus</v-icon>
          新增模型
        </v-btn>
      </template>
    </table-list>
    <edit-dialog
      :visible.sync="show"
      :title="title"
      :fullscreen="true"
      body-style="display: flex;padding: 0;"
      :footer="false"
    >
      <component v-if="show" :is="path" ref="edit" :itemData="itemData" @close="handleClose"></component>
    </edit-dialog>
  </div>
</template>

<script>
import EditDialog from '@/components/Dialog'
import model from './components/edit'
import ddl from './components/editByDDL'
import FilterList from '../components/Filter'
import TableList from '@/components/List/table'

import { api } from '@/api/dataGovernance'
import {
  frequency,
  sensitivity
} from '@/utils/dataGovernance'
export default {
  name: 'data-field',
  components: {
    FilterList,
    TableList,
    EditDialog,
    model,
    ddl
  },
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      path: null,
      itemData: {},
      drawer: false,
      show: false,
      loading: false,
      headers: [
        { text: '中文名', value: 'name_zh' },
        { text: '英文名', value: 'name_en' },
        { text: '分类', value: 'category' },
        { text: '标签', value: 'tag' },
        { text: '层级', value: 'level' },
        { text: '描述', value: 'describe' },
        { text: '状态', value: 'status' },
        { text: '血缘关系数量', value: 'blood_count', align: 'center' },
        { text: '创建时间', value: 'create_time' },
        { text: '操作', value: 'actions' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        size: 10,
        current: 1
      },
      orders: [],
      query: {
        name_zh: null
      }
    }
  },
  computed: {
    title () {
      return Object.keys(this.itemData).length
        ? '编辑数据模型 - ' + this.itemData.data_model.name_zh
        : '新增数据模型'
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      api.getModelList({
        ...this.pageInfo,
        ...this.query
      })
        .then(({ data }) => {
          this.items = data.records.map(e => {
            e.frequency = frequency.find(_e => _e.value === e.frequency)?.label
            e.data_sensitivity = sensitivity.find(_e => _e.value === e.data_sensitivity)?.label
            return e
          })
          this.total = data.total
        })
        .catch(error => {
          this.$snackbar.error(error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleAdd (str) {
      this.path = str
      this.show = true
      this.itemData = {}
    },
    // 编辑
    async handleEdit ({ id }) {
      try {
        const { data } = await api.getModelDetails({ id })
        this.itemData = {
          id,
          ...data
        }
        this.path = data.data_model.origin === 'sql' ? 'ddl' : 'model'
        this.show = true
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleDelete (ids) {
      this.$confirm('提示', '是否确定删除该项元数据组合').then(async () => {
        try {
          // await combinationDel({ metaDataCombinationId })
          await api.deleteModel({ id: ids })
          this.$snackbar.success('删除成功')
          // this.pageInfo.current = 1
          this.init()
        } catch (error) {
          this.$snackbar.error(error)
        }
      })
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    handleSearch (obj) {
      Object.assign(this.query, obj)
      this.pageInfo.current = 1
      this.init()
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    },
    handleClose () {
      this.show = false
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .v-data-table {
  overflow: auto !important;
}
</style>
