<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" title="答题" :form='form'>
      <template v-slot:normalContent>
        <div class="xy-table-item">

        </div>
                <!-- <div>123</div> -->
        <div v-if="isSubmit" style="text-align: center;font-size: 20px;">
          共<span style="color:red">{{askList.length}}</span>题，答对<span style="color:red">{{correct}}</span>题，正确率<span style="color:red">{{range}}</span>
        </div>

        <div v-for="(item,index) in askList">
          <div class="asks">
            <div class="ask_title">
              {{index+1}}、（{{item.qsForm.type_name}}）{{item.qsForm.title}}
              <span v-for='ans in item.qsForm.answer' style="color:red;margin-left:10px" v-if="isSubmit">
                正确答案：{{ans}}
              </span>
            </div>
            <div class="ask_content">
              <div v-if="item.qsForm.type_name=='单选题'">
                <RadioGroup v-model="item.checkAnswer">
                  <Radio :disabled="isSubmit" v-for="dom in item.qsForm.domains" :label="dom.id">{{dom.id}}、{{dom.value}}
                  </Radio>
                </RadioGroup>
              </div>
              <div v-if="item.qsForm.type_name=='多选题'">
                <CheckboxGroup v-model="item.checkAnswer">
                  <Checkbox :disabled="isSubmit" v-for="dom in item.qsForm.domains" :label="dom.id">
                    {{dom.id}}、{{dom.value}}
                  </Checkbox>
                </CheckboxGroup>
              </div>
              <div v-if="item.qsForm.type_name=='简答题'">
                <Input v-model="item.checkAnswer" :disabled="isSubmit" type="textarea" :rows="4" placeholder="" />
              </div>
            </div>

          </div>
        </div>
      </template>
      <template v-slot:footerContent>
        <div v-if="!isSubmit">
          <Button @click="isShow = false">取消</Button>
          <Button type="primary" @click="submitAnswer">确定</Button>
        </div>
        <div v-else>
          <Button @click="closeAnswer">关闭</Button>
        </div>

      </template>
    </xy-dialog>



    <!--
    <Modal width="98%" :value.sync="isShow" fullScreen title="答题" :class-name="'vertical-center-modal'"
      @on-visible-change="showChange">

    </Modal> -->
  </div>
</template>

<script>
  import {
    save
  } from "@/api/task/ask.js"
  import {
    Message
  } from 'element-ui'

  export default {
    data() {
      return {
        isShow: false,
        mission_id: '',
        askList: [],
        isSubmit: false,
        correct:0,
        range:0,
        form:{
          normalContent:''
        }
      }
    },
    created() {
    },
    watch: {
      isShow(newval) {
        if (newval) {
          console.log(this.askList)
          this.$forceUpdate()
        } else {
          this.mission_id = ''
          this.askList = []
          this.correct = 0
          this.range = 0
          this.isSubmit = false
        }
      }
    },
    methods: {
      submitAnswer() {
        let that = this
        if(this.checkAnswers()){
          save({
            mission_id:that.mission_id,
            data:that.askList,
            correct:that.correct
          }).then(res=>{
            that.range = parseFloat(that.correct/that.askList.length).toFixed(2)*100 + "%"
            Message({
              type: 'success',
              message: `提交成功`
            })
            this.isSubmit = true
          })
        }

        // this.isShow = false
      },
      closeAnswer(){
        this.isShow = false
        this.$emit("refresh")
      },
      // 检查正确题数目
      checkAnswers(){
        let correctCount = 0
        let isAnswerCount = 0
        this.askList.map((item,index)=>{
          if(!item.checkAnswer||item.checkAnswer.length==0){
            isAnswerCount++
          }
        })
        if(isAnswerCount>0){
          Message({
            type: 'warning',
            message: `还有${isAnswerCount}题还未作答`
          })
          return false
        }

        this.askList.map((item,index)=>{

          if(item.qsForm.type_name=='多选题'){
            if(item.checkAnswer){
              if(item.checkAnswer.length==item.qsForm.answer.length){
                let p = item.qsForm.answer.every((item1, index1) => {
                  return item.checkAnswer.indexOf(item1) !== -1;
                });
                p?correctCount++:""
              }
            }
          }
          if(item.qsForm.type_name=='单选题'){
            if(item.checkAnswer&&item.checkAnswer==item.qsForm.answer.join("")){
              correctCount++
            }
          }
          if(item.qsForm.type_name=='简答题'){
            if(item.checkAnswer.length>0){
              correctCount++
            }
          }
        })
        this.correct = correctCount
        return true
      }
    }
  }
</script>

<style scoped>
  /deep/ .normalContent{
    flex-basis: 100%;
  }
  .asks {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .ask_title {
    margin-bottom: 10px;
  }

  .ask_content {
    padding-left: 35px;
  }

  /deep/ .ask_content label {
    margin-right: 100px
  }
</style>
