<template>
  <div class="page-content">
    <!-- 搜索和操作区 -->
    <ElRow :gutter="12">
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElInput v-model="searchQuery" placeholder="通知标题/内容" clearable />
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElSelect v-model="statusFilter" placeholder="状态筛选" clearable style="width: 100%">
          <ElOption label="全部" value="" />
          <ElOption label="待发送" value="pending" />
          <ElOption label="发送中" value="sending" />
          <ElOption label="已发送" value="sent" />
          <ElOption label="发送失败" value="failed" />
        </ElSelect>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElSelect v-model="typeFilter" placeholder="通知类型" clearable style="width: 100%">
          <ElOption label="全部" value="" />
          <ElOption label="卡片更换" value="replace" />
          <ElOption label="卡片激活" value="activate" />
          <ElOption label="卡片停用" value="deactivate" />
          <ElOption label="套餐变更" value="plan_change" />
        </ElSelect>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
        <ElButton v-ripple @click="handleSearch">搜索</ElButton>
        <ElButton v-ripple type="primary" @click="showDialog('add')">新增通知</ElButton>
      </ElCol>
    </ElRow>

    <!-- 通知列表 -->
    <ArtTable :data="filteredData" index style="margin-top: 20px">
      <template #default>
        <ElTableColumn type="selection" width="55" />
        <ElTableColumn label="通知标题" prop="title" min-width="200" show-overflow-tooltip />
        <ElTableColumn label="通知类型" prop="type" width="120">
          <template #default="scope">
            <ElTag :type="getTypeTagType(scope.row.type)">
              {{ getTypeText(scope.row.type) }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="目标用户数" prop="targetCount" width="120">
          <template #default="scope">
            <span style="color: var(--el-color-primary)">{{ scope.row.targetCount }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="已发送" prop="sentCount" width="100">
          <template #default="scope">
            <span style="color: var(--el-color-success)">{{ scope.row.sentCount }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="失败数" prop="failCount" width="100">
          <template #default="scope">
            <span style="color: var(--el-color-danger)">{{ scope.row.failCount }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="发送进度" prop="progress" width="150">
          <template #default="scope">
            <ElProgress
              :percentage="scope.row.progress"
              :status="
                scope.row.status === 'failed'
                  ? 'exception'
                  : scope.row.status === 'sent'
                    ? 'success'
                    : undefined
              "
            />
          </template>
        </ElTableColumn>
        <ElTableColumn label="状态" prop="status" width="120">
          <template #default="scope">
            <ElTag v-if="scope.row.status === 'pending'" type="info">待发送</ElTag>
            <ElTag v-else-if="scope.row.status === 'sending'" type="warning">
              <el-icon class="is-loading"><Loading /></el-icon>
              发送中
            </ElTag>
            <ElTag v-else-if="scope.row.status === 'sent'" type="success">已发送</ElTag>
            <ElTag v-else-if="scope.row.status === 'failed'" type="danger">发送失败</ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="发送方式" prop="sendMethod" width="120">
          <template #default="scope">
            <div style="display: flex; gap: 4px">
              <ElTag v-for="method in scope.row.sendMethods" :key="method" size="small">
                {{ getSendMethodText(method) }}
              </ElTag>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="创建时间" prop="createTime" width="180" />
        <ElTableColumn label="发送时间" prop="sendTime" width="180">
          <template #default="scope">
            {{ scope.row.sendTime || '-' }}
          </template>
        </ElTableColumn>
        <ElTableColumn fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-button link :icon="View" @click="viewDetail(scope.row)">查看详情</el-button>
            <el-button
              v-if="scope.row.status === 'pending'"
              link
              type="primary"
              :icon="Promotion"
              @click="handleSend(scope.row)"
            >
              立即发送
            </el-button>
            <el-button
              v-if="scope.row.status === 'pending'"
              link
              @click="showDialog('edit', scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.status === 'pending' || scope.row.status === 'failed'"
              link
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </ElTableColumn>
      </template>
    </ArtTable>

    <!-- 新增/编辑通知对话框 -->
    <ElDialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增换卡通知' : '编辑换卡通知'"
      width="700px"
      align-center
    >
      <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
        <ElFormItem label="通知标题" prop="title">
          <ElInput
            v-model="form.title"
            placeholder="请输入通知标题"
            maxlength="50"
            show-word-limit
          />
        </ElFormItem>

        <ElFormItem label="通知类型" prop="type">
          <ElRadioGroup v-model="form.type">
            <ElRadio value="replace">卡片更换</ElRadio>
            <ElRadio value="activate">卡片激活</ElRadio>
            <ElRadio value="deactivate">卡片停用</ElRadio>
            <ElRadio value="plan_change">套餐变更</ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem label="通知内容" prop="content">
          <ElInput
            v-model="form.content"
            type="textarea"
            :rows="4"
            placeholder="请输入通知内容"
            maxlength="500"
            show-word-limit
          />
        </ElFormItem>

        <ElFormItem label="目标用户" prop="targetType">
          <ElRadioGroup v-model="form.targetType">
            <ElRadio value="all">全部用户</ElRadio>
            <ElRadio value="specific">指定用户</ElRadio>
            <ElRadio value="batch">批量导入</ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem v-if="form.targetType === 'specific'" label="用户列表">
          <ElSelect
            v-model="form.targetUsers"
            multiple
            placeholder="请选择目标用户"
            style="width: 100%"
          >
            <ElOption label="张三 (13800138000)" value="user1" />
            <ElOption label="李四 (13900139000)" value="user2" />
            <ElOption label="王五 (13700137000)" value="user3" />
          </ElSelect>
        </ElFormItem>

        <ElFormItem v-if="form.targetType === 'batch'" label="用户文件">
          <ElUpload
            :action="uploadUrl"
            :limit="1"
            :on-exceed="handleExceed"
            accept=".xlsx,.xls,.txt"
          >
            <ElButton type="primary">选择文件</ElButton>
            <template #tip>
              <div class="el-upload__tip">支持 Excel 或 TXT 格式，每行一个用户手机号</div>
            </template>
          </ElUpload>
        </ElFormItem>

        <ElFormItem label="发送方式" prop="sendMethods">
          <ElCheckboxGroup v-model="form.sendMethods">
            <ElCheckbox value="sms">短信</ElCheckbox>
            <ElCheckbox value="email">邮件</ElCheckbox>
            <ElCheckbox value="app">App推送</ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>

        <ElFormItem label="定时发送">
          <ElSwitch v-model="form.scheduleSend" />
          <span style="margin-left: 8px; color: var(--el-text-color-secondary)">
            {{ form.scheduleSend ? '启用定时发送' : '立即发送' }}
          </span>
        </ElFormItem>

        <ElFormItem v-if="form.scheduleSend" label="发送时间" prop="scheduleTime">
          <ElDatePicker
            v-model="form.scheduleTime"
            type="datetime"
            placeholder="选择发送时间"
            style="width: 100%"
          />
        </ElFormItem>
      </ElForm>

      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="dialogVisible = false">取消</ElButton>
          <ElButton type="primary" @click="handleSubmit(formRef)">
            {{ form.scheduleSend ? '创建定时任务' : '保存' }}
          </ElButton>
        </div>
      </template>
    </ElDialog>

    <!-- 详情对话框 -->
    <ElDialog v-model="detailDialogVisible" title="通知详情" width="800px" align-center>
      <ElDescriptions :column="2" border>
        <ElDescriptionsItem label="通知标题">{{ currentDetail.title }}</ElDescriptionsItem>
        <ElDescriptionsItem label="通知类型">
          <ElTag :type="getTypeTagType(currentDetail.type)">
            {{ getTypeText(currentDetail.type) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="目标用户数">{{ currentDetail.targetCount }}</ElDescriptionsItem>
        <ElDescriptionsItem label="已发送数">
          <span style="color: var(--el-color-success)">{{ currentDetail.sentCount }}</span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="失败数">
          <span style="color: var(--el-color-danger)">{{ currentDetail.failCount }}</span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="发送状态">
          <ElTag v-if="currentDetail.status === 'sent'" type="success">已发送</ElTag>
          <ElTag v-else-if="currentDetail.status === 'sending'" type="warning">发送中</ElTag>
          <ElTag v-else-if="currentDetail.status === 'failed'" type="danger">发送失败</ElTag>
          <ElTag v-else type="info">待发送</ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="发送方式" :span="2">
          <ElTag
            v-for="method in currentDetail.sendMethods"
            :key="method"
            size="small"
            style="margin-right: 4px"
          >
            {{ getSendMethodText(method) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">{{ currentDetail.createTime }}</ElDescriptionsItem>
        <ElDescriptionsItem label="发送时间">{{
          currentDetail.sendTime || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="通知内容" :span="2">
          {{ currentDetail.content }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <template #footer>
        <ElButton @click="detailDialogVisible = false">关闭</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { View, Loading, Promotion } from '@element-plus/icons-vue'
  import type { FormInstance, FormRules, UploadProps } from 'element-plus'

  defineOptions({ name: 'CardChangeNotice' })

  interface Notice {
    id: string
    title: string
    type: 'replace' | 'activate' | 'deactivate' | 'plan_change'
    content: string
    targetCount: number
    sentCount: number
    failCount: number
    progress: number
    status: 'pending' | 'sending' | 'sent' | 'failed'
    sendMethods: string[]
    createTime: string
    sendTime?: string
  }

  const searchQuery = ref('')
  const statusFilter = ref('')
  const typeFilter = ref('')
  const dialogVisible = ref(false)
  const detailDialogVisible = ref(false)
  const dialogType = ref<'add' | 'edit'>('add')
  const formRef = ref<FormInstance>()
  const uploadUrl = ref('/api/batch/upload-users')

  const form = reactive({
    title: '',
    type: 'replace',
    content: '',
    targetType: 'all',
    targetUsers: [] as string[],
    sendMethods: ['sms'],
    scheduleSend: false,
    scheduleTime: null as Date | null
  })

  const rules = reactive<FormRules>({
    title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
    type: [{ required: true, message: '请选择通知类型', trigger: 'change' }],
    content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
    targetType: [{ required: true, message: '请选择目标用户类型', trigger: 'change' }],
    sendMethods: [
      {
        type: 'array',
        required: true,
        message: '请至少选择一种发送方式',
        trigger: 'change'
      }
    ]
  })

  const mockData = ref<Notice[]>([
    {
      id: '1',
      title: 'SIM卡更换通知-2026年1月批次',
      type: 'replace',
      content: '尊敬的用户，您的物联网卡将于近期进行更换，新卡将在3个工作日内寄出，请注意查收。',
      targetCount: 1000,
      sentCount: 980,
      failCount: 20,
      progress: 100,
      status: 'sent',
      sendMethods: ['sms', 'app'],
      createTime: '2026-01-09 09:00:00',
      sendTime: '2026-01-09 10:00:00'
    },
    {
      id: '2',
      title: '卡片激活成功通知',
      type: 'activate',
      content: '恭喜！您的物联网卡已成功激活，现在可以正常使用了。',
      targetCount: 500,
      sentCount: 350,
      failCount: 5,
      progress: 71,
      status: 'sending',
      sendMethods: ['sms', 'email'],
      createTime: '2026-01-09 11:30:00'
    },
    {
      id: '3',
      title: '套餐变更提醒',
      type: 'plan_change',
      content: '您好，您的套餐将于2026年2月1日起变更为新套餐，详情请登录系统查看。',
      targetCount: 800,
      sentCount: 0,
      failCount: 0,
      progress: 0,
      status: 'pending',
      sendMethods: ['sms'],
      createTime: '2026-01-09 14:00:00'
    }
  ])

  const currentDetail = ref<Notice>({
    id: '',
    title: '',
    type: 'replace',
    content: '',
    targetCount: 0,
    sentCount: 0,
    failCount: 0,
    progress: 0,
    status: 'pending',
    sendMethods: [],
    createTime: ''
  })

  const filteredData = computed(() => {
    let data = mockData.value

    if (searchQuery.value) {
      data = data.filter(
        (item) => item.title.includes(searchQuery.value) || item.content.includes(searchQuery.value)
      )
    }

    if (statusFilter.value) {
      data = data.filter((item) => item.status === statusFilter.value)
    }

    if (typeFilter.value) {
      data = data.filter((item) => item.type === typeFilter.value)
    }

    return data
  })

  const getTypeText = (type: string) => {
    const map: Record<string, string> = {
      replace: '卡片更换',
      activate: '卡片激活',
      deactivate: '卡片停用',
      plan_change: '套餐变更'
    }
    return map[type] || '未知'
  }

  const getTypeTagType = (type: string) => {
    const map: Record<string, any> = {
      replace: 'warning',
      activate: 'success',
      deactivate: 'danger',
      plan_change: 'primary'
    }
    return map[type] || ''
  }

  const getSendMethodText = (method: string) => {
    const map: Record<string, string> = {
      sms: '短信',
      email: '邮件',
      app: 'App'
    }
    return map[method] || method
  }

  const handleSearch = () => {}

  const showDialog = (type: 'add' | 'edit', row?: Notice) => {
    dialogType.value = type
    dialogVisible.value = true
    if (type === 'edit' && row) {
      Object.assign(form, {
        title: row.title,
        type: row.type,
        content: row.content,
        targetType: 'all',
        sendMethods: row.sendMethods,
        scheduleSend: false,
        scheduleTime: null
      })
    } else {
      Object.assign(form, {
        title: '',
        type: 'replace',
        content: '',
        targetType: 'all',
        targetUsers: [],
        sendMethods: ['sms'],
        scheduleSend: false,
        scheduleTime: null
      })
    }
  }

  const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
      if (valid) {
        if (dialogType.value === 'add') {
          mockData.value.unshift({
            id: Date.now().toString(),
            title: form.title,
            type: form.type as any,
            content: form.content,
            targetCount: form.targetType === 'all' ? 1000 : form.targetUsers.length,
            sentCount: 0,
            failCount: 0,
            progress: 0,
            status: 'pending',
            sendMethods: form.sendMethods,
            createTime: new Date().toLocaleString('zh-CN')
          })
          ElMessage.success('通知创建成功')
        } else {
          ElMessage.success('通知更新成功')
        }
        dialogVisible.value = false
        formEl.resetFields()
      }
    })
  }

  const handleSend = (row: Notice) => {
    ElMessageBox.confirm(`确定立即发送通知"${row.title}"吗？`, '发送确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      row.status = 'sending'
      ElMessage.success('通知发送中...')

      // 模拟发送进度
      const timer = setInterval(() => {
        if (row.progress < 100) {
          row.progress += 10
          row.sentCount = Math.floor((row.targetCount * row.progress) / 100)
        } else {
          clearInterval(timer)
          row.status = 'sent'
          row.sendTime = new Date().toLocaleString('zh-CN')
          ElMessage.success('通知发送完成')
        }
      }, 500)
    })
  }

  const handleDelete = (row: Notice) => {
    ElMessageBox.confirm('确定删除该通知吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }).then(() => {
      const index = mockData.value.findIndex((item) => item.id === row.id)
      if (index !== -1) mockData.value.splice(index, 1)
      ElMessage.success('删除成功')
    })
  }

  const viewDetail = (row: Notice) => {
    currentDetail.value = { ...row }
    detailDialogVisible.value = true
  }

  const handleExceed: UploadProps['onExceed'] = () => {
    ElMessage.warning('最多只能上传1个文件')
  }
</script>

<style lang="scss" scoped>
  .page-content {
    :deep(.is-loading) {
      margin-right: 4px;
      animation: rotating 2s linear infinite;
    }

    @keyframes rotating {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }
</style>
