<template>
  <PageWrapper>
    <el-row :gutter="24">
      <el-col :span="8" class="mb-4">
        <el-card title="字典类型" :bordered="false">
          <template #header>
            <div class="flex justify-between">
              <h4>字典类型</h4>
              <div class="flex">
                <el-input
                  clearable
                  :style="{ width: '80%' }"
                  v-model="leftParams.dictName"
                  @keyup.enter="leftReloadTable"
                  placeholder="请输入字典名称"
                />
                <el-button type="primary" @click="leftReloadTable" class="ml-2">
                  <template #icon>
                    <el-icon>
                      <SearchOutlined />
                    </el-icon>
                  </template>
                  查询
                </el-button>
              </div>
            </div>
          </template>
          <BasicTable
            :columns="leftColumns"
            :request="leftLoadDataTable"
            :row-key="(row) => row.dictId"
            ref="leftTableRef"
            :actionColumn="leftActionColumn"
            @update:checked-row-keys="onCheckedRow"
          >
            <template #tableTitle>
              <el-space>
                <el-button type="primary" @click="addDictType">
                  <template #icon>
                    <el-icon>
                      <FileAddOutlined />
                    </el-icon>
                  </template>
                  添加
                </el-button>
              </el-space>
            </template>
          </BasicTable>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card :bordered="false" class="mb-4 proCard">
          <BasicTable
            :columns="rightColumn"
            :request="loadDataTable"
            :row-key="(row) => row.dictCode"
            ref="rightTableRef"
            :actionColumn="actionColumn"
          >
            <template #tableTitle>
              <el-space>
                <el-input
                  clearable
                  :style="{ width: '80%' }"
                  v-model="rightParams.dictLabel"
                  @keyup.enter="rightReloadTable"
                  placeholder="请输入字典名称"
                />
                <el-button type="primary" @click="rightReloadTable">
                  <template #icon>
                    <el-icon>
                      <SearchOutlined />
                    </el-icon>
                  </template>
                  查询
                </el-button>
                <el-button type="primary" @click="addDictData">
                  <template #icon>
                    <el-icon>
                      <FileAddOutlined />
                    </el-icon>
                  </template>
                  添加
                </el-button>
              </el-space>
            </template>
          </BasicTable>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加/编辑 字典 -->
    <AddDictType ref="addDictTypeRef" :title="addDictTypeTitle" @change="leftReloadTable()" />
    <!-- 添加/编辑 字典项 -->
    <AddDictData ref="addDictDataRef" :title="addDictDataTitle" @change="rightReloadTable()" />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, h, onMounted, nextTick, unref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { dictTypeList, dictInfo, delDictType, delDictData } from '@/api/system/dictionary';
  import AddDictType from './components/AddDictType.vue';
  import AddDictData from './components/AddDictData.vue';
  import { ElMessage, ElCheckbox, ElTag } from 'element-plus';
  import { FileAddOutlined, SearchOutlined } from '@vicons/antd';

  const message = ElMessage;
  const leftTableRef = ref();
  const rightTableRef = ref();
  const dictTableList = ref<any[]>([]);
  const rowKeys = ref<any[]>([]);
  const rowKeysName = ref('');
  const isEdit = ref(false);
  const dictTypeTableList = ref();
  const dictType = ref('');
  const addDictTypeRef = ref();
  const addDictDataRef = ref();
  const addDictTypeTitle = ref('添加字典');
  const addDictDataTitle = ref('添加字典项');

  const leftParams = ref({
    dictName: '',
  });

  const rightParams = ref({
    dictLabel: '',
  });

  const leftColumns = [
    {
      fixed: 'left',
      width: 60,
      render(record) {
        return h(ElCheckbox, {
          modelValue: dictType.value === record.row.dictType,
          onChange() {
            dictType.value = record.row.dictType;
            rightTableRef.value.reload();
          },
        });
      },
    },
    {
      label: '字典名称',
      prop: 'dictName',
    },
    {
      label: '字典类型',
      prop: 'dictType',
    },
  ];

  const leftActionColumn = reactive({
    width: 140,
    label: '操作',
    prop: 'action',
    fixed: 'right',
    align: 'center',
    render(record) {
      return h(TableAction as any, {
        actions: [
          {
            label: '删除',
            isConfirm: true,
            popConfirm: {
              onConfirm: removeDictType.bind(null, record.row),
              title: `您确定要删除【${record.row.dictName}】吗？`,
              width: 300,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            },
          },
          {
            label: '编辑',
            onClick: editDictType.bind(null, record.row),
          },
        ],
      });
    },
  });

  const rightColumn = [
    {
      label: '字典项名称',
      prop: 'dictLabel',
    },
    {
      label: '字典项值',
      prop: 'dictValue',
    },
    {
      label: '排序',
      prop: 'dictSort',
    },
    {
      label: '状态',
      prop: 'status',
      render(record) {
        return h(
          ElTag,
          {
            type: record.row.status === '0' ? 'success' : 'danger',
          },
          {
            default: () => (record.row.status === '0' ? '正常' : '停用'),
          },
        );
      },
    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
  ];

  const actionColumn = reactive({
    width: 140,
    label: '操作',
    prop: 'action',
    fixed: 'right',
    align: 'center',
    render(record) {
      return h(TableAction as any, {
        actions: [
          {
            label: '删除',
            isConfirm: true,
            popConfirm: {
              onConfirm: removeDictData.bind(null, record.row),
              title: `您确定要删除【${record.row.dictLabel}】吗？`,
              width: 300,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            },
          },
          {
            label: '编辑',
            onClick: editDictData.bind(null, record.row),
          },
        ],
      });
    },
  });

  //添加字典类型
  function addDictType() {
    addDictTypeRef.value.openModal();
    nextTick(() => {
      isEdit.value = false;
      addDictTypeRef.value.setProps({ label: '添加字典类型' });
    });
  }

  //删除字典类型
  function removeDictType(record) {
    rowKeysName.value = record.dictName;
    delDictType({ dictId: record.dictId }).then(() => {
      message.success('删除成功');
      leftReloadTable();
    });
  }

  //编辑字段类型
  function editDictType(record) {
    addDictTypeRef.value.openModal();
    nextTick(() => {
      isEdit.value = true;
      addDictTypeRef.value.setProps({ title: '编辑字典类型' });
      addDictTypeRef.value.setFieldsValue({
        ...unref(record),
      });
    });
  }

  //删除字典
  function removeDictData(record) {
    rowKeysName.value = record.dictName;
    delDictData({ dictCode: record.dictCode }).then(() => {
      message.success('删除成功');
      rightReloadTable();
    });
  }

  //添加字典
  function addDictData() {
    addDictDataRef.value.openModal();
    nextTick(() => {
      isEdit.value = false;
      addDictDataRef.value.setProps({ title: '添加字典项' });
      addDictDataRef.value.setFieldsValue({
        dictType: dictType.value,
      });
    });
  }

  //编辑字典
  function editDictData(record) {
    addDictDataRef.value.openModal();
    nextTick(() => {
      isEdit.value = true;
      addDictDataRef.value.setProps({ title: '编辑字典项' });
      addDictDataRef.value.setFieldsValue({
        ...unref(record),
      });
    });
  }

  //选择字典项
  function onCheckedRow(keys) {
    rowKeys.value = keys;
  }

  //刷新字典类型
  function leftReloadTable() {
    leftTableRef.value.restReload();
  }

  //刷新字典列表
  function rightReloadTable() {
    rightTableRef.value.restReload();
  }

  //加载字典项列表
  const leftLoadDataTable = async (res) => {
    const result = await dictTypeList({ ...leftParams.value, ...res });
    dictTypeTableList.value = result.list;
    if (result.list.length) {
      dictType.value = result.list[0].dictType;
      rightReloadTable();
    }
    return result;
  };

  //加载字典项值列表
  const loadDataTable = async (res) => {
    if (!dictType.value) return;
    const result = await dictInfo({ dictType: dictType.value, ...rightParams.value, ...res });
    dictTableList.value = result.list;
    return result;
  };

  onMounted(() => {});
</script>

<style lang="scss" setup></style>
