<template>
  <PageWrapper>
    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      :row-selection="{ onChange: onSelectionChange }"
    >
      <template #tableTitle>
        <a-space>
          <a-input
            type="text"
            v-model:value="params.name"
            placeholder="请输入字典项名称"
            allow-clear
          />
          <a-button type="primary" @click="reloadTable">
            <template #icon> <SearchOutlined /> </template>查询
          </a-button>
          <a-button type="primary" @click="handleAdd">
            <template #icon> <PlusOutlined /> </template>新建</a-button
          >
          <a-button type="danger" :disabled="!selectionData.length" @click="handleDelete()">
            <template #icon> <DeleteOutlined /> </template>删除</a-button
          >
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" @click="handleEdit(record.id)">
              <template #icon><EditOutlined /></template>
              编辑
            </a-button>
            <a-button type="primary" danger @click="handleDelete(record.id)">
              <template #icon><DeleteOutlined /></template>
              删除
            </a-button>
          </a-space>
        </template>
      </template>
    </BasicTable>
    <editDialog
      v-if="editVisible"
      :dictId="dictId"
      :dictItemId="dictItemId"
      v-model:visible="editVisible"
      @success="reloadTable"
    />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, h, nextTick, watch, defineAsyncComponent } from 'vue';
  import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
  } from '@ant-design/icons-vue';
  import { getDictItemList, dictItemDelete, dictItemBatchDelete } from '@/api/data/dictionary';
  import { columns } from './columnsItem';
  import { Modal, message } from 'ant-design-vue';

  /**
   * 导入组件
   */
  const editDialog = defineAsyncComponent(() => import('./editItem.vue'));

  /**
   * 定义参数变量
   */
  const tableRef = ref();
  const editVisible = ref(false);
  const selectionData = ref([]);
  const dictItemId = ref(0);

  /**
   * 定义查询参数
   */
  const params = ref({
    name: '',
  });

  /**
   * 定义接收的参数
   */
  const props = defineProps({
    dictId: {
      type: Number,
      required: true,
      default: 0,
    },
  });

  /**
   * 侦听器
   */
  watch(
    () => props.dictId,
    async (value) => {
      if (value) {
        await nextTick();
        reloadTable();
      }
    },
  );

  /**
   * 刷新字典项值列表
   */
  function reloadTable() {
    tableRef.value.reload({ pageNo: 1 });
  }

  /**
   * 加载字典项值列表
   * @param res 参数
   */
  const loadDataTable = async (res) => {
    const result = await getDictItemList({ ...params.value, dictId: props.dictId, ...res });
    return result;
  };

  /**
   * 新建字典
   */
  const handleAdd = async () => {
    dictItemId.value = 0;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 编辑字典
   * @param id 参数
   */
  const handleEdit = async (id) => {
    dictItemId.value = id;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 删除字典项
   */
  async function handleDelete(id) {
    Modal.confirm({
      title: '提示',
      content: '确定要删除？',
      onOk: async () => {
        id ? await dictItemDelete(id) : await dictItemBatchDelete(selectionData.value);
        message.success('删除成功');
        reloadTable();
      },
    });
  }

  /**
   * 选项发生变化
   * @param value 参数
   */
  function onSelectionChange(value) {
    selectionData.value = value;
  }
</script>
<style lang="less" scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
