<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="baseInfo.reportStatus === '已完成'" type="success">已完成</el-tag>
              <el-tag v-else type="danger">未完成</el-tag>
            </div>
          </div>

          <div class="panel-title mt-4 shrink-0">报告目录</div>
          <el-menu :default-active="activeKey" class="border-none flex-1 overflow-y-auto" @select="handleSelect">
            <el-menu-item index="overview">报告概述</el-menu-item>
            <el-menu-item index="detail">报告明细</el-menu-item>
          </el-menu>

          <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 p-4 right-panel h-full overflow-y-auto">
          <div v-show="activeKey === 'overview'" class="report-overview">
            <div class="report-title">报告概述</div>

            <div class="report-card">
              <div class="card-h">基本信息</div>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="姓名">{{ baseInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ baseInfo.gender }}</el-descriptions-item>
                <el-descriptions-item label="证件号码">{{ baseInfo.idNoMasked }}</el-descriptions-item>
                <el-descriptions-item label="完成日期">{{ baseInfo.finishDate }}</el-descriptions-item>
              </el-descriptions>
            </div>

            <div class="report-card mt-4">
              <div class="card-h">核验概述</div>
              <el-table :data="overviewRows" header-cell-class-name="custom-header" style="width: 100%">
                <el-table-column prop="item" label="核验项目" min-width="120" />
                <el-table-column prop="content" label="核验内容" min-width="220" />
                <el-table-column prop="progress" label="进度" width="120" align="center" />
                <el-table-column label="核验结果" width="120" align="center">
                  <template #default="scope">
                    <el-icon v-if="scope.row.ok" class="ok"><i-ep-circle-check /></el-icon>
                    <el-icon v-else class="bad"><i-ep-circle-close /></el-icon>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="report-card mt-4">
              <div class="card-h">风险等级说明</div>
              <el-table :data="riskRows" header-cell-class-name="custom-header" style="width: 100%">
                <el-table-column label="" width="60" align="center">
                  <template #default="scope">
                    <span class="risk-dot" :class="scope.row.level" />
                  </template>
                </el-table-column>
                <el-table-column prop="desc" label="说明" />
              </el-table>
            </div>

            <div class="report-card mt-4">
              <div class="card-h">风险说明</div>
              <div class="risk-desc">{{ riskDesc }}</div>
            </div>

            <div class="report-card mt-4">
              <div class="card-h">基本信息</div>
              <el-table :data="basicRows" header-cell-class-name="custom-header" style="width: 100%">
                <el-table-column prop="label" label="字段" width="180" />
                <el-table-column prop="value" label="内容" />
                <el-table-column label="核验结果" width="120" align="center">
                  <template #default="scope">
                    <el-icon v-if="scope.row.ok" class="ok"><i-ep-circle-check /></el-icon>
                    <el-icon v-else class="bad"><i-ep-circle-close /></el-icon>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="220" />
              </el-table>
            </div>

            <div class="mt-4 flex justify-center">
              <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
          </div>

          <div v-show="activeKey === 'detail'" class="report-detail">
            <div class="report-title">报告明细</div>

            <el-table :data="detailRows" header-cell-class-name="custom-header" style="width: 100%" class="mt-4">
              <el-table-column prop="label" label="字段" min-width="180" />
              <el-table-column prop="value" label="内容" min-width="260" />
              <el-table-column prop="result" label="核验结果" width="120" align="center">
                <template #default="scope">
                  <el-icon v-if="scope.row.ok" class="ok"><i-ep-circle-check /></el-icon>
                  <el-icon v-else class="bad"><i-ep-circle-close /></el-icon>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" min-width="200" />
            </el-table>

            <div class="mt-4 flex justify-center">
              <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

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

const activeKey = ref<'overview' | 'detail'>('overview');

const baseInfo = reactive({
  id: (route.query.id as string) || '',
  name: (route.query.name as string) || '张三',
  mobile: '135****8804',
  idNo: '4401***********0362',
  idNoMasked: '4401***********0362',
  gender: '女',
  reportStatus: (route.query.status as string) || '已完成',
  finishDate: '2024.07.08'
});

const overviewRows = ref([
  { item: '身份验证', content: '姓名-身份证号是否一致', progress: '已完成', ok: true },
  { item: '学历验证', content: '经学信网毕业院校核实', progress: '已完成', ok: true },
  { item: '不良记录', content: '经权威机构查询个人不良记录', progress: '已完成', ok: true },
  { item: '涉诉风险', content: '经法院公开的民事诉讼记录查询', progress: '已完成', ok: true },
  { item: '商业利益冲突', content: '经工商市场监管智慧查询', progress: '已完成', ok: true },
  { item: '金融风险', content: '经权威金融机构查询', progress: '已完成', ok: true }
]);

const riskRows = ref([
  { level: 'high', desc: '代表核验结果“存在严重失实或虚假情况，属于较高风险，建议务必关注”' },
  { level: 'mid', desc: '代表核验结果“存在中等失实，属于中等风险，建议关注”' },
  { level: 'low', desc: '代表核验结果“存在较小失实或暂无不良，属于低风险，建议适当关注”' },
  { level: 'ok', desc: '代表核验结果“属实，无风险”' },
  { level: 'none', desc: '代表核验结果“暂未核实完成，客观原因导致记录不完整或无法核实”' }
]);

const riskDesc = computed(() => {
  return '自主寻找HR证明人成为的，报告整体无异常（简历对比：候选人简历中XXXXXXX为分公司）的离职时间为2024年3月，实际背调授权书的时间是2024年4月，也请你关注入职邀约时，放不放时间差。';
});

const detailRows = ref([
  { label: '证明人来源', value: '才是背调项目主导方', ok: true, remark: '' },
  { label: '证明人', value: '林某某', ok: true, remark: '' },
  { label: '证明人职位', value: 'HR（广州分公司）', ok: true, remark: '' },
  { label: '证明人联系方式', value: '135****8804', ok: true, remark: '' },
  { label: '就职公司', value: 'XXXXXX公司（广州分公司）', ok: true, remark: '' },
  { label: '就职时间', value: '2017-11-09 ~ 2024-04-16', ok: true, remark: '' },
  { label: '担任职位', value: '大客户副理（销售助理）', ok: true, remark: '' }
]);

const basicRows = ref([
  { label: '证明人来源', value: '才是背调项目主导方', ok: true, remark: '' },
  { label: '证明人', value: '林某某', ok: true, remark: '' },
  { label: '证明人职位', value: 'HR（广州分公司）', ok: true, remark: '' },
  { label: '证明人联系方式', value: '135****8804', ok: true, remark: '' },
  { label: '就职公司', value: 'XXXXXX公司（广州分公司）', ok: true, remark: 'XXXXXX公司（广州分公司）' },
  { label: '就职时间', value: '2017-11-09 ~ 2024-04-16', ok: true, remark: '' },
  { label: '担任职位', value: '大客户副理（销售助理）', ok: true, remark: '' },
  { label: '工作地点', value: '广州分公司', ok: true, remark: '' },
  { label: '雇佣类别', value: '合同制员工', ok: true, remark: '' }
]);

const handleSelect = (key: string) => {
  if (key === 'overview' || key === 'detail') {
    activeKey.value = key;
  }
};

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

const handleSave = () => {
  ElMessage.success('已保存');
};
</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;
  }
}

.report-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1d2129;
  margin: 6px 0 12px;
}

.report-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;

  .card-h {
    padding: 10px 14px;
    background-color: #409eff;
    color: #fff;
    font-weight: 600;
  }

  :deep(.el-descriptions__body) {
    background-color: #fff;
  }
}

.risk-desc {
  padding: 12px 14px;
  line-height: 1.7;
  font-size: 14px;
  color: #4e5969;
}

.risk-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;

  &.high {
    background: #f56c6c;
  }

  &.mid {
    background: #e6a23c;
  }

  &.low {
    background: #409eff;
  }

  &.ok {
    background: #67c23a;
  }

  &.none {
    background: #909399;
  }
}

.ok {
  color: #67c23a;
}

.bad {
  color: #f56c6c;
}

:deep(.custom-header th) {
  background-color: #f7f8fa !important;
  color: #4e5969;
  font-weight: 500;
  padding: 12px 0;
}

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