<template>
  <div class="app-container">
    <el-card shadow="never" class="applicant-list-card">
      <div class="header-section">
        <div class="page-title">报名列表</div>
        <div class="ops-row">
          <div class="search-box">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入"
              style="width: 300px"
              clearable
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button icon="Search" type="primary" class="search-btn" @click="handleQuery" />
              </template>
            </el-input>
          </div>
          <div class="right-buttons">
            <el-button type="primary" class="blue-btn" @click="handleShare">数据分享</el-button>
            <el-button type="primary" class="blue-btn">导出列表</el-button>
          </div>
        </div>
      </div>

      <div class="table-content">
        <el-table
          v-loading="loading"
          :data="applicantList"
          style="width: 100%"
          :header-cell-style="{ backgroundColor: '#f8f9fb', color: '#666', fontWeight: 'bold' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="姓名" align="left" min-width="250">
            <template #default="scope">
              <span class="name-link" style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" prop="gender" width="100" />
          <el-table-column label="手机号" align="center" prop="phone" width="180" />
          <el-table-column label="状态" align="center" width="150">
            <template #default="scope">
              <div class="status-wrapper">
                <span class="status-dot" :class="statusClass(scope.row.status)"></span>
                <span>{{ statusText(scope.row.status) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="测评时间" align="center" prop="examTime" width="220" />
          <el-table-column label="操作" align="center" width="150" fixed="right">
            <template #default="scope">
              <el-button type="primary" link @click="handleDetail(scope.row)">测评详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-show="total > 0"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="getList"
            @current-change="getList"
          />
        </div>
      </div>
    </el-card>

    <!-- 数据分享对话框 -->
    <el-dialog
      v-model="shareDialogVisible"
      title="数据分享"
      width="600px"
      append-to-body
      destroy-on-close
      @close="handleShareClose"
    >
      <div v-if="!isSharedGenerated" class="share-config-view">
        <el-form :model="shareForm" label-width="80px">
          <el-form-item label="密码" required>
            <el-input v-model="shareForm.password" placeholder="SRf9Q7" style="width: 300px" readonly />
          </el-form-item>
          <el-form-item label="有效期">
            <el-select v-model="shareForm.expire" style="width: 300px">
              <el-option label="7天" value="7" />
              <el-option label="30天" value="30" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="share-tips">
          *记录项中，可能存在不宜公开的内容，该部分内容会自动隐藏，详情请查看 <el-link type="primary" :underline="false">问卷管理须知</el-link>
        </div>
        <div class="dialog-footer-custom">
          <el-button type="primary" class="generate-btn" @click="handleGenerateShare">生成分享链接</el-button>
        </div>
      </div>

      <div v-else class="share-result-view">
        <el-row :gutter="40">
          <el-col :span="10" class="qr-col">
            <div class="qr-title">分享二维码</div>
            <div class="qr-box">
              <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://www.wenjuan.com/s/sample" alt="二维码" />
            </div>
            <el-button type="primary" link @click="handleCopyQR">复制二维码</el-button>
          </el-col>
          <el-col :span="14" class="link-col">
            <div class="result-item">
              <div class="result-label">分享链接</div>
              <el-input v-model="shareResult.url" readonly />
            </div>
            <div class="result-item mt20">
              <div class="result-label">访问密码</div>
              <el-input v-model="shareResult.password" readonly />
            </div>
            <div class="mt30">
              <el-button type="primary" plain @click="handleCopyAll">复制链接及密码</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

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

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const total = ref(243);
const applicantList = ref([
  { name: '小张小张自有主张', gender: '男', phone: '18438573743', status: 'pass', examTime: '2025-03-21 10:27:56' },
  { name: '小张小张自有主张', gender: '男', phone: '18438573743', status: 'fail', examTime: '2025-03-21 10:27:56' },
  { name: '小张小张自有主张', gender: '男', phone: '18438573743', status: 'pending', examTime: '2025-03-21 10:27:56' },
  { name: '小张小张自有主张', gender: '男', phone: '18438573743', status: 'pass', examTime: '2025-03-21 10:27:56' },
  { name: '小张小张自有主张', gender: '男', phone: '18438573743', status: 'fail', examTime: '2025-03-21 10:27:56' },
]);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  keywords: '',
  jobId: route.query.jobId
});

const getList = () => {
  // 模拟请求
  console.log('获取报名列表数据', queryParams);
};

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

const handleSelectionChange = (selection) => {
  console.log('选中项', selection);
};

const handleDetail = (row) => {
  router.push({
    path: '/system/tenant/exam-report/index',
    query: { applicantId: row.phone } // 模拟传输
  });
};

const statusText = (status) => {
  const map = {
    pass: '通过',
    fail: '未通过',
    pending: '待评分'
  };
  return map[status] || '未知';
};

const statusClass = (status) => {
  return `status-${status}`;
};

// 分享功能相关
const shareDialogVisible = ref(false);
const isSharedGenerated = ref(false);
const shareForm = reactive({
  password: 'SRf9Q7',
  expire: '7'
});
const shareResult = reactive({
  url: 'https://www.wenjuan.com/s/sample_link',
  password: 'SRf9Q7'
});

const handleShare = () => {
  shareDialogVisible.value = true;
};

const handleGenerateShare = () => {
  isSharedGenerated.value = true;
};

const handleShareClose = () => {
  isSharedGenerated.value = false;
};

const handleCopyQR = () => {
  console.log('复制二维码');
};

const handleCopyAll = () => {
  console.log('复制全部');
};

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

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

.applicant-list-card {
  flex: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;

  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px;
  }
}

.header-section {
  margin-bottom: 25px;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
  }

  .ops-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.search-btn {
  background-color: #007bff !important;
  color: #fff !important;
  border-radius: 0 4px 4px 0;
}

.blue-btn {
  background-color: #4e7cfe;
  border-color: #4e7cfe;
  &:hover {
    background-color: #3a68ea;
    border-color: #3a68ea;
  }
}

.table-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name-link {
  color: #007bff;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

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

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

.status-pass { background-color: #67C23A; }
.status-fail { background-color: #F56C6C; }
.status-pending { background-color: #E6A23C; }

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

/* 分享对话框样式 */
.share-config-view {
  padding: 10px;
  .share-tips {
    font-size: 11px;
    color: #999;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
}

.dialog-footer-custom {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.share-result-view {
  padding: 20px 0;
  .qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #eee;
    .qr-title { font-weight: bold; margin-bottom: 15px; }
    .qr-box { padding: 10px; border: 1px solid #eee; margin-bottom: 10px; }
  }
  .link-col {
    .result-label { font-size: 13px; color: #666; margin-bottom: 8px; }
    .mt20 { margin-top: 20px; }
    .mt30 { margin-top: 30px; }
  }
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
  .ops-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .right-buttons {
    width: 100%;
    display: flex;
    gap: 10px;
  }
  .search-box {
    width: 100%;
    .el-input { width: 100% !important; }
  }
}
</style>
