<template>
  <div class="comments-page">
    <a-card class="mb-4">
      <template #title>预设评语</template>
      <template #extra>
        <a-button type="primary" @click="handleAdd">
          <template #icon><PlusOutlined /></template>
          添加评语
        </a-button>
      </template>
    </a-card>

    <!-- 搜索表单 -->
    <a-form
      :model="searchParams"
      layout="inline"
      class="search-form"
      @finish="handleSearch"
    >
      <a-form-item label="评语内容">
        <a-input
          v-model:value="searchParams.content"
          placeholder="请输入评语内容"
          allow-clear
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item label="评语类型">
        <a-select
          v-model:value="searchParams.type"
          placeholder="请选择类型"
          allow-clear
          style="width: 120px"
        >
          <a-select-option value="positive">正面评价</a-select-option>
          <a-select-option value="negative">改进建议</a-select-option>
          <a-select-option value="neutral">中性评价</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">
          <template #icon><SearchOutlined /></template>
          搜索
        </a-button>
        <a-button style="margin-left: 8px" @click="handleReset">
          <template #icon><ReloadOutlined /></template>
          重置
        </a-button>
      </a-form-item>
    </a-form>

    <!-- 数据表格 -->
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      row-key="id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'type'">
          <a-tag :color="getTypeColor(record.type)">
            {{ getTypeLabel(record.type) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-popconfirm
              title="确定要删除这条评语吗？"
              @confirm="handleDelete(record.id)"
            >
              <a-button type="link" danger size="small">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>

    <!-- 添加/编辑评语弹窗 -->
    <a-modal
      v-model:open="modalVisible"
      :title="editingId ? '编辑评语' : '添加评语'"
      @ok="handleSave"
      @cancel="modalVisible = false"
    >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical"
      >
        <a-form-item label="评语类型" name="type">
          <a-select v-model:value="formData.type" placeholder="请选择类型">
            <a-select-option value="positive">正面评价</a-select-option>
            <a-select-option value="negative">改进建议</a-select-option>
            <a-select-option value="neutral">中性评价</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="评语内容" name="content">
          <a-textarea
            v-model:value="formData.content"
            placeholder="请输入评语内容"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { message } from "ant-design-vue"
import type { FormInstance, TablePaginationConfig } from "ant-design-vue"
import {
  PlusOutlined,
  SearchOutlined,
  ReloadOutlined,
} from "@ant-design/icons-vue"

// 搜索参数
const searchParams = reactive({
  content: "",
  type: undefined as string | undefined,
})

// 表格数据
const loading = ref(false)
const dataSource = ref<any[]>([])
const pagination = reactive<TablePaginationConfig>({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
})

// 表格列定义
const columns = [
  {
    title: "序号",
    key: "index",
    width: 60,
    customRender: ({ index }: { index: number }) => index + 1,
  },
  {
    title: "评语类型",
    key: "type",
    dataIndex: "type",
    width: 120,
  },
  {
    title: "评语内容",
    key: "content",
    dataIndex: "content",
    ellipsis: true,
  },
  {
    title: "使用次数",
    key: "useCount",
    dataIndex: "useCount",
    width: 100,
  },
  {
    title: "创建时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 180,
  },
  {
    title: "操作",
    key: "action",
    width: 150,
    fixed: "right" as const,
  },
]

// 获取类型颜色
const getTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    positive: "success",
    negative: "warning",
    neutral: "default",
  }
  return colors[type] || "default"
}

// 获取类型标签
const getTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    positive: "正面评价",
    negative: "改进建议",
    neutral: "中性评价",
  }
  return labels[type] || type
}

// 弹窗相关
const modalVisible = ref(false)
const editingId = ref<number | null>(null)
const formRef = ref<FormInstance>()
const formData = reactive({
  type: undefined as string | undefined,
  content: "",
})

const formRules = {
  type: [{ required: true, message: "请选择评语类型" }],
  content: [{ required: true, message: "请输入评语内容" }],
}

// 加载数据
const fetchList = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取数据
    dataSource.value = []
    pagination.total = 0
  } catch (error) {
    console.error("获取数据失败", error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchList()
}

// 重置
const handleReset = () => {
  searchParams.content = ""
  searchParams.type = undefined
  pagination.current = 1
  fetchList()
}

// 表格变化
const handleTableChange = (pag: TablePaginationConfig) => {
  pagination.current = pag.current || 1
  pagination.pageSize = pag.pageSize || 10
  fetchList()
}

// 添加
const handleAdd = () => {
  editingId.value = null
  formData.type = undefined
  formData.content = ""
  modalVisible.value = true
}

// 编辑
const handleEdit = (record: any) => {
  editingId.value = record.id
  formData.type = record.type
  formData.content = record.content
  modalVisible.value = true
}

// 保存
const handleSave = async () => {
  try {
    await formRef.value?.validate()
    // TODO: 调用API保存数据
    message.success(editingId.value ? "更新成功" : "添加成功")
    modalVisible.value = false
    fetchList()
  } catch (error: any) {
    if (error?.errorFields) return
    message.error("操作失败")
  }
}

// 删除
const handleDelete = async (id: number) => {
  try {
    // TODO: 调用API删除数据
    message.success("删除成功")
    fetchList()
  } catch (error) {
    message.error("删除失败")
  }
}

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

<style scoped>
.comments-page {
  padding: 0;
}

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

.mb-4 {
  margin-bottom: 16px;
}
</style>
