<template>
  <el-table v-loading="loading" :data="list" border class="evaluation-table">
    <el-table-column width="60" align="center">
      <template #header>
        <el-checkbox :model-value="isAllChecked" :indeterminate="isIndeterminate" @change="handleCheckAllChange" />
      </template>
      <template #default="{ row }">
        <el-checkbox :model-value="isRowChecked(row)" @change="(checked) => handleRowCheckedChange(row, checked)" />
      </template>
    </el-table-column>
    <el-table-column label="测评图片" width="88" align="center">
      <template #default="{ row }">
        <img :src="getImageUrl(row)" class="evaluation-image" alt="测评图片" />
      </template>
    </el-table-column>
    <el-table-column label="测评名称" prop="evaluationName" min-width="220">
      <template #default="{ row }">
        <div class="evaluation-info">
          <div class="evaluation-name">{{ row.evaluationName || '--' }}</div>
          <div class="evaluation-id">ID: {{ row.id }}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="岗位类型" prop="positionType" min-width="140">
      <template #default="{ row }">
        <span>{{ getOptionLabel(positionTypeOptions, row.positionType) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="参与数" min-width="130" align="center">
      <template #default="{ row }">
        <el-button link type="primary" @click="emit('viewApplyList', row)">0/0</el-button>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="110" align="center">
      <template #default="{ row }">
        <el-switch
          :model-value="row.status === '0'"
          inline-prompt
          active-text="开"
          inactive-text="关"
          :loading="switchLoadingMap[String(row.id)]"
          @change="emit('toggleStatus', row, $event)"
        />
      </template>
    </el-table-column>
    <el-table-column label="同步时间" min-width="170" align="center">
      <template #default="{ row }">
        <span>{{ formatDateTime(row.updateTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="状态" min-width="120" align="center">
      <template #default="{ row }">
        <el-tag :type="getSaleStatusMeta(row).type" effect="light">
          {{ getSaleStatusMeta(row).label }}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="120" align="center" fixed="right">
      <template #default="{ row }">
        <el-button link type="primary" @click="emit('viewApplyList', row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="table-footer">
    <div class="table-total">共 {{ total }} 条</div>
    <pagination
      v-show="total > 0"
      :page="pageNum"
      :limit="pageSize"
      :total="total"
      @update:page="emit('update:pageNum', $event)"
      @update:limit="emit('update:pageSize', $event)"
      @pagination="emit('pagination')"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { MainExamEvaluationVO } from '@/api/main/evaluation/types';
import { formatDateTime, getImageUrl, getSaleStatusMeta } from '../utils';

const props = defineProps<{
  loading: boolean;
  list: MainExamEvaluationVO[];
  total: number;
  pageNum: number;
  pageSize: number;
  gradeOptions: Array<{ label: string; value: string }>;
  positionTypeOptions: Array<{ label: string; value: string }>;
  switchLoadingMap: Record<string, boolean>;
}>();

const emit = defineEmits<{
  pagination: [];
  'update:pageNum': [number];
  'update:pageSize': [number];
  toggleStatus: [MainExamEvaluationVO, boolean | string | number];
  viewApplyList: [MainExamEvaluationVO];
}>();

const getOptionLabel = (options: Array<{ label: string; value: string }>, value?: string) => {
  if (!value) {
    return '--';
  }
  return options.find((item) => item.value === value)?.label || value;
};

const checkedIds = ref<Array<string | number>>([]);

const currentPageIds = computed(() => props.list.map((item) => item.id).filter((id): id is string | number => id !== undefined && id !== null));

const isAllChecked = computed(() => currentPageIds.value.length > 0 && currentPageIds.value.every((id) => checkedIds.value.includes(id)));

const isIndeterminate = computed(() => {
  const checkedCount = currentPageIds.value.filter((id) => checkedIds.value.includes(id)).length;
  return checkedCount > 0 && checkedCount < currentPageIds.value.length;
});

const isRowChecked = (row: MainExamEvaluationVO) => checkedIds.value.includes(row.id);

const handleCheckAllChange = (checked: boolean | string | number) => {
  if (checked) {
    checkedIds.value = Array.from(new Set([...checkedIds.value, ...currentPageIds.value]));
    return;
  }
  checkedIds.value = checkedIds.value.filter((id) => !currentPageIds.value.includes(id));
};

const handleRowCheckedChange = (row: MainExamEvaluationVO, checked: boolean | string | number) => {
  if (checked) {
    checkedIds.value = Array.from(new Set([...checkedIds.value, row.id]));
    return;
  }
  checkedIds.value = checkedIds.value.filter((id) => id !== row.id);
};
</script>

<style scoped lang="scss">
.evaluation-table {
  flex: 1;
}

.evaluation-table :deep(.el-checkbox__inner) {
  border-radius: 2px;
}

.evaluation-table :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-radius: 2px;
}

.evaluation-table :deep(.el-table__header th) {
  background: #f7f8fa;
  color: #303133;
  font-weight: 600;
}

.evaluation-image {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: #f5f7fa;
}

.evaluation-info {
  line-height: 1.6;
}

.evaluation-name {
  color: #303133;
  font-size: 14px;
}

.evaluation-id {
  color: #909399;
  font-size: 12px;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}

.table-total {
  color: #909399;
  font-size: 12px;
}
</style>
