<template>
  <div class="gl-page-content">
    <div class="table">
      <BaseTable
        ref="baseTableRef"
        tableName="SYSTEM_DICTIONARY"
        :api="getDictionaryClassApi"
        :actionsWidth="160"
      >
        <template #leftOptions>
          <el-button type="primary" :icon="Plus" @click="openDetailFun({})">新增字典类型</el-button>
        </template>
        <template #tableActions="{ row }">
          <div class="gl-table-actions">
            <el-link type="primary" @click="openDetailFun(row)">编辑</el-link>
            <el-link type="primary" @click="openListFun(row)">字典列表</el-link>
            <el-popconfirm title="确定删除字典类型吗？" :width="200" placement="left" @confirm="delFun(row)">
              <template #reference>
                <el-link type="danger">删除</el-link>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </BaseTable>
    </div>
    <ClassDetailDrawer v-model="detailVisible" :data="detailData" tableName="SYSTEM_DICTIONARY" @submit="submitFun" />
    <DictListDrawer v-model="listVisible" :data="detailData" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import BaseTable from '@/components/common/table/baseTable.vue';
import ClassDetailDrawer from './components/classDetail.vue';
import DictListDrawer from './components/dictList.vue';
import { getDictionaryClassApi, deleteDictionaryClassApi } from '@/api/system/systemData';
import { getAllDictDataFun } from '@/utils/common';

const detailVisible = ref(false);
const listVisible = ref(false);
const detailData = ref<any>({});
const baseTableRef = ref<any>();

const openDetailFun = (data: any) => {
  detailData.value = data;
  detailVisible.value = true;
};

const openListFun = (data: any) => {
  detailData.value = data;
  listVisible.value = true;
};

const submitFun = () => {
  baseTableRef.value.resetFun();
};

const delFun = (data: any) => {
  const params = {
    uuid: data.uuid,
  };
  deleteDictionaryClassApi(params).then((res: any) => {
    if (res.code === 200) {
      baseTableRef.value.resetFun();
      ElMessage.success('操作成功');
      getAllDictDataFun(true);
    }
  });
};
</script>
