<template>
  <div class="admin-wechat-page">
    <a-card :bordered="false">
      <template #title>微信绑定管理</template>
      <a-form :model="query" layout="inline" class="query-form">
        <a-form-item label="用户UUID">
          <a-input v-model="query.user_uuid" allow-clear placeholder="模糊搜索" />
        </a-form-item>
        <a-form-item label="用户名">
          <a-input v-model="query.username" allow-clear placeholder="模糊搜索" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model="query.state" allow-clear style="width: 140px">
            <a-option :value="-1">全部</a-option>
            <a-option :value="0">待扫码</a-option>
            <a-option :value="1">已绑定</a-option>
            <a-option :value="2">已解绑</a-option>
            <a-option :value="3">已过期</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="VIP">
          <a-select v-model="query.vip" allow-clear style="width: 120px">
            <a-option value="">全部</a-option>
            <a-option value="1">VIP</a-option>
            <a-option value="0">非VIP</a-option>
          </a-select>
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">
            <template #icon><icon-search /></template>
            查询
          </a-button>
          <a-button @click="reset">重置</a-button>
        </a-space>
      </a-form>

      <a-table
        row-key="user_uuid"
        :data="rows"
        :loading="loading"
        :pagination="pagination"
        @page-change="page => { query.current = page; loadData() }"
        @page-size-change="size => { query.pagesize = size; query.current = 1; loadData() }"
      >
        <template #columns>
          <a-table-column title="用户" :width="180">
            <template #cell="{ record }">
              <div class="user-cell">
                <strong>{{ record.username || '-' }}</strong>
                <span>{{ record.user_uuid }}</span>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="状态" :width="110">
            <template #cell="{ record }">
              <a-tag :color="statusColor(record.state)">{{ statusText(record.state) }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="微信" :width="90">
            <template #cell="{ record }">{{ record.wechat_last_user_id ? '已识别' : '-' }}</template>
          </a-table-column>
          <a-table-column title="VIP到期" :width="170">
            <template #cell="{ record }">{{ formatTime(record.vip_expire_time) || (record.vip ? '永久' : '-') }}</template>
          </a-table-column>
          <a-table-column title="最近微信消息" :width="170">
            <template #cell="{ record }">{{ formatTime(record.last_user_message_time) || '-' }}</template>
          </a-table-column>
          <a-table-column title="最后轮询" :width="170">
            <template #cell="{ record }">{{ formatTime(record.last_poll_time) || '-' }}</template>
          </a-table-column>
          <a-table-column title="错误" data-index="last_error" ellipsis tooltip />
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { adminListWeixinBindings } from '@/api/aiChat'

const loading = ref(false)
const rows = ref([])
const pagination = reactive({ current: 1, pageSize: 20, total: 0, showTotal: true, showPageSize: true })
const query = reactive({ current: 1, pagesize: 20, user_uuid: '', username: '', state: -1, vip: '' })

const statusText = (state) => ({ 0: '待扫码', 1: '已绑定', 2: '已解绑', 3: '已过期' }[Number(state)] || '未知')
const statusColor = (state) => ({ 0: 'orange', 1: 'green', 2: 'gray', 3: 'red' }[Number(state)] || 'gray')
const formatTime = (value) => value ? new Date(Number(value)).toLocaleString('zh-CN', { hour12: false }) : ''

const loadData = async () => {
  loading.value = true
  try {
    const res = await adminListWeixinBindings(query)
    if (!res || res.code !== 0) return Message.error(res?.msg || '加载失败')
    rows.value = res.data || []
    pagination.current = Number(res.pagination?.current || query.current)
    pagination.pageSize = Number(res.pagination?.pagesize || query.pagesize)
    pagination.total = Number(res.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

const reset = () => {
  query.current = 1
  query.pagesize = 20
  query.user_uuid = ''
  query.username = ''
  query.state = -1
  query.vip = ''
  loadData()
}

onMounted(loadData)
</script>

<style scoped lang="less">
.admin-wechat-page {
  padding: 16px;
}

.query-form {
  margin-bottom: 16px;
}

.user-cell {
  display: grid;
  gap: 4px;
}

.user-cell span {
  overflow: hidden;
  color: var(--color-text-3);
  font-size: 12px;
  text-overflow: ellipsis;
}
</style>
