<template>
  <div class="mt-4 flex-1 min-h-1 relative" :class="{ 'card-table-in-dialog': inDialog }">
    <div class="absolute top-0 left-0 w-full h-full" :class="{ 'card-table-in-dialog-inner': inDialog }">
      <el-table 
        :data="data" 
        class="w-full" 
        :height="inDialog ? undefined : '100%'"
        :max-height="inDialog ? '60vh' : undefined"
        @selection-change="handleSelectionChange" 
        v-loading="loading"
      >
        <el-table-column label="" type="selection" min-width="60" fixed="left"></el-table-column>
        <el-table-column label="卡号" prop="cardNo" align="center" min-width="100" fixed="left"></el-table-column>
        <el-table-column label="密码" prop="password" align="center" min-width="100"></el-table-column>
        <el-table-column label="姓名—手机" prop="studentInfo" align="center" min-width="150">
          <template #default="scope">
            <div class="text-[13px]">{{ scope.row.nickName || '-' }}</div>
            <div v-if="scope.row.phonenumber" class="text-[12px] text-gray-600">{{ scope.row.phonenumber }}</div>
          </template>
        </el-table-column>
        <el-table-column label="机构" prop="deptName" align="center" min-width="120">
          <template #default="scope">
            <div>{{ scope.row.deptName || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="省份" prop="location" align="center" min-width="120">
          <template #default="scope">
            <div>{{ scope.row.location || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="代理商" prop="agentName" align="center" min-width="120">
          <template #default="scope">
            <div>{{ scope.row.agentName || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="单招年份" prop="endYear" align="center" min-width="120">
          <template #default="scope">
            <div>{{ scope.row.endYear || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="注册学校" prop="schoolName" align="center" min-width="120" >
          <template #default="scope">
            <div class="text-[13px] ellipsis-2">{{ scope.row.schoolName || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="注册班级" prop="className" align="center" min-width="110">
          <template #default="scope">
            <div class="text-[13px] ellipsis-2">{{ scope.row.className || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="培训学校" prop="campusName" align="center" min-width="100">
          <template #default="scope">
            <div class="text-[13px] ellipsis-2">{{ scope.row.campusName || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="培训班级" prop="campusClassName" align="center" min-width="120">
          <template #default="scope">
            <div class="text-[13px] ellipsis-2">{{ scope.row.campusClassName || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="考生类型（注册）" prop="examType" align="center" min-width="140">
          <template #default="scope">
            <template v-if="scope.row && scope.row.examType && exam_type">
              <dict-tag :options="exam_type" :value="scope.row.examType" />
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="卡类型" prop="type" align="center" min-width="120">
          <template #default="scope">
            <dict-tag :options="card_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="分配状态" prop="distributeStatus" align="center" min-width="100">
          <template #default="scope">
            <dict-tag :options="card_distribute_status" :value="scope.row.distributeStatus" />
          </template>
        </el-table-column>
        <el-table-column label="使用状态" prop="status" align="center" min-width="100">
          <template #default="scope">
            <dict-tag :options="card_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="过期状态" prop="timeStatus" align="center" min-width="100">
          <template #default="scope">
            <dict-tag :options="card_time_status" :value="scope.row.timeStatus" />
          </template>
        </el-table-column>
        <el-table-column label="缴费状态" prop="payStatus" align="center" min-width="100">
          <template #default="scope">
            <dict-tag :options="card_pay_status" :value="scope.row.payStatus" />
          </template>
        </el-table-column>
        <el-table-column label="结算状态" prop="isSettlement" align="center" min-width="100">
          <template #default="scope">
            <dict-tag :options="card_settlement_status" :value="scope.row.isSettlement" />
          </template>
        </el-table-column>
        <el-table-column label="分配时间" prop="distributeTime" align="center" min-width="120">
          <template #default="scope">
            <span>{{ scope.row.distributeTime ? parseTime(scope.row.distributeTime, '{y}-{m}-{d}') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="激活时间" prop="activeTime" align="center" min-width="120">
          <template #default="scope">
            <span>{{ scope.row.activeTime ? parseTime(scope.row.activeTime, '{y}-{m}-{d}') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间" prop="outDate" align="center" min-width="120">
          <template #default="scope">
            <span>{{ scope.row.outDate ? parseTime(scope.row.outDate, '{y}-{m}-{d}') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="缴费时间" prop="payTime" align="center" min-width="120" :fixed="hideActions ? 'right' : undefined">
          <template #default="scope">
            <span>{{ scope.row.payTime ? parseTime(scope.row.payTime, '{y}-{m}-{d}') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="!hideActions" label="操作" min-width="110" fixed="right" align="center">
          <template #default="scope">
            <el-button type="danger" text icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import DictTag from '@/components/DictTag/index.vue';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { card_type, exam_type, card_distribute_status, card_status, card_settlement_status, card_time_status, card_pay_status } = 
proxy.useDict("card_type", "exam_type", "card_distribute_status", "card_status", "card_settlement_status", "card_time_status", "card_pay_status");
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  inDialog: {
    type: Boolean,
    default: false,
  },
  hideActions: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['selectionChange', 'delete']);
const handleSelectionChange = (selection) => {
  emit('selectionChange', selection);
};
const handleDelete = (row) => {
  emit('delete', row);
};

// 安全获取 assignExamType
const getAssignExamType = (row) => {
  return row && row.assignExamType ? row.assignExamType : null;
};
</script>
<style lang="scss" scoped>
/* 在弹窗中使用时的样式 */
.card-table-in-dialog {
  position: relative !important;
  height: auto !important;
  min-height: 400px;
  max-height: 60vh;
  margin-top: 0 !important;
}

.card-table-in-dialog-inner {
  position: relative !important;
  height: auto !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}
</style>