<template>
  <div class="main-box">
    <TreeFilter title="字典类型" ref="treeRef" :request-api="DictApi.tree" label="name" :default-value="initParam.dictId" @change="changeTree" />
    <div class="table-box">
      <ProTable
        ref="proTableRef"
        title="字典数据"
        row-key="dictId"
        :indent="20"
        :columns="columns"
        :init-param="initParam"
        :search-columns="searchColumns"
        :request-api="getTableList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
          <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected"> 批量删除 </el-button>
        </template>

        <template #operation="{ row }">
          <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
          <el-button v-if="row.id !== 1" type="primary" link icon="Delete"> 删除 </el-button>
        </template>
      </ProTable>
    </div>
    <DictDrawer ref="drawerRef" @submit="refreshTree" size="40%" />
  </div>
</template>
<script lang="tsx" setup name="DIctManage">
import { RoleInfo, RoleQuery } from '@/api/interface/system/role'
import DictApi from '@/api/module/system/dict'
import DictDrawer from './components/DictDrawer.vue'
import TreeFilter from '@/components/TreeFilter/index.vue'
import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
import { OrgFormBo } from '@/api/interface/system/org'
import { useDictOptions } from '@/hooks'
const initParam = reactive({ dictId: '', parentId: '' })

const selectTreeId = ref<string>('')
const proTableRef = ref<ProTableInstance>()
const treeRef = ref<InstanceType<typeof TreeFilter>>()

// 树形筛选切换
const changeTree = (val: string) => {
  if (val) {
    selectTreeId.value = val
    initParam.parentId = val
    proTableRef.value?.clearSelection()
  }
}

// 刷新树表
const refreshTree = () => {
  treeRef.value?.refresh()
}

// 表格配置项
const columns: ColumnProps<RoleInfo>[] = [
  { type: 'selection', width: 60 },
  { prop: 'dictLabel', label: '字典标签' },
  { prop: 'dictValue', label: '字典值' },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: useDictOptions('COMMON_STATUS'),
    width: 80,
    fieldNames: { label: 'dictLabel', value: 'status', tagType: 'callbackShowStyle' }
  },
  { prop: 'orderNum', label: '排序' },
  { prop: 'remark', label: '备注' },
  { prop: 'createByName', label: '创建人' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

// 表格配置项
const searchColumns: SearchProps[] = [{ prop: 'dictLabel', label: '字典标签', el: 'input' }]

// 获取table列表
const getTableList = (params: RoleQuery) => DictApi.page(params)

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof DictDrawer> | null>(null)
const openDrawer = (title: string, row: Partial<OrgFormBo> = {}) => {
  const params = {
    title,
    row: title === '新增' ? { parentId: selectTreeId.value } : { ...row },
    isView: title === '查看',
    api: title === '新增' ? DictApi.add : title === '编辑' ? DictApi.edit : undefined,
    getTableList: proTableRef.value?.getTableList
  }
  drawerRef.value?.acceptParams(params)
}
</script>
