<template>
  <a-spin :spinning="confirmLoading">
    <a-row style="height: calc(80vh)">
      <a-col :span="24" style="overflow-y: scroll; height: calc(80vh)">
        <div style="text-align: center; width: 100%; font-weight: bold; font-size: 20px; padding: 20px">{{ djxxData.title }}</div>
        <div style="text-align: right; font-size: 16px; padding-right: 20px">
          <span class="answer-title">答卷人：</span><span class="answer-info">{{ djxxData.userName }} </span>
          <!-- <span v-if="djxxData.atype == 6" class="answer-title">总分：</span><span class="answer-info">{{ djxxData.totalScore }} </span> -->
          <span v-if="djxxData.atype == 6" class="answer-title">得分：</span><span class="answer-info">{{ djxxData.score }} </span>
          <span class="answer-title">用时：</span><span class="answer-info">{{ djxxData.answerSfm }} </span>
        </div>
        <!-- 题干信息 -->
        <div style="width: 100%" v-for="(item, index) in tiganData" :key="index">
          <!-- 文件题 -->
          <div style="width: 92%; margin: 0 auto" v-if="item.wjType == '8'">
            <div style="text-align: left; width: 100%; font-weight: bold; font-size: 18px; padding: 20px">文件题</div>
            <a-card>
              <template #title>
                <span>{{ index + 1 }}、</span><span v-html:value="item.wjTitle" style="white-space: pre-wrap; word-wrap: break-word" />

                <div v-if="item.picPath">
                  <j-upload
                    v-model:value="item.picPath"
                    fileType="image"
                    disabled
                    :maxCount="item.picPath.split(',').length"
                    :buttonVisible="false"
                  ></j-upload>
                </div>
                <!-- <span v-if="item.tktda" style="color:#9e9e9e;margin-left:30px;font-size:12px;">(正确答案:{{item.tktda}})</span> -->
              </template>
              <template #extra v-if="djxxData.atype == 6">
                <div style="margin-left: 40px"
                  >题目分值：<span class="answer-word">{{ item.wjScore }}</span> 分</div
                >
                <div style="margin-left: 40px"
                  >所得分值：<span class="answer-word">{{ item.itemScore ? item.itemScore : '待评' }}</span> 分</div
                >
              </template>
              <a-row>
                <a-col :span="18">
                  <div v-if="item.answerText">
                    <iframe
                      id="pdfPreviewIframe"
                      :src="getUrl(item.answerText)"
                      frameborder="0"
                      width="100%"
                      height="550px"
                      scrolling="auto"
                    ></iframe>
                  </div>
                  <!-- <span v-html="item.answerText"></span> -->
                  <!-- <a-textarea v-model:value="item.answerText" style="width:100%;" :auto-size="{ minRows: 2, maxRows: 5 }" disabled/> -->
                </a-col>
                <a-col :span="6">
                  <div style="text-align: right">
                    <span>评分</span>
                    <a-input
                      placeholder="请输入评分"
                      v-model:value="item.itemScore2"
                      style="width: 70%; margin-bottom: 5px; margin-left: 10px"
                      @change="emitChange(item)"
                    />
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </div>
        </div>
        <div style="text-align: center; margin-top: 20px">
          <a-button type="primary" @click="submitForm">保存</a-button>
          <a-button type="primary" @click="submitNextForm" style="margin-left: 10px">保存并下一个</a-button>
        </div>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" name="wjxWjxx-add" setup>
import { ref, nextTick, defineExpose } from 'vue';
import { Icon } from '/@/components/Icon';
import { useMessage } from '/@/hooks/web/useMessage';
import { defHttp } from '/@/utils/http/axios';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { queryWjxWjxxTmxxListByMainId, queryDataById, saveOrUpdate, djtj } from '/@/views/kc/wjxWjxxTmlb/WjxWjxxTmlb.api';
import { randomString, simpleDebounce, getFileAccessHttpUrl, baseApiUrl } from '/@/utils/common/compUtils';
import { encryptByBase64 } from '/@/utils/cipher';
const title = ref<string>('');
const mainId = ref<string>('');
const confirmLoading = ref<boolean>(false);
const tiganData = ref<any>([]);
const djxxData = ref<any>({});
const infoData = ref<any>({});
const { createMessage } = useMessage();

const emit = defineEmits(['register', 'ok']);

function getUrl(record) {
  var file = baseApiUrl + '/' + record;
  console.log('👩‍👩‍👧', file);
  var url = 'https://fileview.jeecg.com/onlinePreview?url=' + encodeURIComponent(encryptByBase64(file));
  return url;
}

//初始化
function edit(record) {
  console.log('🙇‍♂️1111111111111', record);
  tiganData.value = [];
  infoData.value = record;
  defHttp.get({ url: '/wjxDjxx/queryZgtdpf', params: { vid: record.vid, jid: record.jid } }).then((res) => {
    console.log('👛', res);
    if (res) {
      mainId.value = res.id;
      let djxx = res;
      let list = djxx.wjxDjxxTmxxList;
      for (let i = 0; i < list.length; i++) {
        let par = list[i];
        if (par.wjType == 4) {
          let lssj = par.itemSelected.split(',');
          const numArray = lssj.map((str) => parseInt(str));
          list[i].itemSelected = numArray;
        }
      }
      tiganData.value = list;
      djxxData.value = djxx;
    } else {
      createMessage.warning('暂无需要评分数据');
    }
  });
}

function emitChange(record) {
  console.log('👮‍♀️', record);
  var wjScore = record.wjScore;
  var itemScore2 = record.itemScore2;
  if (!/^[\d.]+$/.test(itemScore2)) {
    createMessage.warning('请输入正确的分数');
    record.itemScore = null;
    record.itemScore2 = null;
    return;
  }

  if (wjScore && itemScore2) {
    if (parseInt(wjScore) < parseInt(itemScore2)) {
      createMessage.warning('评分不能大于题目分值');
      record.itemScore = wjScore;
      record.itemScore2 = wjScore;
      return;
    } else if (parseInt(itemScore2) < 0) {
      createMessage.warning('评分不能小于0');
      record.itemScore = 0;
      record.itemScore2 = 0;
      return;
    } else {
      record.itemScore = itemScore2;
    }
  }
}

//提交数据
async function submitForm() {
  var list = tiganData.value;
  console.log('👩‍🎤', list);
  for (var i = 0; i < list.length; i++) {
    if (!list[i].itemScore) {
      createMessage.warning('您有未填写的评分，请填写评分！');
      return;
    }
  }
  console.log(11111111111111);
  defHttp.post({ url: '/wjxDjxx/editSdpf', params: list }).then((res) => {
    console.log('😕', res);
    createMessage.success('保存成功');
    emit('ok');
  });
}
async function submitNextForm() {
  var list = tiganData.value;
  console.log('👩‍🎤', list);
  for (var i = 0; i < list.length; i++) {
    if (!list[i].itemScore) {
      createMessage.warning('您有未填写的评分，请填写评分！');
      return;
    }
  }
  defHttp.post({ url: '/wjxDjxx/editSdpf', params: list }).then((res) => {
    console.log('😕', res);
    // createMessage.success('保存成功');
    edit({ vid: infoData.value.vid });
  });
}

defineExpose({
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
/deep/span.ant-radio + * {
  width: 100%;
}

/deep/.ant-checkbox-wrapper {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: tnum;
  display: inline-flex;
  align-items: baseline;
  line-height: unset;
  cursor: pointer;
  width: 80%;
}
/deep/.ant-checkbox + span {
  padding-right: 8px;
  padding-left: 8px;
  width: 100%;
}
.ant-checkbox-wrapper[aria-disabled='true'] {
  color: rgb(2, 2, 2); /* 例如，将文本颜色设置为灰色 */
  cursor: not-allowed; /* 将鼠标指针设置为禁用状态 */
}
.answer-title {
  font-size: 14px;
  color: #333;
}
.answer-info {
  font-size: 14px;
  color: #666;
  text-decoration: underline;
  margin-right: 15px;
}
.answer-word {
  color: #ff8710;
}
</style>
