<template>
  <el-dialog class='table-box' v-model='dialogVisible' top='114px'
             :style="{ height: height+'px', maxHeight: height+'px', overflow: 'hidden' }"
             title='字典数据'
             :width='width'
             :modal='false'>
    <div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
      <ProTable ref='proTable' :columns="columns" :request-api='getDictDataListByTypeId' :initParam="initParam">
        <template #tableHeader="scope">
          <el-button v-auth.dict="'show_add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">新增</el-button>
          <el-button v-auth.dict="'show_export'" type='primary' :icon='Download' plain @click="downloadFile">导出</el-button>
          <el-button v-auth.dict="'show_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_edit'" type="primary" link :icon="EditPen" @click="openDialog('edit', scope.row)">编辑</el-button>
          <el-button v-auth.dict="'show_delete'" type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </ProTable>
    </div>
  </el-dialog>
  <DataPopup :refresh-table='proTable?.getTableList' ref='dataPopup'/>
</template>

<script setup lang="tsx" name="dictData">
import {CirclePlus, Delete, Download, EditPen} from '@element-plus/icons-vue'
import {type Dict} from '@/api/system/dictionary/interface'
import {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
import {useHandleData} from '@/hooks/useHandleData'
import {deleteDictData, getDictDataListByTypeId, exportDictData} from "@/api/system/dictionary/dictData/index";
import {useDownload} from "@/hooks/useDownload";
import {exportDictType} from "@/api/system/dictionary/dictType";
import { isShallow } from 'vue';
defineOptions({
      name: 'dict'
  })
const proTable = ref<ProTableInstance>()
const dialogVisible = ref(false)
//字典数据所属的字典类型Id
const dictTypeId = ref('')
const dictTypeName = ref('')


const initParam = reactive({typeId: ''})

const dataPopup = ref()

const props = defineProps({
  width: {
    type: Number,
    default: 800,
  },
  height: {
    type: Number,
    default: 744,
  },
})

const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
  {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: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'value',
    label: '值',
    minWidth: 180,
    render: (scope) => {
    if (scope.row.openValue === 0 || scope.row.value === null || scope.row.value === '') {
      return <span>/</span>; // 使用 JSX 返回 VNode
    }
    return <span>{scope.row.value}</span>; // 使用 JSX 返回 VNode
  }
  },
  {
    prop: 'level',
    label: '事件等级',
    minWidth: 180,
    isShow:false,
    render: scope => {
      return (
          <>
            {
              (<el-tag type={scope.row.level === 0 ? 'info' : scope.row.level === 1 ? 'warning' : 'danger'}>
                {scope.row.level === 0 ? '普通' : scope.row.level === 1 ? '中等' : '严重'}
              </el-tag>)
            }
          </>
      )
    }
  },
  {
    prop: 'createTime',
    label: '创建时间',
    minWidth: 180
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    width: 200
  },
])

const open = (row: Dict.ResDictType) => {
  dialogVisible.value = true
  dictTypeId.value = row.id
  dictTypeName.value = row.name
  initParam.typeId = row.id
}

defineExpose({open})

// 打开 dialog(新增、查看、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
  dataPopup.value?.open(titleType, dictTypeId.value, dictTypeName.value, row)
}

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

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

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