<template>
  <div class="app-container">
    <el-card class="box-card border-none" shadow="never">
      <!-- 1. 顶部操作栏 -->
      <div class="header-toolbar">
         <div class="header-left">
           <div class="page-title">报名列表</div>
           <div class="search-box">
             <el-input
               v-model="queryParams.kwd"
               placeholder="请输入"
               clearable
               @keyup.enter="handleQuery"
               style="width: 250px"
             />
             <el-button type="primary" class="search-btn" @click="handleQuery">
               <el-icon><i-ep-search /></el-icon>
             </el-button>
           </div>
         </div>
         <div class="header-right">
           <el-button type="primary" plain @click="handleExport">导出列表</el-button>
         </div>
      </div>

      <!-- 2. 数据表格 -->
      <el-table v-loading="loading" :data="applicantList" style="width: 100%" class="mt20">
        <el-table-column label="姓名" align="left" min-width="150">
          <template #default="scope">
            <el-link type="primary" :underline="false">{{ scope.row.userName }}</el-link>
          </template>
        </el-table-column>
        
        <el-table-column label="性别" align="center" prop="sex" width="100" />
        
        <el-table-column label="手机号" align="center" prop="phonenumber" width="180" />
        
        <el-table-column label="状态" align="center" width="150">
          <template #default="scope">
            <div class="status-cell">
              <span class="status-dot" :class="getStatusClass(scope.row.status)"></span>
              <span class="status-text">{{ scope.row.status }}</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="测评时间" align="center" prop="applyTime" width="200" />
        
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template #default="scope">
            <el-link type="primary" :underline="false" @click="handleDetail(scope.row)">测评详情</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 3. 分页 -->
      <div class="pagination-container">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const assessmentId = route.query.assessmentId;

const loading = ref(false);
const total = ref(243);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  kwd: ''
});

// 模拟数据
const applicantList = ref([
  {
    userName: '小张小张自有主张',
    sex: '男',
    phonenumber: '18438573743',
    status: '通过',
    applyTime: '2025-03-21 10:27:56'
  },
  {
    userName: '小张小张自有主张',
    sex: '男',
    phonenumber: '18438573743',
    status: '未通过',
    applyTime: '2025-03-21 10:27:56'
  },
  {
    userName: '小张小张自有主张',
    sex: '男',
    phonenumber: '18438573743',
    status: '待评分',
    applyTime: '2025-03-21 10:27:56'
  }
]);

const getStatusClass = (status: string) => {
  if (status === '通过') return 'dot-success';
  if (status === '未通过') return 'dot-danger';
  if (status === '待评分') return 'dot-warning';
  return 'dot-info';
};

const getList = () => {
  // 调用 API 获取数据，例如：listApplicants(queryParams)
};

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

const handleExport = () => {
  // 导出逻辑
};

const handleDetail = (row: any) => {
  router.push(`/system/assessment/report?id=${row.id || 'current-id'}`);
};

getList();
</script>

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

.box-card {
  background-color: #fff;
  border-radius: 8px;
  min-height: 100%;
}

.header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  
  :deep(.el-input__wrapper) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 8px 15px;
}

/* 状态圆点样式 */
.status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.dot-success { background-color: #52c41a; }
.dot-danger { background-color: #ff4d4f; }
.dot-warning { background-color: #faad14; }
.dot-info { background-color: #bfbfbf; }

.status-text {
  font-size: 14px;
  color: #4e5969;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.mt20 { margin-top: 20px; }
.border-none { border: none !important; }
</style>
