<template>
  <div class="app-container backcheck-report-page">
    <el-row :gutter="16" class="report-row h-full">
      <el-col :lg="6" :md="8" :sm="24" :xs="24" class="left-col h-full">
        <div class="bg-white rounded p-4 left-panel flex flex-col h-full">
          <div class="panel-title shrink-0">候选人信息</div>
          <div class="info-list shrink-0">
            <div class="info-item"><span class="label">姓名：</span><span class="value">{{ baseInfo.name }}</span></div>
            <div class="info-item"><span class="label">手机号：</span><span class="value">{{ baseInfo.mobile }}</span></div>
            <div class="info-item"><span class="label">证件号：</span><span class="value">{{ baseInfo.idNo }}</span></div>
            <div class="info-item"><span class="label">报告状态：</span>
              <el-tag v-if="reportStatus === 3" type="danger">已拒绝</el-tag>
              <el-tag v-else-if="reportStatus === 2" type="success">已审核</el-tag>
              <el-tag v-else-if="reportStatus === 1" type="warning">已出具</el-tag>
              <el-tag v-else type="info">待填写</el-tag>
            </div>
          </div>

          <div class="mt-4 shrink-0">
            <el-button class="w-full" @click="handleBack">返回</el-button>
          </div>
        </div>
      </el-col>

      <el-col :lg="18" :md="16" :sm="24" :xs="24" class="right-col h-full">
        <div class="bg-white rounded right-panel h-full overflow-y-auto">
          <BackgroundCheckForm :record-id="recordId" :report-status="reportStatus" @submitted="onSubmitted" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import BackgroundCheckForm from './BackgroundCheckForm.vue';
import { getBackCheckReport } from '@/api/system/backRecord';

const route = useRoute();
const router = useRouter();

const recordId = computed(() => (route.query.id as string) || '');

const reportStatus = ref<number>(0);

const baseInfo = reactive({
  id: (route.query.id as string) || '',
  studentNo: (route.query.studentNo as string) || '-',
  name: (route.query.name as string) || '张三',
  mobile: (route.query.mobile as string) || '135****8804',
  idNo: (route.query.idCard as string) || '4401***********0362',
  idNoMasked: (route.query.idCard as string) || '4401***********0362',
  gender: (route.query.gender === '0' ? '男' : (route.query.gender === '1' ? '女' : '未知')),
  finishDate: '2024.07.08'
});

onMounted(async () => {
  if (recordId.value) {
    try {
      const res = await getBackCheckReport(recordId.value);
      if (res.data?.reportStatus !== undefined && res.data?.reportStatus !== null) {
        reportStatus.value = res.data.reportStatus;
      } else if (res.data?.conclusion) {
        reportStatus.value = 2;
      } else if (res.data?.candidateName) {
        reportStatus.value = 1;
      }
    } catch (e) {
      // 查询失败保持默认
    }
  }
});

const onSubmitted = (status: number) => {
  reportStatus.value = status;
};

const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.backcheck-report-page {
  padding: 20px;
  background-color: #f0f2f5;
  height: calc(100vh - 84px);
  overflow: hidden;
}

.report-row {
  margin: 0 !important;
}

.left-panel {
  height: 100%;
}

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

.info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  font-size: 14px;
  color: #4e5969;

  .label {
    color: #86909c;
  }
}

@media screen and (max-width: 992px) {
  .left-panel {
    position: static;
    margin-bottom: 16px;
  }
}
</style>
