<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="出站测试" name="outbound">
        <el-form :model="outboundForm" label-width="120px">
          <el-form-item label="目标类型">
            <el-select v-model="outboundForm.targetType" placeholder="选择目标类型">
              <el-option label="会话" value="conversation" />
              <el-option label="个人" value="person" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="outboundForm.targetType === 'conversation'"
            label="会话"
          >
            <el-select v-model="outboundForm.targetValue" placeholder="选择会话">
              <el-option
                v-for="c in conversations"
                :key="c.id"
                :label="c.conversationName || c.id"
                :value="c.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-else label="目标ID">
            <el-input v-model="outboundForm.targetValue" placeholder="person id" />
          </el-form-item>
          <el-form-item label="文本内容">
            <el-input v-model="outboundForm.text" type="textarea" :rows="4" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleOutbound">测试发送</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="入站模拟" name="inbound">
        <el-form :model="inboundForm" label-width="120px">
          <el-form-item label="事件ID">
            <el-input v-model="inboundForm.eventId" />
          </el-form-item>
          <el-form-item label="渠道类型">
            <el-input v-model="inboundForm.channelType" />
          </el-form-item>
          <el-form-item label="事件类型">
            <el-input v-model="inboundForm.eventType" />
          </el-form-item>
          <el-form-item label="消息来源">
            <el-input v-model="inboundForm.messageSource" />
          </el-form-item>
          <el-form-item label="会话ID">
            <el-input v-model="inboundForm.conversationId" />
          </el-form-item>
          <el-form-item label="文本内容">
            <el-input v-model="inboundForm.text" type="textarea" :rows="4" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleInbound">模拟入站</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { testSendMessage } from '@/api/send'
import { receiveMessage } from '@/api/inbound'
import { listConversations } from '@/api/channel'

const activeTab = ref('outbound')
const conversations = ref<any[]>([])

const outboundForm = reactive({
  targetType: 'conversation',
  targetValue: undefined as number | string | undefined,
  text: '',
})

const inboundForm = reactive({
  eventId: '',
  channelType: 'wecom',
  eventType: 'message',
  messageSource: 'realtime',
  conversationId: '',
  text: '',
})

watch(
  () => outboundForm.targetType,
  () => {
    outboundForm.targetValue = undefined
  }
)

async function loadConversations() {
  try {
    const res: any = await listConversations()
    conversations.value = res.data || []
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

async function handleOutbound() {
  if (!outboundForm.targetValue) {
    ElMessage.warning('请选择或输入目标')
    return
  }
  try {
    await testSendMessage({
      targetType: outboundForm.targetType,
      targetValue:
        outboundForm.targetType === 'conversation'
          ? Number(outboundForm.targetValue)
          : outboundForm.targetValue,
      contentType: 'text',
      content: { text: outboundForm.text },
      channelStrategy: { channel_type: 'wecom', strategy: 'primary' },
    })
    ElMessage.success('发送成功')
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

async function handleInbound() {
  if (!inboundForm.eventId || !inboundForm.conversationId) {
    ElMessage.warning('请填写事件ID和会话ID')
    return
  }
  try {
    await receiveMessage({
      eventId: inboundForm.eventId,
      channelType: inboundForm.channelType,
      eventType: inboundForm.eventType,
      messageSource: inboundForm.messageSource,
      conversationId: Number(inboundForm.conversationId),
      content: { text: inboundForm.text },
      rawPayload: {},
      businessContext: {},
    })
    ElMessage.success('模拟入站成功')
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

onMounted(() => {
  loadConversations()
})
</script>
