<script lang="ts" setup>
import type { Recordable } from '@vben/types';

import type {
  OnActionClickParams,
  VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { NotificationApi } from '#/api/notification';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { Plus } from '@vben/icons';

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deleteNotification,
  getNotificationDetail,
  getNotificationList,
  updateNotification,
} from '#/api/notification';

import { useColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';

// 表单抽屉
const [FormDrawer, formDrawerApi] = useVbenDrawer({
  connectedComponent: Form,
  destroyOnClose: true,
});

// 表格配置
const columns = useColumns<NotificationApi.NotificationItem>(
  onActionClick,
  (newStatus: 0 | 1, row: NotificationApi.NotificationItem) => {
    return onStatusChange(newStatus, row);
  },
);

function buildNotificationListParams(formValues: Recordable) {
  const params: Recordable = { ...formValues };
  delete params.date_range;

  for (const key of ['title', 'notification_page']) {
    const v = params[key];
    if (v === '' || v === undefined || v === null) {
      delete params[key];
    }
  }

  const statusRaw = params.status;
  if (statusRaw === '' || statusRaw === undefined || statusRaw === null) {
    delete params.status;
  } else {
    const n = Number(String(statusRaw).trim());
    if (n === 0 || n === 1) {
      params.status = n;
    } else {
      delete params.status;
    }
  }

  return params;
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    // 与表单字段 date_range 一致；后端 form 为 start_date / end_date
    fieldMappingTime: [['date_range', ['start_date', 'end_date']]],
    schema: useGridFormSchema(),
    submitOnChange: true,
  },
  gridOptions: {
    columns,
    height: 'auto',
    // 该页不做行内编辑，关闭 source 缓存避免同 key 行数据刷新延迟。
    keepSource: false,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getNotificationList({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...buildNotificationListParams(formValues),
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
    },
    toolbarConfig: {
      custom: true,
      export: false,
      refresh: { code: 'query' },
      search: true,
      zoom: true,
    },
  } as VxeTableGridOptions<NotificationApi.NotificationItem>,
});

// 操作处理函数
function onActionClick(
  e: OnActionClickParams<NotificationApi.NotificationItem>,
) {
  switch (e.code) {
    case 'delete': {
      onDelete(e.row);
      break;
    }
    case 'edit': {
      onEdit(e.row);
      break;
    }
  }
}

/**
 * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
 * @param content 提示内容
 * @param title 提示标题
 */
function confirm(content: string, title: string) {
  return new Promise((reslove, reject) => {
    Modal.confirm({
      content,
      onCancel() {
        reject(new Error('已取消'));
      },
      onOk() {
        reslove(true);
      },
      title,
    });
  });
}

/**
 * 状态开关即将改变
 * @param newStatus 期望改变的状态值
 * @param row 行数据
 * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
 */
async function onStatusChange(
  newStatus: 0 | 1,
  row: NotificationApi.NotificationItem,
) {
  const status: Recordable<string> = {
    1: '启用',
    0: '禁用',
  };
  try {
    await confirm(
      `你要将通知"${row.title}"的状态切换为【${status[newStatus]}】吗？`,
      '切换状态',
    );
    // 列表接口不支持按 id 筛选，必须用详情接口取完整字段再更新
    const fullData = await getNotificationDetail(row.id);
    await updateNotification(row.id, {
      id: row.id,
      status: newStatus,
      title: fullData.title,
      content: fullData.content || '',
      notification_page: fullData.notification_page,
      start_date: fullData.start_date,
      start_time: fullData.start_time,
      end_date: fullData.end_date,
      end_time: fullData.end_time,
    });
    onRefresh();
    return true;
  } catch {
    return false;
  }
}

// 编辑处理
function onEdit(row: NotificationApi.NotificationItem) {
  formDrawerApi.setData(row).open();
}

// 删除处理
function onDelete(row: NotificationApi.NotificationItem) {
  const hideLoading = message.loading({
    content: `正在删除通知：${row.title}`,
    duration: 0,
    key: 'action_process_msg',
  });
  deleteNotification(row.id)
    .then(() => {
      message.success({
        content: `删除通知成功：${row.title}`,
        key: 'action_process_msg',
      });
      onRefresh();
    })
    .catch(() => {
      hideLoading();
    });
}

// 刷新处理
function onRefresh() {
  gridApi.query();
}

// 创建处理
function onCreate() {
  formDrawerApi.setData({}).open();
}
</script>

<template>
  <Page auto-content-height>
    <FormDrawer @success="onRefresh" />
    <Grid table-title="通知列表">
      <template #toolbar-tools>
        <Button type="primary" @click="onCreate">
          <Plus class="size-5" />
          创建通知
        </Button>
      </template>
    </Grid>
  </Page>
</template>
