<template>
  <NavHeader/>
  <div class="w-1200px m-auto pt-10px">
    <div class="relative flex justify-end">
      <button type="button" class="back-btn" @click="linkTo('process-xgcj-id')">返回</button>
    </div>
    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
      <div class="flex justify-between">
        <div class="w-375px">
          <table class="data-table" cellpadding="0" cellspacing="0">
            <tr>
              <th>题目</th>
              <th>满分</th>
              <th>标注答案</th>
              <th>得分</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in listData">
              <td>{{item.ysdt_stsxbh}}</td>
              <td>{{item.hq_score}}</td>
              <td>{{item.hq_answer}}</td>
              <td>{{item.ysdt_pydf}}</td>
              <td>
                <button type="button" class="op-btn" @click="reviseScore(item)">改分</button>
              </td>
            </tr>
          </table>
        </div>
        <div class="w-780px">
          <el-carousel class="w-full h-550px" :autoplay="false" arrow="always" indicator-position="none">
            <el-carousel-item v-for="item in imgList" :key="item">
              <img class="m-auto block" :src="item" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
  <commonFooter/>
  <div class="revise-pop" v-if="reviseShow">
    <div class="revise-box">
      <h3 class="pop-title mb-50px">修改分数</h3>
      <div class="flex items-center">
        <div class="w-180px text-right text-16px">题目</div>
        <div class="flex-1 ml-25px text-14px">{{reviseInfo.ysdt_stsxbh}}</div>
      </div>
      <div class="mt-40px flex items-center">
        <div class="w-180px text-right text-16px">满分</div>
        <div class="flex-1 ml-25px text-14px">{{reviseInfo.hq_score}}</div>
      </div>
      <div class="mt-40px flex items-center">
        <div class="w-180px text-right text-16px">标准答案</div>
        <div class="flex-1 ml-25px text-14px">{{reviseInfo.hq_answer}}</div>
      </div>
      <div class="mt-40px flex items-center">
        <div class="w-180px text-right text-16px">得分</div>
        <div class="flex-1 ml-25px">
          <input type="text" class="revise-in" v-model="reviseInfo.ysdt_pydf">
        </div>
      </div>
      <div class="mt-70px text-center">
        <button type="button" class="revise-btn cancel" @click="reviseShow = false">取消</button>
        <button type="button" :disabled="reviseInfo.ysdt_pydf === '' || isSub" class="ml-45px revise-btn sub" @click="reviseSub">确定</button>
      </div>
    </div>
  </div>
</template>
<route lang="json">
{
"meta":{
"title":"改分",
"breadcrumb":true
}
}
</route>
<script setup>
import {useRouter} from "vue-router";
import request from "~/utils/request";
import {REQUEST} from "~/utils/request";
import {user} from "~/store";
const router = useRouter();
const route = useRoute();
const linkTo = (name) => {
  router.push({name:name,params:{id:ze_id}});
};
let ze_id = $ref('')
let ysk_id = $ref('')
let listData = $ref([])
let imgList = $ref([])
let reviseShow = $ref(false)
let isSub = $ref(false)
let reviseInfo = $ref({})
function getCardDetail() {
  let data = {
    ysk_id:ysk_id,
    limit:'999'
  }
  request({
    url: "/yzy/xsdtdtqt/index",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
      listData = res.data.page_data;
      imgList = res.data.dtk_pic;
    }
  })
}
function reviseScore(item) {
  reviseShow = true;
  reviseInfo = item;
}
function reviseSub() {
  if (!(/^\d+(\.\d{1,1})?$/).test(reviseInfo.ysdt_pydf)) {
    ElMessage({
      type: "warning",
      message: "请输入正整数或仅带有一位小数的数字！",
    });
  } else {
    isSub = true;
    let params = {
      issubmit:'1',
      ysdt_id:reviseInfo.ysdt_id,
      yzy_xsdtdtqt:{
        ysdt_pydf:reviseInfo.ysdt_pydf
      }
    }
    request({
      url: "/yzy/xsdtdtqt/edit",
      data: params,
    }).then((res) => {
      isSub = false;
      if (res.code === '1') {
        ElMessage({
          type: "success",
          message: "成绩修改成功！",
        });
        reviseShow = false;
        getCardDetail();
      }
    })
  }
}
if (route.params.ze_id) {
  ze_id = route.params.ze_id;
  ysk_id = route.params.ysk_id;
  getCardDetail();
}
</script>

<style lang="scss" scoped>
$color: #0048e5;
::v-deep .el-carousel__container{
  height: 100%;
}
.data-table {
  width: 100%;
  table-layout: fixed;

  tr:nth-child(even) {
    background: #F1F7FF;
  }

  th {
    height: 50px;
    background: $color;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    color: #fff;
    &:first-child{
      border-radius: 6px 0 0 0;
    }
    &:last-child{
      border-radius: 0 6px 0 0;
    }
  }

  td {
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    text-align: center;
  }
}
.op-btn {
  width: 50px;
  height: 30px;
  background: #fff;
  border: 1px solid #003eee;
  border-radius: 2px;
  font-size: 14px;
  color: #003eee;
  text-align: center;
  &:disabled{
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    pointer-events: none;
  }
}
.revise-pop{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  .revise-box{
    width: 519px;
    height: 448px;
    background: #ffffff;
    border-radius: 6px;
  }
  .pop-title{
    font-size: 16px;
    border-bottom: 1px solid #F3F3F3;
    line-height: 50px;
    color: #333;
    text-align: center;
  }
  .revise-in{
    width: 224px;
    height: 40px;
    background: #fff;
    border: 1px solid #dcdfe6;
    outline: none;
    border-radius: 4px;
    padding-left: 15px;
    font-size: 14px;
    color: #333;
  }
  .revise-btn{
    width: 100px;
    height: 40px;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    &:disabled{
      background: #ccc!important;
      color: #fff!important;
      cursor: default;
    }
    &.cancel{
      border: 1px solid #BFBFBF;
      background: #fff;
      color: #1C1C1C;
    }
    &.sub{
      background: $color;
      color: #fff;
    }
  }
}
</style>
