<template>
  <div class="page">
    <div class="page-title"><span class="royal">♛</span> 咨询回复</div>
    <div class="panel" style="padding:12px; margin-bottom: 12px;">
      <el-form :inline="true" :model="q">
        <el-form-item label="状态">
          <el-select v-model="q.status" style="width:140px"><el-option label="未解决" value="open" /><el-option label="已解决" value="resolved" /></el-select>
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="q.kw" placeholder="内容/用户ID" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetch">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="panel" style="padding:0;">
      <el-table :data="rows" size="large" @row-dblclick="openReply">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column prop="message" label="内容" />
        <el-table-column prop="replyContent" label="回复内容" />
        <el-table-column label="状态" width="120">
          <template #default="{row}"><el-tag :type="row.status==='resolved'?'success':'warning'">{{ row.status==='resolved'?'已解决':'未解决' }}</el-tag></template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="{row}">
            <el-button size="small" type="primary" @click="openReply(row)" :disabled="row.status==='resolved'">回复</el-button>
            <el-button size="small" @click="resolve(row)" v-if="row.status!=='resolved'">标记解决</el-button>
            <el-button size="small" v-if="row.replyContent" @click="viewReply(row)">查看回复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="visible" title="回复咨询" width="560">
      <el-form label-width="96px">
        <el-form-item label="回复内容"><el-input v-model="reply" type="textarea" :rows="5" placeholder="请输入回复..." /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="sendReply">发送</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { get, post, put } from '../../api/http'

const q = reactive({ status: 'open', kw: '' })
const rows = ref<any[]>([])
const visible = ref(false)
const current = ref<any>(null)
const reply = ref('')

async function fetch(){
  // 需要后端提供：GET /api/admin/consults?status=&kw=
  const data = await get<any>('/api/admin/consults', { status: q.status, kw: q.kw })
  rows.value = Array.isArray(data?.list) ? data.list : (Array.isArray(data)?data:[])
}
function reset(){ q.status='open'; q.kw=''; fetch() }
function openReply(row: any){ visible.value = true; current.value = row; reply.value='' }
async function sendReply(){ await post(`/api/admin/consults/${current.value.id}/reply`, { content: reply.value }); visible.value=false; await fetch() }
async function resolve(row: any){ await put(`/api/admin/consults/${row.id}/resolve`, {}); row.status = 'resolved' }
function viewReply(row: any){ ElMessageBox.alert(row.replyContent || '无', '已回复内容', { confirmButtonText: '知道了' }) }

onMounted(fetch)
</script>

<style scoped>
.page { position: relative; z-index: 1; }
</style>


