<template>
  <div class='table-box' ref='popupBaseView'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :request-api='getDictTypeList'
    >
      <template #tableHeader='scope'>
        <el-button v-auth.dict="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
        <el-button v-auth.dict="'export'" type='primary' :icon='Download' plain @click='downloadFile()'>导出</el-button>
        <el-button v-auth.dict="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                   @click='batchDelete(scope.selectedListIds)'>
          删除
        </el-button>
      </template>

      <template #operation='scope'>
        <el-button v-auth.dict="'show'" type='primary' link :icon='View' @click='toDictData(scope.row)'>查看</el-button>
        <el-button v-auth.dict="'edit'" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
        <el-button v-auth.dict="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
      </template>
    </ProTable>
  </div>
  <DictData :width='viewWidth' :height='viewHeight' ref='openView' />
  <TypePopup :refresh-table='proTable?.getTableList' ref='typePopup' />
</template>

<script setup lang='tsx' name='dict'>
import { CirclePlus, Delete, Download, EditPen, View } from '@element-plus/icons-vue'
import { type Dict } from '@/api/system/dictionary/interface'
import type {  ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import DictData from '@/views/system/dictionary/dictData/index.vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useViewSize } from '@/hooks/useViewSize'
import { useDownload } from '@/hooks/useDownload'
import { deleteDictType, getDictTypeList, exportDictType } from '@/api/system/dictionary/dictType'
import { reactive, ref } from 'vue'

const { popupBaseView, viewWidth, viewHeight } = useViewSize()

const proTable = ref<ProTableInstance>()
const typePopup = ref()
const openView = ref()

const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '类型名称',
    minWidth: 180,
    search: {
      el: 'input',
    },
  },
  {
    prop: 'code',
    label: '类型编码',
    minWidth: 220,
    search: {
      el: 'input',
    },
  },
  {
    prop: 'remark',
    label: '描述',
    minWidth: 250,
  },
  {
    prop: 'sort',
    label: '排序',
    minWidth: 70,
  },
  {
    prop: 'createTime',
    label: '创建时间',
    minWidth: 180,
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    width: 250,
  },
])


// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictType> = {}) => {
  typePopup.value?.open(titleType, row)
}


// 批量删除字典类型
const batchDelete = async (id: string[]) => {
  await useHandleData(deleteDictType, id, '删除所选字典类型')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 删除字典类型
const handleDelete = async (params: Dict.ResDictType) => {
  await useHandleData(deleteDictType, [params.id], `删除【${params.name}】字典类型`)
  proTable.value?.getTableList()
}

//查看字典类型包含的字典数据
const toDictData = (row: Dict.ResDictType) => {
  openView.value.open(row)
}

// 导出字典类型列表
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportDictType, '字典类型导出数据', proTable.value?.searchParam, false),
  )
}
</script>
