<template>
  <el-dialog class='table-box' v-model='dialogVisible1' top='114px'
    :style="{ height: height, maxHeight: height, overflow: 'hidden' }" :title='title1' :width='width' :modal='false'>
    <div class="table-box">
      <ProTable :columns="columns" :data="data">
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
          <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加</el-button>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出</el-button>
          <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
            @click="batchDelete(scope.selectedListIds)">
            批量删除
          </el-button>
        </template>

        <template #operation="scope">
          <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
          <el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </ProTable>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogVisible2" :title="dialogType2 === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
    <div>
      <el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
        <el-form-item label="字典类型编码" :label-width="100">
          <el-input :value="route.params.code" disabled />
        </el-form-item>
        <el-form-item label="名称" :label-width="100" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="编码" :label-width="100" prop="code">
          <el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="值" :label-width="100" prop="value">
          <el-input v-model="dialogForm.value" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="显示排序" :label-width="100">
          <el-input-number v-model="dialogForm.sort" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="dictData">
import { useRoute } from 'vue-router'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
import { Dict } from '@/api/system/dictionary/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { dialogSmall } from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { dictDataList } from '@/api/system/dictionary/dictExample'
import { FormItemRule } from 'element-plus'
import {
  getDictDataList,
  updateDictData,
  addDictData,
  batchAddDictData,
  exportDictData,
  deleteDictData
} from '@/api/system/dictionary'

const route = useRoute()

const dictStore = useDictStore()
const data = dictDataList

const proTable = ref<ProTableInstance>()
const dictTypeId = ref('')
const dialogVisible1 = ref(false)
const title1 = ref('')
const dialogFormRef = ref()

const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '名称',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'code',
    label: '编码',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'value',
    label: '值',
    width: 180
  },
  {
    prop: 'level',
    label: '事件等级',
    width: 120,
    render: scope => {
      return (
        <>
          {scope.row.level === 0 || scope.row.level === null || scope.row.level === undefined ?
            (<span>—</span>) :
            (<el-tag type={scope.row.level === 1 ? 'info' : scope.row.level === 2 ? 'warning' : 'danger'}>
              {scope.row.level === 1 ? '普通' : scope.row.level === 2 ? '警告' : '危险'}
            </el-tag>)
          }
        </>
      )
    }
  },
  {
    prop: 'state',
    label: '状态',
    minWidth: 100,
    enum: dictStore.getDictData('status'),
    search: {
      el: 'tree-select',
      props: { filterable: true }
    },
    fieldNames: { label: 'label', value: 'code' },
    render: scope => {
      return (
        <>
          {
            <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
          }
        </>
      )
    },
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 180,
    search: {
      el: 'date-picker',
      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' }
    }
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    width: 330
  },
])
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
  name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
  code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
  value: [{ required: true, message: '类型值必填！', trigger: 'blur' }],
})

const { dialogVisible2, dialogType2, dialogForm } = useCount();
function useCount() {
  const dialogVisible2 = ref(false)
  const dialogType2 = ref('新增')

  const dialogForm = ref({
    id: "",
    name: "",
    code: "",
    value: "",
    sort: 100,
  })

  return { dialogVisible2, dialogType2, dialogForm };
}

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

const open = (textTitle: string, id: string) => {
  dialogVisible1.value = true
  title1.value = textTitle
  dictTypeId.value = id
  // getDictDataList({ dictTypeId: id }).then(res => {
  //   data.value = res.data
  // }
}

defineExpose({ open })

// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
  dialogVisible2.value = true
  dialogType2.value = title
  if (title === '编辑') {
    row && (dialogForm.value = row as { id: string; name: string; code: string; value: string; sort: number; state: number; });
  }
}

// 批量添加字典数据
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '字典数据',
    tempApi: exportDictData,
    importApi: batchAddDictData,
    getTableList: proTable.value?.getTableList,
  }
  dialogRef.value?.acceptParams(params)
}

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

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

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

const close = () => {
  dialogVisible2.value = false
  //清空dialogForm中的值
  dialogForm.value = {
    id: "",
    name: "",
    code: "",
    value: "",
    sort: 100
  }
  dialogFormRef.value?.resetFields()
}

const save = () => {
  try {
    dialogFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        let params = JSON.stringify(dialogForm.value)
        console.log(params)
        if (dialogType2.value === '新增') {
          await useHandleData(addDictData, dialogForm.value, '新增字典数据')
        } else {
          await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
        }
        close()
        proTable.value?.getTableList()
      } else {
        ElMessage.error('表单验证失败！')
      }
    })
  } catch (err) {
    console.error('验证过程中出现错误', err)
  }
}
</script>
