<template>
  <div class="app-container ticket-page">
    <div class="bg-white p-4 rounded">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <el-tab-pane label="全部状态" name="all" />
        <el-tab-pane label="待处理" name="pending" />
        <el-tab-pane label="处理中" name="processing" />
        <el-tab-pane label="已完成" name="completed" />
        <el-tab-pane label="已废弃" name="abandoned" />
      </el-tabs>

      <div class="filter-bar mt-4 flex flex-wrap gap-4 items-center">
        <el-input v-model="queryParams.id" placeholder="搜索反馈ID" style="width: 200px" @keyup.enter="handleQuery" />
        <el-input v-model="queryParams.userId" placeholder="搜索用户ID" style="width: 200px" @keyup.enter="handleQuery" />
        <el-select v-model="queryParams.source" placeholder="反馈渠道 全部" clearable style="width: 150px" @change="handleQuery">
          <el-option label="小程序" value="小程序" />
          <el-option label="商家" value="商家" />
        </el-select>
        <el-select v-model="queryParams.category" placeholder="问题分类 全部" clearable style="width: 150px" @change="handleQuery">
          <el-option label="功能建议" value="suggestion" />
          <el-option label="系统故障" value="bug" />
        </el-select>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 240px"
          @change="handleQuery"
        />
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        header-cell-class-name="custom-header"
        class="custom-table mt-4"
      >
        <el-table-column prop="id" label="反馈ID" width="120" />
        <el-table-column label="用户信息" width="200">
          <template #default="scope">
            <div class="user-info">
              <div class="user-name text-blue-500 cursor-pointer" @click="handleStudentDetail(scope.row)">{{ scope.row.userName }}</div>
              <div class="user-id text-gray-400 text-xs cursor-pointer" @click="handleStudentDetail(scope.row)">ID: {{ scope.row.userId }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容" min-width="250" show-overflow-tooltip />
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" effect="light">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="反馈渠道" width="120" />
        <el-table-column prop="category" label="问题分类" width="150" />
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="scope">
            <div class="flex gap-2">
              <el-button v-if="scope.row.status === 'pending'" link type="primary" @click="handleProcess(scope.row)">处理</el-button>
              <el-button link type="primary" @click="handleDetail(scope.row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper mt-4 flex justify-between items-center">
        <span class="total-text text-gray-500 text-sm">共 {{ total }} 条</span>
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          background
          layout="prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { listTicket } from '@/api/chat/ticket';
import { parseTime } from '@/utils/ruoyi';

const router = useRouter();
const activeTab = ref('all');
const loading = ref(false);
const total = ref(200);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  id: '',
  userId: '',
  source: '',
  category: '',
  status: '',
  beginTime: '',
  endTime: ''
});

const dateRange = ref([]);

const tableData = ref([]);

const getStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'danger';
    case 'processing': return 'primary';
    case 'completed': return 'success';
    case 'abandoned': return 'info';
    default: return 'info';
  }
};

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'pending': return '待处理';
    case 'processing': return '处理中';
    case 'completed': return '已完成';
    case 'abandoned': return '已废弃';
    default: return status;
  }
};

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const getList = () => {
  loading.value = true;
  const params = { ...queryParams };
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginTime = dateRange.value[0];
    params.endTime = dateRange.value[1];
  }
  if (activeTab.value !== 'all') {
    params.status = activeTab.value;
  } else {
    params.status = '';
  }

  listTicket(params).then(response => {
    tableData.value = response.rows;
    total.value = response.total;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

watch(activeTab, () => {
  handleQuery();
});

onMounted(() => {
  getList();
});

const handleSizeChange = () => getList();
const handleCurrentChange = () => getList();

const handleStudentDetail = (row: any) => {
  router.push({ name: 'StudentDetail', query: { userId: row.userId } });
};

const handleDetail = (row: any) => {
  router.push({ path: '/system/agent/detail', query: { id: row.id } });
};

const handleProcess = (row: any) => {
  handleDetail(row);
};
</script>

<style scoped lang="scss">
.ticket-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .custom-tabs {
    :deep(.el-tabs__nav-wrap::after) {
      display: none;
    }
  }

  :deep(.custom-header th) {
    background-color: #f7f8fa !important;
    color: #4e5969;
    font-weight: 500;
    padding: 12px 0;
    border-bottom: none !important;
  }

  .custom-table {
    :deep(.el-table__inner-wrapper::before) {
      display: none;
    }
  }
}
</style>
