<template>
  <PageShell>
    <div class="apply-page">
      <div class="apply-card">
        <div class="apply-title">报名列表</div>

        <div class="apply-toolbar">
          <div class="apply-search-box">
            <el-input v-model="queryParams.keyword" placeholder="请输入" clearable @keyup.enter="handleQuery" />
            <el-button type="primary" class="apply-search-button" @click="handleQuery">
              <el-icon><Search /></el-icon>
            </el-button>
          </div>

          <div class="apply-toolbar-actions">
            <el-button type="primary" plain @click="handleAddEmployee">添加员工</el-button>
            <el-button type="primary" @click="handleExport">导出列表</el-button>
          </div>
        </div>

        <el-table :data="pagedApplyList" class="apply-list-table" header-row-class-name="apply-table-header">
          <el-table-column label="姓名" prop="name" min-width="160">
            <template #default="{ row }">
              <el-button link type="primary" @click="handleOpenDetail(row)">{{ row.name }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="gender" width="80" align="center" />
          <el-table-column label="部门" prop="department" width="100" align="center" />
          <el-table-column label="手机号" prop="phone" min-width="160" align="center" />
          <el-table-column label="状态" min-width="160" align="center">
            <template #default="{ row }">
              <span class="apply-status-text">
                <span class="apply-status-dot" :class="`is-${row.statusType}`"></span>
                {{ row.statusText }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="测评时间" prop="evaluateTime" min-width="180" align="center" />
          <el-table-column label="操作" width="160" align="center">
            <template #default="{ row }">
              <el-button v-if="row.actionType === 'detail'" link type="primary" @click="handleOpenDetail(row)">测评详情</el-button>
              <el-button v-else link type="primary" @click="handleRemove(row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>

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

      <el-dialog v-model="syncDialog.visible" title="同步测评" width="460px" append-to-body>
        <div class="sync-dialog-content">
          <div class="sync-dialog-row">
            <span class="sync-dialog-label">同步公司</span>
            <el-select v-model="syncDialog.companies" multiple collapse-tags collapse-tags-tooltip placeholder="请选择" class="sync-dialog-select">
              <el-option v-for="item in syncCompanyOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <template #footer>
          <div class="sync-dialog-footer">
            <el-button @click="syncDialog.visible = false">取消</el-button>
            <el-button type="primary" @click="handleConfirmSync">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </PageShell>
</template>

<script setup name="EvaluationApplyList" lang="ts">
import { computed, getCurrentInstance, reactive, ref, type ComponentInternalInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import PageShell from '@/components/PageShell/index.vue';

type ApplyRow = {
  id: number;
  name: string;
  gender: string;
  department: string;
  phone: string;
  statusText: string;
  statusType: 'success' | 'danger' | 'warning' | 'info';
  evaluateTime: string;
  actionType: 'detail' | 'remove';
};

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const route = useRoute();
const modal = proxy?.$modal as any;
const syncCompanyOptions = ['张三', '李四', '王五', '赵六'];
const syncDialog = reactive({
  visible: false,
  companies: ['张三', '李四'] as string[]
});

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
});

const allApplyList = ref<ApplyRow[]>([
  {
    id: 1,
    name: '小张小张白有主张',
    gender: '男',
    department: 'A',
    phone: '18438573743',
    statusText: '通过',
    statusType: 'success',
    evaluateTime: '2025-03-21 10:27:56',
    actionType: 'detail'
  },
  {
    id: 2,
    name: '小张小张白有主张',
    gender: '男',
    department: 'A',
    phone: '18438573743',
    statusText: '未通过',
    statusType: 'danger',
    evaluateTime: '2025-03-21 10:27:56',
    actionType: 'detail'
  },
  {
    id: 3,
    name: '小张小张白有主张',
    gender: '男',
    department: 'A',
    phone: '18438573743',
    statusText: '待评分',
    statusType: 'warning',
    evaluateTime: '2025-03-21 10:27:56',
    actionType: 'detail'
  },
  {
    id: 4,
    name: '小张小张白有主张',
    gender: '男',
    department: 'A',
    phone: '18438573743',
    statusText: '待测评',
    statusType: 'info',
    evaluateTime: '2025-03-21 10:27:56',
    actionType: 'remove'
  }
]);

const filteredApplyList = computed(() => {
  const keyword = queryParams.keyword.trim();
  if (!keyword) {
    return allApplyList.value;
  }
  return allApplyList.value.filter((item) => [item.name, item.phone, item.department, item.statusText].some((field) => field.includes(keyword)));
});

const total = computed(() => filteredApplyList.value.length);

const pagedApplyList = computed(() => {
  const start = (queryParams.pageNum - 1) * queryParams.pageSize;
  const end = start + queryParams.pageSize;
  return filteredApplyList.value.slice(start, end);
});

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

const handlePagination = () => {
  // Pagination component already updates pageNum/pageSize via v-model.
};

const handleAddEmployee = () => {
  syncDialog.visible = true;
};

const handleExport = () => {
  modal?.msgSuccess('导出列表功能待接入');
};

const handleConfirmSync = () => {
  syncDialog.visible = false;
  modal?.msgSuccess('同步成功');
};

const handleRemove = (row: ApplyRow) => {
  allApplyList.value = allApplyList.value.filter((item) => item.id !== row.id);
  modal?.msgSuccess('已移除');
  const maxPage = Math.max(1, Math.ceil(total.value / queryParams.pageSize));
  if (queryParams.pageNum > maxPage) {
    queryParams.pageNum = maxPage;
  }
};

const handleOpenDetail = (row: ApplyRow) => {
  router.push({
    path: '/evaluation/apply-detail',
    query: {
      applyId: String(row.id),
      name: row.name,
      evaluationId: String(route.query.evaluationId || '')
    }
  });
};
</script>

<style scoped>
.apply-page {
  min-height: 100%;
}

.apply-card {
  min-height: calc(100vh - 180px);
  padding: 18px 18px 12px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.apply-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.apply-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.apply-search-box {
  display: flex;
  align-items: stretch;
  width: 290px;
}

.apply-search-box :deep(.el-input__wrapper) {
  border-radius: 4px 0 0 4px;
}

.apply-search-button {
  width: 36px;
  padding: 0;
  border-radius: 0 4px 4px 0;
}

.apply-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.apply-list-table {
  flex: 1;
}

.apply-list-table :deep(.apply-table-header th) {
  height: 48px;
  color: #303133;
  font-weight: 600;
  background: #eef4ff;
}

.apply-list-table :deep(.el-table__row td) {
  height: 46px;
}

.apply-status-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.apply-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c0c4cc;
}

.apply-status-dot.is-success {
  background: #67c23a;
}

.apply-status-dot.is-danger {
  background: #f56c6c;
}

.apply-status-dot.is-warning {
  background: #e6a23c;
}

.apply-status-dot.is-info {
  background: #909399;
}

.apply-card :deep(.pagination-container) {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding: 16px 0 0;
}

.sync-dialog-content {
  padding: 10px 4px 24px;
}

.sync-dialog-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sync-dialog-label {
  width: 56px;
  color: #303133;
  flex-shrink: 0;
}

.sync-dialog-select {
  flex: 1;
}

.sync-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
