<script lang="ts" setup>
import { type PropType, watch } from 'vue';

import { useAccess } from '@vben/access';
import { useVbenModal } from '@vben/common-ui';

import { Button, message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { DictionaryApi } from '#/api';
import { TableAction } from '#/components/table-action';

import { gridOptions, searchFormOptions } from './data.config';
import FormEdit from './edit.vue';

defineOptions({
  name: 'DictionaryItem',
});

const props = defineProps({
  type: {
    type: String as PropType<string>,
    default: '',
  },
});

const { hasAccessByCodes } = useAccess();

const [Grid, { reload }] = useVbenVxeGrid({
  formOptions: searchFormOptions,
  gridOptions: {
    ...gridOptions,

    proxyConfig: {
      autoLoad: false,
      ajax: {
        query: async (_: any, formValues: any) => {
          const postData = { ...formValues };
          postData.type = props.type;
          return await DictionaryApi.getItemTree({
            ...postData,
          });
        },
      },
    },
  },
});

const [FormEditModal, formEditApi] = useVbenModal({
  connectedComponent: FormEdit,
});

watch(
  () => props.type,
  () => {
    reload();
  },
  { deep: true },
);

const handleDelete = (id: number) => {
  Modal.confirm({
    iconType: 'info',
    title: '删除提示',
    content: `确定要删除选择的记录吗?`,
    cancelText: `关闭`,
    onOk: async () => {
      await DictionaryApi.deleteItemDetail(id);
      message.success('数据删除成功');
      reload();
    },
  });
};

const handleEdit = (record: any, isUpdate: boolean) => {
  if (!isUpdate && !props.type) {
    message.warning('请先选择字典类型');
    return;
  }
  formEditApi.setData({
    isUpdate,
    baseData: { ...record, dictionaryCode: props.type },
  });

  formEditApi.open();
};

const handelSuccess = () => {
  reload();
};
</script>
<template>
  <div class="h-full">
    <FormEditModal :close-on-click-modal="false" @success="handelSuccess" />
    <Grid>
      <template #toolbar-tools>
        <Button
          class="mr-2"
          type="primary"
          v-access:code="'dict-detail:add'"
          @click="() => handleEdit({}, false)"
        >
          新增字典项
        </Button>
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '添加子项',
              type: 'text',
              disabled: !hasAccessByCodes(['dict-detail:add']),
              onClick: handleEdit.bind(null, { parentId: row.id }, false),
            },
            {
              label: '编辑',
              type: 'text',
              disabled: !hasAccessByCodes(['dict-detail:edit']),
              onClick: handleEdit.bind(null, { id: row.id }, true),
            },
          ]"
          :drop-down-actions="[
            {
              label: '删除',
              type: 'text',
              disabled: !hasAccessByCodes(['dict-detail:delete']),
              onClick: handleDelete.bind(null, row.id),
            },
          ]"
        />
      </template>
    </Grid>
  </div>
</template>
