<script lang="ts" setup>
/**
 * 中医字典列表（疾病 / 治法 / 证候共用）
 * 支持 CRUD + 手动「同步拼音首拼」（仅补空值）
 */
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { computed, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

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

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

import {
  createTcmDict,
  deleteTcmDict,
  getTcmDictList,
  syncTcmDictPinyin,
  updateTcmDict,
  type TcmDictType,
} from '../api';

const props = defineProps<{
  dictType: TcmDictType;
  pageTitle: string;
  pageName: string;
}>();

defineOptions({ name: 'TcmDictListPage' });

const hasTopTableDropDownActions = ref(false);
const syncing = ref(false);

const formOptions = {
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'keyword',
      label: '关键字',
      componentProps: { placeholder: '名称/编码/首拼' },
    },
  ],
};

const gridOptions = computed(() => ({
  checkboxConfig: { highlight: true, labelField: '' },
  columns: [
    { type: 'checkbox', width: 60 },
    { field: 'id', title: 'ID', width: 80 },
    { field: 'code', title: '代码', width: 120 },
    { field: 'number', title: '编号', width: 120 },
    { field: 'name', title: '名称', minWidth: 160 },
    { field: 'alias', title: '别名', minWidth: 120 },
    { field: 'initials_of_pinyin', title: '拼音首拼', width: 120 },
    { field: 'pinyin_full', title: '拼音全拼', minWidth: 160 },
    { field: 'created_at', title: '创建时间', width: 170 },
    { title: '操作', slots: { default: 'action' }, width: 140, fixed: 'right' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }: any, formValues: any) => {
        return await getTcmDictList({
          type: props.dictType,
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  height: 'auto',
  toolbarConfig: {
    search: true,
    refresh: true,
    slots: { buttons: 'toolbar-actions' },
  },
}));

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    hasTopTableDropDownActions.value =
      gridApi.grid.getCheckboxRecords().length > 0;
  },
  checkboxAll() {
    hasTopTableDropDownActions.value =
      gridApi.grid.getCheckboxRecords().length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions: gridOptions.value as any,
  gridEvents,
});

const isUpdate = ref(false);
const [Form, formApi] = useVbenForm({
  wrapperClass: 'grid-cols-12',
  commonConfig: {
    formItemClass: 'col-span-12',
    componentProps: { class: 'w-full' },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'id',
      label: 'ID',
      dependencies: { show: false, triggerFields: ['id'] },
    },
    {
      component: 'VbenInput',
      fieldName: 'name',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      fieldName: 'code',
      label: '代码',
      formItemClass: 'col-span-6',
    },
    {
      component: 'VbenInput',
      fieldName: 'number',
      label: '编号',
      formItemClass: 'col-span-6',
    },
    {
      component: 'VbenInput',
      fieldName: 'alias',
      label: '别名',
    },
    {
      component: 'VbenInput',
      fieldName: 'initials_of_pinyin',
      label: '拼音首拼',
      componentProps: { placeholder: '保存时按名称自动生成，可留空' },
    },
    {
      component: 'VbenInput',
      fieldName: 'pinyin_full',
      label: '拼音全拼',
      componentProps: { placeholder: '保存时按名称自动生成，可留空' },
    },
  ],
  showDefaultActions: false,
});

const [FormModal, formModalApi] = useVbenModal({
  class: 'w-[640px]',
  draggable: true,
  onConfirm: async () => {
    const e = await formApi.validate();
    if (!e.valid) return;
    const values = await formApi.getValues();
    formModalApi.setState({ confirmLoading: true });
    try {
      const payload = { ...values, type: props.dictType };
      if (isUpdate.value) {
        await updateTcmDict(payload);
      } else {
        await createTcmDict(payload);
      }
      message.success('保存成功');
      gridApi.query();
      formModalApi.close();
    } finally {
      formModalApi.setState({ confirmLoading: false });
    }
  },
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formApi.resetForm();
      return;
    }
    const data = formModalApi.getData<{ values?: any; update?: boolean }>();
    isUpdate.value = !!data?.update;
    if (data?.values && data.update) {
      formApi.setValues({ ...data.values });
    } else {
      formApi.resetForm();
    }
  },
});

function showModal(row: any = {}, update = false) {
  formModalApi.setData({ values: row, update });
  formModalApi.open();
}

async function handleDelete(ids: number[]) {
  await deleteTcmDict({ type: props.dictType, ids });
  message.success('删除成功');
  gridApi.query();
}

/** 手动同步：补全空首拼/全拼，并纠正名称含数字但旧拼音丢数字的脏数据 */
function handleSyncPinyin() {
  AntModal.confirm({
    title: '同步拼音',
    content: `将扫描「${props.pageTitle}」中首拼/全拼为空（或含数字名称需纠正）的记录并自动生成。确认执行？`,
    onOk: async () => {
      syncing.value = true;
      try {
        const res = await syncTcmDictPinyin(props.dictType);
        message.success(
          `同步完成：更新 ${Number(res?.updated || 0)} 条，跳过 ${Number(res?.skipped || 0)} 条`,
        );
        gridApi.query();
      } finally {
        syncing.value = false;
      }
    },
  });
}
</script>
<template>
  <Page auto-content-height :title="pageTitle">
    <FormModal :title="`${isUpdate ? '编辑' : '新增'}${pageTitle}`">
      <Form />
    </FormModal>
    <Grid>
      <template #toolbar-actions>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              onClick: () => showModal({}, false),
            },
            {
              label: '批量删除',
              danger: true,
              ifShow: () => hasTopTableDropDownActions,
              popConfirm: {
                title: '确认删除所选？',
                confirm: () => {
                  const ids = gridApi.grid
                    .getCheckboxRecords()
                    .map((r: any) => r.id);
                  handleDelete(ids);
                },
              },
            },
          ]"
        />
        <Button class="ml-2" :loading="syncing" @click="handleSyncPinyin">
          同步拼音
        </Button>
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            { label: '编辑', onClick: () => showModal(row, true) },
            {
              label: '删除',
              danger: true,
              popConfirm: {
                title: '确认删除？',
                confirm: () => handleDelete([row.id]),
              },
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
