<template>
  <div class="page">
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="投诉类型">
          <el-select v-model="searchForm.type" clearable>
            <el-option label="门店服务态度差" value="门店服务态度差" />
            <el-option label="车辆配置/质量问题" value="车辆配置/质量问题" />
            <el-option label="费用/分成问题" value="费用/分成问题" />
            <el-option label="订单分配不公" value="订单分配不公" />
            <el-option label="门店管理问题" value="门店管理问题" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable>
            <el-option label="待处理" value="待处理" />
            <el-option label="处理中" value="处理中" />
            <el-option label="已解决" value="已解决" />
            <el-option label="已关闭" value="已关闭" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="tableData" border stripe>
        <el-table-column prop="complaintId" label="投诉编号" width="140" />
        <el-table-column label="客户" width="100">
          <template #default="{ row }">{{ row.customer?.name || '-' }}</template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="content" label="内容" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="处理人" width="100" />
        <el-table-column prop="createdAt" label="创建时间" width="120">
          <template #default="{ row }">{{ formatDate(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="handleEdit(row)">处理</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type">
            <el-option label="门店服务态度差" value="门店服务态度差" />
            <el-option label="车辆配置/质量问题" value="车辆配置/质量问题" />
            <el-option label="费用/分成问题" value="费用/分成问题" />
            <el-option label="订单分配不公" value="订单分配不公" />
            <el-option label="门店管理问题" value="门店管理问题" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" type="textarea" rows="3" />
        </el-form-item>
        <el-form-item label="处理人">
          <el-input v-model="form.handler" />
        </el-form-item>
        <el-form-item label="回复">
          <el-input v-model="form.response" type="textarea" rows="2" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option label="待处理" value="待处理" />
            <el-option label="处理中" value="处理中" />
            <el-option label="已解决" value="已解决" />
            <el-option label="已关闭" value="已关闭" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../utils/api'

const searchForm = ref({ type: '', status: '' })
const tableData = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('添加投诉')
const formRef = ref(null)
const form = ref({ _id: '', type: '', content: '', handler: '', response: '', status: '待处理' })
const rules = { type: [{ required: true, message: '请选择类型', trigger: 'change' }], content: [{ required: true, message: '请输入内容', trigger: 'blur' }] }

const fetchData = async () => {
  const res = await api.get('/complaints')
  if (res.data.success) tableData.value = res.data.data
}
const handleSearch = () => {
  let data = [...tableData.value]
  if (searchForm.value.type) data = data.filter(c => c.type === searchForm.value.type)
  if (searchForm.value.status) data = data.filter(c => c.status === searchForm.value.status)
  tableData.value = data
}
const handleReset = () => { searchForm.value = { type: '', status: '' }; fetchData() }
const handleAdd = () => { dialogTitle.value = '添加投诉'; form.value = { _id: '', type: '', content: '', handler: '', response: '', status: '待处理' }; dialogVisible.value = true }
const handleEdit = (row) => { dialogTitle.value = '处理投诉'; form.value = { ...row }; dialogVisible.value = true }
const handleSubmit = async () => {
  await formRef.value.validate()
  if (form.value._id) {
    await api.put(`/complaints/${form.value._id}`, form.value)
    ElMessage.success('处理成功')
  } else {
    await api.post('/complaints', form.value)
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false; fetchData()
}
const handleDelete = async (row) => {
  await ElMessageBox.confirm('确定删除?', '提示', { type: 'warning' })
  await api.delete(`/complaints/${row._id}`)
  ElMessage.success('删除成功'); fetchData()
}
const getStatusType = (status) => ({ '待处理': 'danger', '处理中': 'warning', '已解决': 'success', '已关闭': 'info' }[status] || 'info')
const formatDate = (d) => d ? new Date(d).toLocaleDateString('zh-CN') : '-'
onMounted(() => { fetchData() })
</script>

<style scoped>
.search-card { margin-bottom: 20px; }
.toolbar { margin-bottom: 20px; }
</style>
