<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

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

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

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

import { deletePatientCallLogDict } from './api';
import DictModal from './components/modal.vue';
import { formOptions as searchFormOptions } from './config/search';
import { gridOptions } from './config/table';

const hasTopTableDropDownActions = ref(false);

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

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: searchFormOptions,
  gridOptions,
  gridEvents,
});

const [DictFormModal, dictFormModalApi] = useVbenModal({
  connectedComponent: DictModal,
});

const showDictModal = (data = {}, isUpdate = false) => {
  dictFormModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  dictFormModalApi.open();
};

const deleteDictApi = (row: any) => {
  let ids: (string | number)[] = [];
  if (row) {
    ids.push(row);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item: any) => item.id);
  }
  deletePatientCallLogDict({ ids }).then(() => {
    message.success('删除成功!');
    gridApi.query();
  });
};
</script>

<template>
  <Page auto-content-height title="回访字典管理">
    <DictFormModal />

    <div class="p-4">
      <TableAction
        :actions="[
          {
            label: '新增',
            type: 'primary',
            icon: 'ant-design:plus-outlined',
            onClick: () => showDictModal({}, false),
          },
        ]"
      />

      <Grid>
        <template #toolbar-actions>
          <Button
            v-if="hasTopTableDropDownActions"
            danger
            type="primary"
            @click="deleteDictApi()"
          >
            删除
          </Button>
        </template>

        <!-- 颜色列：色块 + hex 直观预览 -->
        <template #color="{ row }">
          <div class="flex items-center gap-2">
            <span
              class="inline-block h-4 w-4 rounded"
              :style="{ background: row.color, border: '1px solid #e5e7eb' }"
            />
            <span>{{ row.color }}</span>
          </div>
        </template>

        <template #action="{ row }">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: () => showDictModal(row, true),
              },
              {
                label: '删除',
                color: 'error',
                popConfirm: {
                  title: '确定要删除该项吗？',
                  onConfirm: () => deleteDictApi(row.id),
                },
              },
            ]"
          />
        </template>
      </Grid>
    </div>
  </Page>
</template>
