<template>
  <div class="comp-content">
    <el-drawer
      v-model="visible"
      title="字典列表"
      :size="600"
      :close-on-click-modal="false"
      @close="closeFun"
    >
      <div class="content">
        <div class="add-btn">
          <el-button :icon="Plus" type="primary" @click="openDetailFun({})">新增字典</el-button>
        </div>
        <div class="table">
          <vxe-table :data="tableData" height="100%">
            <vxe-column field="dictName" title="名称" align="center" header-align="center" />
            <vxe-column field="dictValue" title="数值" align="center" header-align="center" />
            <vxe-column field="comment" title="备注" align="center" header-align="center">
              <template #default="{ row }">
                <span>{{ row.comment ||'--' }}</span>
              </template>
            </vxe-column>
            <vxe-column field="action" title="操作" align="center" header-align="center">
              <template #default="{ row }">
                <div class="gl-table-actions">
                  <el-link type="primary" @click="openDetailFun(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>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
        </div>
      </template>
      <DictDetailDia v-model="addDiaVisible" :classData="data" :data="detailData" @submit="submitFun" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import DictDetailDia from './dictDetail.vue';
import { getDictionaryDataApi, deleteDictionaryDataApi } from '@/api/system/systemData';
import { getAllDictDataFun } from '@/utils/common';

interface Props {
  modelValue: boolean;
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  data: {},
});

const emit = defineEmits(['update:modelValue']);
const visible = ref(false);
const tableData = ref<any>([]);
const addDiaVisible = ref(false);
const detailData = ref<any>({});

watch(() => props.modelValue, (val: boolean) => {
  visible.value = val;
  if (val) {
    getListFun();
  }
});

const getListFun = () => {
  const params = {
    dictClass: props.data.className,
  };
  getDictionaryDataApi(params).then((res: any) => {
    if (res.code === 200) {
      tableData.value = res.data;
    }
  });
};

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

const submitFun = () => {
  getListFun();
};

const delFun = (data: any) => {
  const params = {
    uuid: data.uuid,
  };
  deleteDictionaryDataApi(params).then((res: any) => {
    if (res.code === 200) {
      getListFun();
      getAllDictDataFun(true);
      ElMessage.success('操作成功');
    }
  });
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  .add-btn {
    padding-bottom: var(--padding-normal);
  }
  .table {
    flex: 1;
  }
}
</style>
