<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.ticketId" placeholder="搜索反馈ID" style="width: 200px" />
        <el-input v-model="queryParams.userId" placeholder="搜索用户ID" style="width: 200px" />
        <el-select v-model="queryParams.channel" placeholder="反馈渠道 全部" style="width: 150px">
          <el-option label="iPhone端" value="iPhone" />
          <el-option label="Android端" value="Android" />
          <el-option label="网页端" value="Web" />
        </el-select>
        <el-select v-model="queryParams.category" placeholder="问题分类 全部" style="width: 150px">
          <el-option label="功能建议" value="suggestion" />
          <el-option label="系统故障" value="bug" />
        </el-select>
        <el-date-picker
          v-model="queryParams.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="创建时间"
          end-placeholder="创建时间"
          style="width: 240px"
        />
        <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="ticketId" label="反馈ID" width="120" />
        <el-table-column label="用户ID" width="150">
          <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)">{{ 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">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="反馈渠道" width="120" />
        <el-table-column prop="category" label="问题分类" width="150" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="finishTime" label="完结时间" width="180" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="scope">
            <div class="flex gap-2">
              <el-button 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 } from 'vue';
import { useRouter } from 'vue-router';

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

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  ticketId: '',
  userId: '',
  channel: '',
  category: '',
  dateRange: [],
});

const tableData = ref([
  {
    ticketId: '20991216194',
    userName: '用户张三',
    userId: 'ID18451512',
    content: '这是一个反馈内容，关于这个反馈工单的文字内容，这是一个反馈内容，关于这个反馈工单的文字内容',
    status: '待处理',
    channel: 'iPhone端',
    category: '这是问题分类1',
    createTime: '2099-10-22 17:07:25',
    finishTime: '-',
  },
  {
    ticketId: '20991216193',
    userName: '用户11879458',
    userId: '',
    content: '这是什么？这是一个内容，这是一个反馈内容，这是什么？这是一个内容，这是一个反馈内容',
    status: '处理中',
    channel: 'iPhone端',
    category: '这是问题分类2',
    createTime: '2099-10-22 17:07:25',
    finishTime: '-',
  },
  {
    ticketId: '20991216192',
    userName: '用户29415751',
    userId: '',
    content: '这是什么内容，这是关于这个反馈工单的文字内容，这是什么内容，这是关于这个反馈工单的文字内容',
    status: '处理中',
    channel: 'Android端',
    category: '这是问题分类3',
    createTime: '2099-10-22 17:07:25',
    finishTime: '-',
  },
  {
    ticketId: '20991216189',
    userName: '用户11879458',
    userId: '',
    content: '这是一个反馈内容，关于这个反馈工单的文字内容，这是一个反馈内容，关于这个反馈工单的文字内容',
    status: '已完成',
    channel: 'iPhone端',
    category: '这是问题分类1',
    createTime: '2099-10-22 17:07:25',
    finishTime: '2099-10-24 14:25:07',
  },
  {
    ticketId: '20991216185',
    userName: '用户16284741',
    userId: '',
    content: '这是一个反馈内容，关于这个反馈工单的真实内容，这是一个反馈内容，关于这个反馈工单的真实内容',
    status: '已废弃',
    channel: 'iPhone端',
    category: '这是问题分类5',
    createTime: '2099-10-22 17:07:25',
    finishTime: '-',
  },
]);

const getStatusType = (status: string) => {
  switch (status) {
    case '待处理': return 'danger';
    case '处理中': return 'primary';
    case '已完成': return 'success';
    case '已废弃': return 'info';
    default: return '';
  }
};

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

const getList = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 300);
};

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

const handleStudentDetail = (row: any) => {
  router.push({ path: '/system/agent/student-detail', query: { userId: row.userId } });
};

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

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>
