<script lang="ts" setup>
/**
 * 群发消息弹窗组件
 *
 * @description 向多个患者群发消息
 *              - 支持编辑消息内容
 *              - 支持定时发送
 * @author 系统
 * @date 2024
 */
import { ref } from 'vue';

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

import {
  Button,
  DatePicker,
  Form,
  FormItem,
  Input,
  message,
  Switch,
} from 'ant-design-vue';
import dayjs from 'dayjs';

import { sendMessageApi } from '../api';

// ==================== 响应式数据 ====================

/**
 * 患者ID列表
 */
const patientIds = ref<number[]>([]);

/**
 * 消息内容
 */
const messageContent = ref('');

/**
 * 是否定时发送
 */
const isScheduled = ref(false);

/**
 * 定时发送时间
 */
const scheduledTime = ref<dayjs.Dayjs | null>(null);

/**
 * 发送中状态
 */
const sending = ref(false);

/**
 * 成功回调函数
 */
let onSuccessCallback: (() => void) | null = null;

// ==================== Modal 配置 ====================

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    resetForm();
    modalApi.close();
  },
  onConfirm: async () => {
    await handleSend();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<{
        patientIds: number[];
        onSuccess?: () => void;
      }>();

      if (data) {
        patientIds.value = data.patientIds;
        if (data.onSuccess) {
          onSuccessCallback = data.onSuccess;
        }
      }
    }
  },
});

// ==================== 方法定义 ====================

/**
 * 发送消息
 */
async function handleSend() {
  // 校验
  if (!messageContent.value.trim()) {
    message.warning('请输入消息内容');
    return;
  }

  if (patientIds.value.length === 0) {
    message.warning('没有选择发送对象');
    return;
  }

  if (isScheduled.value && !scheduledTime.value) {
    message.warning('请选择定时发送时间');
    return;
  }

  sending.value = true;
  modalApi.setState({ confirmLoading: true });

  try {
    // 转换患者ID为逗号分隔的字符串
    const upIds = patientIds.value.join(',');

    // 定时发送时间格式化
    const sendAt = isScheduled.value && scheduledTime.value
      ? scheduledTime.value.format('YYYY-MM-DD HH:mm:ss')
      : undefined;

    await sendMessageApi(messageContent.value, upIds, sendAt);

    message.success(
      isScheduled.value
        ? `消息已设置定时发送，将于 ${sendAt} 发送给 ${patientIds.value.length} 位患者`
        : `消息已发送给 ${patientIds.value.length} 位患者`,
    );

    // 调用成功回调
    if (onSuccessCallback) {
      onSuccessCallback();
    }

    resetForm();
    modalApi.close();
  } catch (error) {
    console.error('发送消息失败:', error);
    message.error('发送消息失败，请重试');
  } finally {
    sending.value = false;
    modalApi.setState({ confirmLoading: false });
  }
}

/**
 * 重置表单
 */
function resetForm() {
  messageContent.value = '';
  isScheduled.value = false;
  scheduledTime.value = null;
}

/**
 * 禁用过去的时间
 * @param current 当前日期
 */
function disabledDate(current: dayjs.Dayjs) {
  return current && current < dayjs().startOf('day');
}

/**
 * 禁用过去的时间（分钟级别）
 */
function disabledTime() {
  const now = dayjs();
  return {
    disabledHours: () => {
      const hours = [];
      for (let i = 0; i < now.hour(); i++) {
        hours.push(i);
      }
      return hours;
    },
  };
}
</script>

<template>
  <Modal class="w-[500px]" title="群发消息">
    <Page>
      <Form layout="vertical">
        <!-- 发送对象提示 -->
        <FormItem>
          <div class="send-info">
            将向 <span class="count">{{ patientIds.length }}</span> 位患者发送消息
          </div>
        </FormItem>

        <!-- 消息内容 -->
        <FormItem label="消息内容" required>
          <Input.TextArea
            v-model:value="messageContent"
            :rows="6"
            :maxlength="500"
            show-count
            placeholder="请输入要发送的消息内容..."
          />
        </FormItem>

        <!-- 定时发送开关 -->
        <FormItem label="定时发送">
          <Switch v-model:checked="isScheduled" />
          <span class="ml-2 text-gray-500">
            {{ isScheduled ? '开启定时发送' : '立即发送' }}
          </span>
        </FormItem>

        <!-- 定时发送时间 -->
        <FormItem v-if="isScheduled" label="发送时间" required>
          <DatePicker
            v-model:value="scheduledTime"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择发送时间"
            :disabled-date="disabledDate"
            class="w-full"
          />
        </FormItem>

        <!-- 提示信息 -->
        <FormItem>
          <div class="tips">
            <p>提示：</p>
            <ul>
              <li>消息将通过微信订阅消息发送给患者</li>
              <li>请确保消息内容符合平台规范</li>
              <li v-if="isScheduled">定时消息将在指定时间自动发送</li>
            </ul>
          </div>
        </FormItem>
      </Form>
    </Page>
  </Modal>
</template>

<style lang="scss" scoped>
.send-info {
  padding: 12px 16px;
  background: #e6f7ff;
  border-radius: 8px;
  font-size: 14px;

  .dark & {
    background: rgba(24, 144, 255, 0.1);
  }

  .count {
    font-size: 18px;
    font-weight: bold;
    color: #1890ff;
  }
}

.tips {
  padding: 12px 16px;
  background: #fffbe6;
  border-radius: 8px;
  font-size: 12px;
  color: #ad8b00;

  .dark & {
    background: rgba(250, 173, 20, 0.1);
    color: #d4b106;
  }

  p {
    font-weight: bold;
    margin-bottom: 8px;
  }

  ul {
    margin: 0;
    padding-left: 20px;

    li {
      margin-bottom: 4px;
    }
  }
}
</style>

