<template>
  <div class="app-container">
    <div class="registration-header">
      <div class="header-left">
        <span class="title">报名列表</span>
      </div>
      <div class="header-right">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入关键词搜索"
          clearable
          style="width: 240px; margin-right: 12px"
          @keyup.enter="handleQuery"
        >
          <template #append>
            <el-button :icon="Search" @click="handleQuery" />
          </template>
        </el-input>
        <el-button type="primary" plain @click="handleExport">导出列表</el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="registrationList" style="width: 100%">
      <el-table-column label="姓名" align="center" prop="studentName" />
      <el-table-column label="性别" align="center" prop="gender">
        <template #default="scope">
          {{ scope.row.gender === '1' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="mobile" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <div class="status-wrapper">
            <span :class="['status-dot', getStatusClass(scope.row.status)]"></span>
            <span>{{ getStatusLabel(scope.row.status) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="测评时间" align="center" prop="assessmentTime" width="180" />
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-button link type="primary" @click="handleDetail(scope.row)">测评详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="AssessmentApplicantList" lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as any;
const route = useRoute();
const router = useRouter();

const loading = ref(false);
const total = ref(0);
const registrationList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  assessmentId: route.query.assessmentId
});

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  // 后续接入真实接口
  // const res = await listRegistration(queryParams.value);
  // registrationList.value = res.rows;
  // total.value = res.total;
  
  // 模拟数据展示
  setTimeout(() => {
    registrationList.value = [
      {
        id: 1,
        studentName: '张三',
        gender: '1',
        mobile: '13800138000',
        status: '1',
        assessmentTime: '2024-03-20 14:30:00'
      },
      {
        id: 2,
        studentName: '李四',
        gender: '2',
        mobile: '13900139000',
        status: '2',
        assessmentTime: '2024-03-20 15:45:00'
      },
      {
        id: 3,
        studentName: '王五',
        gender: '1',
        mobile: '13700137000',
        status: '0',
        assessmentTime: '2024-03-20 16:20:00'
      }
    ] as any;
    total.value = 3;
    loading.value = false;
  }, 500);
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy.download('main/evaluation/registration/export', {
    ...queryParams.value
  }, `registration_${new Date().getTime()}.xlsx`)
};

/** 详情按钮操作 */
const handleDetail = (row: any) => {
  router.push({
    path: '/system/assessment/report',
    query: { id: row.id }
  });
};

/** 获取状态样式类 */
const getStatusClass = (status: string) => {
  switch (status) {
    case '1': return 'status-success'; // 通过
    case '2': return 'status-danger';  // 未通过
    case '0': return 'status-warning'; // 待评分
    default: return '';
  }
};

/** 获取状态文本 */
const getStatusLabel = (status: string) => {
  switch (status) {
    case '1': return '通过';
    case '2': return '未通过';
    case '0': return '待评分';
    default: return '未知';
  }
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.registration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
}

.status-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .status-success {
    background-color: #67c23a;
  }

  .status-danger {
    background-color: #f56c6c;
  }

  .status-warning {
    background-color: #e6a23c;
  }
}
</style>
