<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto">
     <div class="relative -mt-40px flex justify-end">
       <button type="button" class="back-btn" @click="linkTo('process')">返回</button>
     </div>
     <div class="mt-10px w-full min-h-860px bg-hex-FFF pt-25px">
       <h3 class="text-18px text-center">详情</h3>
       <div class="mt-70px pl-300px">
         <div class="flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试名称</h3>
           <div class="flex-1 text-16px leading-20px">{{ykj_detail.ykj_ksrwmc}}</div>
         </div>
         <div class="mt-40px flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试时间</h3>
           <div class="flex-1 text-16px leading-20px">{{ykj_detail.ykj_ksrq}} 至 {{ykj_detail.ykj_jsrq}}</div>
         </div>
         <div class="mt-40px flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试类型</h3>
           <div class="flex-1 text-16px leading-20px">
             <span v-if="ykj_detail.ykj_kslx === '1'">周考</span>
             <span v-if="ykj_detail.ykj_kslx === '2'">月考</span>
             <span v-if="ykj_detail.ykj_kslx === '3'">作业</span>
             <span v-if="ykj_detail.ykj_kslx === '4'">测验</span>
             <span v-if="ykj_detail.ykj_kslx === '5'">期中</span>
             <span v-if="ykj_detail.ykj_kslx === '6'">期末</span>
             <span v-if="ykj_detail.ykj_kslx === '7'">联考</span>
           </div>
         </div>
         <div class="mt-40px flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">联考学校</h3>
           <div class="flex-1 text-16px leading-20px">{{ykj_detail.ykj_lkxx_name}}</div>
         </div>
         <div class="mt-40px flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试年级</h3>
           <div class="flex-1 text-16px leading-20px">{{ykj_detail.ykj_ksnj_name}}</div>
         </div>
         <div class="mt-40px flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试科目</h3>
           <div class="flex-1 text-16px leading-20px">{{ykj_detail.ykj_kskm_name}}</div>
         </div>
         <div class="mt-40px flex">
           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">阅卷流程</h3>
           <div class="flex-1 text-16px leading-20px">
             <span v-if="ykj_detail.ykj_yjlc === '1'">先上传后划块</span>
             <span v-if="ykj_detail.ykj_yjlc === '2'">先划块后上传</span>
           </div>
         </div>
         <div class="mt-40px flex">
           <h3 class="text-16px leading-20px w-80px text-right text-hex-949494 font-bold mr-30px">状态</h3>
           <div class="flex-1 text-16px leading-20px">
             <span class="inline-block align-middle">进行中</span>
             <div class="inline-block align-middle ml-10px process-state">
               <h3 class="state-line">
                 <span style="width: 11%;"></span>
               </h3>
             </div>
             <span class="ml-10px inline-block align-middle">11%</span>
           </div>
         </div>
       </div>
     </div>
  </div>
  <commonFooter/>
</template>
<route lang="json">
{
  "meta":{
  "title":"阅卷流程详情",
  "breadcrumb": true
  }
}
</route>
<script setup>
import { useRouter } from "vue-router";
import request from "@/utils/request";
const router = useRouter();
const route = useRoute();
const linkTo = (name) => {
  router.push({ name });
};
let ykj_id = $ref('');
let ykj_detail = $ref({});
function getDetail() {
  request({
    url: "/yzy/ksjh/detail",
    data: {
      ykj_id: ykj_id,
    },
  }).then((res) => {
    if (res.code === "1") {
      ykj_detail= res.data.one_info;
    }
  });
}

if (route.params.id) {
  ykj_id = route.params.id;
  getDetail();
}
</script>

<style lang="scss" scoped>

.process-state {
  width: 140px;

  .state-line {
    width: 100%;
    height: 5px;
    background: #e2e2e2;
    border-radius: 3px;

    span {
      display: block;
      height: 5px;
      background: #003eee;
      border-radius: 3px;
    }
  }

  .state-info {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    font-size: 13px;
    color: #003eee;
    text-align: center;
  }
}
</style>
