<script setup lang="ts" name="ExamScore">
import { ref, onMounted, reactive, toRefs, onBeforeUpdate, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { minePaperInfo } from '@/api/train/exam'
import { useDict } from '@/common/utils/dict'
import { getCompanyName } from '@/common/utils/transcoding'
import unselectIcon from '@/static/image/unselectIcon.png'
import selectIcon from '@/static/image/selectIcon.png'
import tip from '@/static/image/tip.png'
const { examination_type, markpape_type, yes_no, topic_type, single_option, judge_option, is_pass } = useDict('examination_type', 'markpape_type', 'yes_no', 'topic_type', 'single_option', 'judge_option', 'is_pass')
const { proxy }:any = getCurrentInstance()

const leaveTypeName = ref('')
const show = reactive({
  leaveType: false
})

const data:any = reactive({
  form: {
    pageNum: 1,
    pageSize: 10,
    id: null,
    belongCompany: null,
    examinationName: null,
    examinationType: null,
    examinationTotal: null,
    examinationDuration: null,
    examinationFullScore: null,
    examinationPassScore: null,
    examinationStartTime: null,
    examinationEndTime: null,
    isExamination: '1',
    isPlan: '1',
    planId: null,
    planName: null,
    markPapeType: '1',
    markPapePeople: null,
    isRandom: '1',
    questionBankId: null,
    questionBankName: null,
    tenantId: null,
    companyId: null,
    deptId: null,
    cardList: [
      { topicType: '1', topicRatio: null, topicTotal: null },
      { topicType: '2', topicRatio: null, topicTotal: null },
      { topicType: '3', topicRatio: null, topicTotal: null },
      { topicType: '4', topicRatio: null, topicTotal: null }],
    questionDirectoryList: [],
    repairExamination: null
  },
  rules: {
    belongCompany: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
    examinationName: [{ required: true, message: '考试名称不能为空', trigger: 'blur' }],
    examinationType: [{ required: true, message: '考试类型不能为空', trigger: 'blur' }],
    examinationTotal: [{ required: true, message: '题目总数不能为空', trigger: 'blur' }],
    examinationFullScore: [{ required: true, message: '考试满分不能为空', trigger: 'blur' },
      { pattern: /^[1-9]\d{0,1}$|^100$/, message: '请输入正确的格式,1-100的整数' }],
    examinationPassScore: [{ required: true, message: '及格分数不能为空', trigger: 'blur' },
      { pattern: /^[1-9]\d{0,1}$|^100$/, message: '请输入正确的格式,1-100的整数' }],
    examinationStartTime: [{ required: true, message: '考试开始时间不能为空', trigger: 'blur' }],
    examinationEndTime: [{ required: true, message: '考试结束时间不能为空', trigger: 'blur' }],
    isExamination: [{ required: true, message: '是否可以补考不能为空', trigger: 'blur' }],
    isPlan: [{ required: true, message: '是否关联计划不能为空', trigger: 'blur' }],
    planName: [{ required: true, message: '计划名称不能为空', trigger: 'blur' }],
    markPapeType: [{ required: true, message: '阅卷类型不能为空', trigger: 'blur' }],
    markPapePeople: [{ required: true, message: '阅卷人不能为空', trigger: 'blur' }],
    isRandom: [{ required: true, message: '是否随机选题不能为空', trigger: 'blur' }],
    examinationDuration: [{ required: true, message: '考试时长(分钟)不能为空', trigger: 'blur' },
      { pattern: /^[1-9]\d*$/, message: '请输入正确的格式,正整数' }],
    questionBankName: [{ required: true, message: '题库名称不能为空', trigger: 'blur' }]
  },
  queryParams: {
  }
})

const { form, rules, queryParams } = toRefs(data)

const loading = ref(false)

const isRead = ref(false)
function onClickStart() {
  isRead.value = true
}
const planShow = ref(false)
const markPapeShow = ref(false)
const topicShow = ref(true)// 占比情况默认显示
function getInfo(id) {
  if (id !== null) {
    minePaperInfo(id).then(response => {
      form.value = response.data
      // 是否关联计划
      if (form.value.isPlan === '1') {
        planShow.value = true
      } else {
        planShow.value = false
      }
      // 是否手动阅卷
      if (form.value.markPapeType === '1') {
        markPapeShow.value = false
      } else {
        markPapeShow.value = true
      }
      // 是否随机选题
      if (form.value.isRandom === '1') {
        topicShow.value = true
      } else {
        topicShow.value = false
      }

      for (let i = 0;i < form.value.questionDirectoryList.length;i++) {
        let item = form.value.questionDirectoryList[i]
        if (item.topicType === '2') {
          item.mineAnswerSub = item.mineAnswerName.split(',')
        }
      }
    })
  }
}
// 回显数据字
const selectDictLabel = (datas: any, value: number | string) => {
  if (value === undefined) {
    return ''
  }
  const actions: Array<number | string> = []
  Object.keys(datas).some((key) => {
    if (datas[key].value === '' + value) {
      actions.push(datas[key].label)
      return true
    }
  })
  if (actions.length === 0) {
    actions.push(value)
  }
  return actions.join('')
}
const exercisesIndex = ref(0)

onLoad((option)=>{
  getInfo(option.paperId)
})

/**
 * 单选
 * @param index
 * @param childIndex
 */
function singleCorrectAnswer(index, childIndex:any) {
  form.value.questionDirectoryList[index].mineAnswerName = form.value.questionDirectoryList[index].questionDirectoryOptionList[childIndex].directoryOption
}

/**
 * 多选
 * @param index
 * @param childIndex
 */
function doubleCorrectAnswer(index, childIndex:any) {
  form.value.questionDirectoryList[exercisesIndex.value].mineAnswer = form.value.questionDirectoryList[exercisesIndex.value].mineAnswerSub.join(',')
  form.value.questionDirectoryList[exercisesIndex.value].mineAnswerName = form.value.questionDirectoryList[exercisesIndex.value].mineAnswerSub.join(',')
}

const checkboxRefs:any = ref([])
const toggle = (index, childIndex) => {
  proxy.$refs[`checkboxRefs${index}${childIndex}`][0].toggle()
}

function judgeCorrectAnswer(index, childIndex) {
  form.value.questionDirectoryList[index].mineAnswerName = judge_option.value[childIndex].label
}

function handlePreView() {
  if (form.value.questionDirectoryList[exercisesIndex.value].topicType === '4' && (form.value.questionDirectoryList[exercisesIndex.value].mineAnswer === null || form.value.questionDirectoryList[exercisesIndex.value].mineAnswer === '')) {
    uni.showToast({
      title: '请输入答案',
      icon: 'none'
    })
    return
  }
  if (form.value.questionDirectoryList[exercisesIndex.value].topicType === '4' && (form.value.questionDirectoryList[exercisesIndex.value].mineAnswer)) {
    form.value.questionDirectoryList[exercisesIndex.value].mineAnswerName = form.value.questionDirectoryList[exercisesIndex.value].mineAnswer
  }
  if (!form.value.questionDirectoryList[exercisesIndex.value].mineAnswerName || form.value.questionDirectoryList[exercisesIndex.value].mineAnswerName === '') {
    uni.showToast({
      title: '请输入答案',
      icon: 'none'
    })
    return
  }
  exercisesIndex.value++
}

function changejianDa() {
  form.value.questionDirectoryList[exercisesIndex.value].mineAnswerName = form.value.questionDirectoryList[exercisesIndex.value].mineAnswer
}

const dialogShow = ref(false)
function makeSureBack() {
  uni.navigateBack()
}
</script>

<template>
  <div class="container full" style="padding-bottom: 10rem;">
    <div class="container__body">
      <div class="container__card flex" :class="[isRead ? 'new-container-card' : '']">
        <div v-if="!isRead">
          <uv-cell
            :value="form.passScore"
            label="总得分"
          />
          <uv-cell
            :value="selectDictLabel(is_pass,form.isPass)"
            label="是否及格"
          />
          <uv-cell
            :value="getCompanyName(form.belongCompany)"
            label="所属公司"
          />
          <uv-cell
            :value="form.examinationName"
            label="考试名称"
          />
          <uv-cell
            :value="selectDictLabel(examination_type,form.examinationType)"
            label="考试类型"
          />
          <uv-cell
            :value="form.examinationFullScore"
            label="考试满分"
          />
          <uv-cell
            :value="form.examinationPassScore"
            label="及格分数"
          />
          <uv-cell
            :value="form.examinationStartTime"
            label="考试开始时间"
          />
          <uv-cell
            :value="form.examinationEndTime"
            label="考试结束时间"
          />
          <uv-cell
            :value="form.examinationDuration"
            label="考试时长(分钟)"
          />
          <uv-cell
            :value="selectDictLabel(yes_no,form.isPlan)"
            label="是否关联计划"
          />
          <uv-cell
            v-if="planShow"
            :value="form.planName"
            label="计划名称"
          />
          <uv-cell
            :value="selectDictLabel(yes_no,form.isRandom)"
            label="是否随机选题"
          />
          <uv-cell
            :value="selectDictLabel(yes_no,form.isExamination)"
            label="是否可以补考"
          />
          <uv-cell
            :value="selectDictLabel(markpape_type,form.markPapeType)"
            label="阅卷类型"
          />
          <uv-cell
            v-if="markPapeShow"
            :value="form.markPapePeople"
            label="阅卷人"
          />
          <uv-cell
            :value="form.questionBankName"
            label="题库名称"
          />
        </div>
        <uv-form
          v-if="isRead"
          ref="formRef"
          label-position="top"
        >
          <uv-cell-group>
            <div v-for="(item,index) in form.questionDirectoryList" :key="index">
              <uv-cell-group v-if="exercisesIndex === index">
                <div class="tigan">
                  <div
                    class="leixing"
                    :class="[item.topicType === '1' ? 'question-single' :
                      item.topicType === '2' ? 'question-double' :
                      item.topicType === '3' ? 'question-panduan' :
                      item.topicType === '4' ? 'question-jianda' :
                      'question-common']">
                    {{ selectDictLabel(topic_type,item.topicType) }}
                  </div>
                  <div class="neirong">
                    {{ item.topicContact }}
                  </div>
                </div>
              </uv-cell-group>
              <!-- 单选 -->
              <uv-radio-group
                :disabled="true"
                v-model="item.mineAnswer"
                v-if="exercisesIndex === index && item.topicType === '1'">
                <uv-cell-group class="single-option-container">
                  <uv-cell
                    :class="[
                      item.mineAnswer === childItem.directoryOption && childItem.directoryOption !== item.correctAnswer ? 'wrong-option-item' : '',
                      item.mineAnswer === childItem.directoryOption && childItem.directoryOption === item.correctAnswer ? 'right-option-item' : '']"
                    v-for="(childItem,childIndex) in item.questionDirectoryOptionList"
                    :key="`${index}${childIndex}`"
                    clickable
                  >
                    <template #title>
                      <div class="title-container" style="display: flex;align-items: center;">
                        <div class="title-label">
                          {{ childItem.directoryOption }}
                        </div>
                        <div class="title-line">|</div>
                        <div class="title-value">
                          {{ childItem.optionContent }}
                        </div>
                      </div>
                    </template>
                    <template #right-icon>
                      <uv-radio :name="childItem.directoryOption">
                        <!-- <template v-slot:icon="props" >
                          <image
                            v-if="item.mineAnswer === childItem.directoryOption && childItem.directoryOption === item.correctAnswer"
                            style="height: 2rem;width: 2rem;"
                            :src="selectIcon"
                          />
                          <image
                            v-if="item.mineAnswer === childItem.directoryOption && childItem.directoryOption !== item.correctAnswer"
                            style="height: 2rem;width: 2rem;"
                            :src="unselectIcon"
                          />
                        </template> -->
                      </uv-radio>
                    </template>
                  </uv-cell>
                </uv-cell-group>
              </uv-radio-group>
              <!-- 多选 -->
              <uv-checkbox-group

                :disabled="true"
                v-model="item.mineAnswerSub"
                v-if="exercisesIndex === index && item.topicType==='2'"
                shape="square"
                @change="doubleCorrectAnswer">
                <uv-cell-group class="single-option-container">
                  <uv-cell
                    :class="[
                      item.mineAnswerSub.includes(childItem.directoryOption) && item.mineAnswerName === item.correctAnswerName ? 'right-option-item' : '',
                      item.mineAnswerSub.includes(childItem.directoryOption) && item.mineAnswerName !== item.correctAnswerName ? 'wrong-option-item' : '' ]"
                    v-for="(childItem,childIndex) in item.questionDirectoryOptionList"
                    clickable
                    :key="`${index}${childIndex}`"
                    :title="`${childItem.directoryOption}： ${childItem.optionContent}`"
                    @click="toggle(index,childIndex)"
                  >
                    <template #right-icon>
                      
                      <uv-checkbox
                        :name="childItem.directoryOption"
                        :ref="`checkboxRefs${index}${childIndex}`"
                        @click.stop
                      >
                        <!-- <template v-slot:icon="props" >
                          <image
                            v-if="item.mineAnswerName.split(',').includes(childItem.directoryOption) && item.mineAnswerName === item.correctAnswerName"
                            style="height: 2rem;width: 2rem;"
                            :src="selectIcon"
                          />
                          <image
                            v-if="item.mineAnswerName.split(',').includes(childItem.directoryOption) && item.mineAnswerName !== item.correctAnswerName"
                            style="height: 2rem;width: 2rem;"
                            :src="unselectIcon"
                          />
                        </template> -->
                      </uv-checkbox>
                    </template>
                  </uv-cell>
                </uv-cell-group>
              </uv-checkbox-group>
              <!-- 判断 -->
              <uv-radio-group v-model="item.mineAnswer" v-if="exercisesIndex === index && item.topicType === '3'" :disabled="true">
                <uv-cell-group class="single-option-container">
                  <uv-cell
                    v-for="(dict,childIndex) in judge_option"
                    :class="[
                      item.mineAnswer === dict.value&& dict.value!== item.correctAnswer ? 'wrong-option-item' : '',
                      item.mineAnswer === dict.value&& dict.value=== item.correctAnswer ? 'right-option-item' : '']"
                    :key="dict.value"
                    :title="`${childIndex+1}. ${dict.label}`"
                    clickable
                    @click="judgeCorrectAnswer(index,childIndex)">
                    <template #right-icon>
                      <uv-radio :name="dict.value" >
                        <!-- <template v-slot:icon="props" >
                          <image
                            v-if="item.mineAnswer === dict.value && dict.value === item.correctAnswer"
                            style="height: 2rem;width: 2rem;"
                            :src="selectIcon"
                          />
                          <image
                            v-if="item.mineAnswer === dict.value && dict.value !== item.correctAnswer"
                            style="height: 2rem;width: 2rem;"
                            :src="unselectIcon"
                          />
                        </template> -->
                      </uv-radio>
                    </template>
                  </uv-cell>
                </uv-cell-group>
              </uv-radio-group>
              <!-- 简答 -->
              <uv-cell-group v-if="exercisesIndex === index && item.topicType === '4'" >
       

                <uv-textarea
                 label="答案"
                 :disabled="true"
                  v-model="item.mineAnswer"
                  placeholder="请输入答案"
                  count
                  maxlength="300"
                 
                />
              </uv-cell-group>
            </div>
          </uv-cell-group>
        </uv-form>
        <div v-if="isRead" class="answer-container">
          <div class="option-container">
            <image :src="tip" alt="" class="tip-logo" />
            <div class="tip-text">答案解析</div>
          </div>
          <div class="right-answer">
            <div class="label">正确答案：</div>
            <div class="value">{{ form.questionDirectoryList[exercisesIndex].correctAnswerName }}</div>
          </div>
          <div class="analysis" v-if="form.questionDirectoryList[exercisesIndex].analysis">
            {{ form.questionDirectoryList[exercisesIndex].analysis }}
          </div>
        </div>
      </div>
    </div>

    <div v-if="!isRead" class="option-btn-container flex-container">
      <div  style="flex:1;margin-right: 20rpx;" v-if="!isRead">
        <uv-button
          type="primary"
          :loading="loading"
          block
          @click="onClickStart">查看题目</uv-button>
      </div>
    </div>

    <div
      v-if="isRead && exercisesIndex <= form.questionDirectoryList.length - 1"
      class="option-btn-container flex-container"
    >
    <div style="flex:1;margin-right: 20rpx;" v-if="isRead && (exercisesIndex <= form.questionDirectoryList.length -1) && exercisesIndex === 0">
      <uv-button
        plain
        :loading="loading"
        @click="isRead = false">查看成绩</uv-button>
    </div>
    <div style="flex:1;margin-right: 20rpx;" v-if="isRead && (exercisesIndex <= form.questionDirectoryList.length -1) && exercisesIndex > 0">
      <uv-button
        plain
        :loading="loading"
        @click="exercisesIndex--">上一题</uv-button>
    </div>
    <div style="flex:1;" v-if="isRead && exercisesIndex < form.questionDirectoryList.length - 1">
      <uv-button
        style="flex: 1;margin-left: 1.2rem;"
        type="primary"
        :loading="loading"
        @click="handlePreView">下一题</uv-button>
    </div>
    <div style="flex:1;" v-if="isRead && exercisesIndex === form.questionDirectoryList.length - 1">
      <uv-button
        type="primary"
        style="flex: 1;margin-left: 1.2rem;"
        :loading="loading"
        @click="makeSureBack">确认</uv-button>
    </div>
      
      
      
      
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.container__body {
  margin-bottom: 100rpx;
}

.container__card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.new-container-card {
  background-color: transparent;
  box-shadow: none;
  
  .uv-form {
    background-color: #fff;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
    padding-bottom: 24rpx;
  }
}

.single-option-container {
  padding: 0 24rpx;
  
  .uv-cell {
    background: #f6f6f6;
    margin-top: 24rpx;
    border-radius: 12rpx;
    
    &:first-child {
      margin-top: 0;
    }
  }
  
  .title-container {
    display: flex;
    align-items: center;
    
    .title-label {
      font-size: 36rpx;
      font-weight: bold;
      color: #252525;
    }
    
    .title-line {
      width: 40rpx;
      height: 0;
      opacity: 0.2;
      transform: rotate(90deg);
      border: 1rpx solid #b0b0b0;
    }
    
    .title-value {
      font-size: 30rpx;
      color: #252525;
    }
  }
  
  .right-option-item {
    background: #efffe3;
  }
  
  .wrong-option-item {
    background: #fcf0f0;
  }
}

.tigan {
  display: flex;
  padding: 24rpx;
  position: relative;
  
  .leixing {
    position: absolute;
    margin-top: 4rpx;
    left: 24rpx;
    display: inline-block;
    width: 84rpx;
    height: 40rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .question-single {
    background: rgba(255, 141, 1, 0.1);
    border: 1rpx solid rgba(255, 141, 26, 0.35);
    color: #ff8d1a;
  }
  
  .question-double {
    background: rgba(42, 130, 228, 0.09);
    border: 1rpx solid rgba(42, 130, 228, 0.3);
    color: #2a82e4;
  }
  
  .question-panduan {
    background: rgba(255, 87, 51, 0.12);
    border: 1rpx solid rgba(255, 87, 51, 0.36);
    color: #ff5733;
  }
  
  .question-jianda {
    background: rgba(121, 166, 23, 0.12);
    border: 1rpx solid rgba(121, 166, 23, 0.38);
    color: #79a617;
  }
  
  .neirong {
    margin-bottom: 4rpx;
    text-indent: 92rpx;
    font-size: 30rpx;
    color: #252525;
    line-height: 50rpx;
  }
}

.answer-container {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
  padding: 24rpx;
  
  .option-container {
    display: flex;
    align-items: center;
    
    .tip-logo {
      height: 40rpx;
      width: 40rpx;
    }
    
    .tip-text {
      margin-left: 20rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #252525;
    }
  }
  
  .right-answer {
    font-size: 30rpx;
    color: #252525;
    display: flex;
    align-items: center;
    
    .value {
      font-size: 36rpx;
      font-weight: 500;
      color: #252525;
    }
  }
  
  .analysis {
    margin-top: 10rpx;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 48rpx;
    color: #252525;
  }
}

.option-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24rpx;
  padding-bottom: 60rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(221, 237, 253, 0.54);
  display: flex;
  box-sizing: border-box;
}

.flex-container {
  display: flex;
}
</style>