<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>通知配置</span>
        </div>
      </template>

      <el-alert
        title="本页面仅做配置预留，实际的企业微信消息推送由外部对接系统完成。本系统读取配置后，在触发通知事件时输出待发送内容和接收人信息。"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      />

      <el-form :model="form" label-width="120px" style="max-width: 600px;">
        <el-divider content-position="left">企业微信配置</el-divider>
        <el-form-item label="CorpID">
          <el-input v-model="form.corpId" placeholder="企业微信 CorpID" />
        </el-form-item>
        <el-form-item label="AgentID">
          <el-input v-model="form.agentId" placeholder="企业微信应用 AgentID" />
        </el-form-item>
        <el-form-item label="Secret">
          <el-input v-model="form.secret" type="password" placeholder="企业微信应用 Secret" show-password />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="form.enabled"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>

      <div style="margin-top: 20px; padding-left: 120px;">
        <el-button type="primary" :loading="loading" @click="handleSave">保存配置</el-button>
        <el-button @click="loadConfig">重置</el-button>
      </div>

      <el-card style="margin-top: 30px;" shadow="never">
        <template #header>
          <span>对接说明</span>
        </template>
        <div class="doc-block">
          <p><strong>1. 配置来源</strong></p>
          <p>本系统将企业微信配置保存在 <code>sys_notification_config</code> 表中，对接后端可调用 <code>GET /system/notification-config/wecom</code> 读取。</p>
          <p><strong>2. 接收人映射</strong></p>
          <p>企业微信账号可在「用户管理」或「审批角色」中为每个账号绑定。</p>
          <p><strong>3. 事件触发点</strong></p>
          <p>本系统会在以下事件发生时通过日志输出待通知内容，对接方可订阅事件或轮询待发送记录：</p>
          <ul>
            <li>待办分配（TaskAssignedEvent）</li>
            <li>审批完成（TaskCompletedEvent）</li>
            <li>流程结束（ProcessCompletedEvent）</li>
          </ul>
          <p><strong>4. 企微 API</strong></p>
          <p>对接后端需自行获取 access_token，并调用企微消息推送 API：<code>POST https://qyapi.weixin.qq.com/cgi-bin/message/send</code>。</p>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getWeComConfig, saveWeComConfig, type WeComConfig } from '@/api/system/notification-config'

const loading = ref(false)
const form = reactive<WeComConfig>({
  corpId: '',
  agentId: '',
  secret: '',
  enabled: 0
})

async function loadConfig() {
  try {
    const res = await getWeComConfig()
    Object.assign(form, {
      corpId: res.corpId || '',
      agentId: res.agentId || '',
      secret: res.secret || '',
      enabled: res.enabled ?? 0
    })
  } catch {
    // ignore
  }
}

async function handleSave() {
  loading.value = true
  try {
    await saveWeComConfig(form)
    ElMessage.success('保存成功')
  } finally {
    loading.value = false
  }
}

onMounted(loadConfig)
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.doc-block {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
}
.doc-block p {
  margin: 10px 0;
}
.doc-block ul {
  margin: 5px 0;
  padding-left: 20px;
}
.doc-block code {
  background: #f4f4f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}
</style>
