<template>
  <div class="end_box">
    <div id="bottom-view3">
      <div class="end_con">
        <div class="cs_type"><span>测试内容：</span>{{ title }}</div>
        <div class="cs_time"><span>测试时间：</span>{{ questionsData.created_time }}</div>
        <div class="charts">
          <svg width="86%" height="86%" viewBox="0 0 100 100">
            <circle r="25" cx="50" cy="50" fill="none" stroke="rgba(255,193,79,1)" stroke-width="50" stroke-dasharray="158 158" />
          </svg>
          <svg v-show="ratioNum!==0" class="w_svg" width="100%" height="100%" viewBox="0 0 100 100">
            <circle r="25" cx="50" cy="50" fill="none" stroke="#07cb78" stroke-width="50" :stroke-dasharray="ratio" />
          </svg>
          <template v-if="title === '模拟考试'">
            <div class="circle">
              <p class="p1">得分</p>
              <p class="p2">{{questionsData.score}}</p>
            </div>
          </template>
          <template v-else>
            <div class="circle">
              <p class="p1">正确率</p>
              <p class="p2">{{ratioNum}}%</p>
            </div>
          </template>
        </div>
        <div class="assess">
          <div class="tit">测试评估：</div>
          <img v-show="ratioNum < 20" src="../assets/images/mountain0.png" alt="">
          <img v-show="ratioNum >= 20 && ratioNum < 40" src="../assets/images/mountain1.png" alt="">
          <img v-show="ratioNum >= 40 && ratioNum < 60" src="../assets/images/mountain2.png" alt="">
          <img v-show="ratioNum >= 60 && ratioNum < 99" src="../assets/images/mountain3.png" alt="">
          <img v-show="ratioNum == 100" src="../assets/images/mountain4.png" alt="">
          <template v-if="title != '能力自测'">
            <div v-if="ratioNum == 100" class="txt">成功近在眼前，再接再厉！</div>
            <div v-else class="txt">您离成功还有一段距离，继续努力！</div>
          </template>
          <template v-else>
            <div class="txt" style="text-align: left;">您距离拿证还有一段距离，急速拿证推荐您使用VIP课程！</div>
          </template>
        </div>
        <div class="nl-btn" v-if="title == '能力自测'">
          <!-- <div class="btn" @click="goAbilityExam">重做测试</div>
          <div class="btn" @click="goCourse">学习课程</div> -->
          <div class="new-btn" @click="goVip">购买VIP服务</div>
        </div>
        <div class="card">
          <div class="tit">答题卡：</div>
          <div class="card_con">
            <div class="flag">
              <ul>
                <li>
                  <div class="circle active1"></div>
                  <div class="txt">正确</div>
                </li>
                <li>
                  <div class="circle active2"></div>
                  <div class="txt">错误</div>
                </li>
                <li>
                  <div class="circle active3"></div>
                  <div class="txt">未答</div>
                </li>
              </ul>
            </div>
            <div class="question">
              <template v-if="answerData['1'].data.length !=0">
                <div class="title" >{{ answerData['1'].title }}</div>
                <ul>
                  <template v-for="(item, index) in answerData['1'].data">
                    <li @click="go(item.id)" :data-id="item.id" :key="index" :class="item.answer == undefined || item.answer.length == 0 ? 'active3' : item.is_right ? 'active1' : 'active2'">{{ item.num }}</li>
                  </template>
                </ul>
              </template>
              <template v-if="answerData['2'].data.length !=0">
                <div class="title" >{{ answerData['2'].title }}</div>
                <ul>
                  <template v-for="(item, index) in answerData['2'].data">
                    <li @click="go(item.id)" :data-id="item.id" :key="index" :class="item.answer == undefined || item.answer.length == 0 ? 'active3' : item.is_right ? 'active1' : 'active2'">{{ item.num }}</li>
                  </template>
                </ul>
              </template>
              <template v-if="answerData['6'].data.length !=0">
                <div class="title" >{{ answerData['6'].title }}</div>
                <ul>
                  <template v-for="(item, index) in answerData['6'].data">
                    <li @click="go(item.id)" :data-id="item.id" :key="index" :class="item.answer == undefined || item.answer.length == 0 ? 'active3' : item.is_right ? 'active1' : 'active2'">{{ item.num }}</li>
                  </template>
                </ul>
              </template>
              <template v-if="answerData['5'].data.length !=0">
                <div class="title" >{{ answerData['5'].title }}</div>
                <ul>
                  <template v-for="(item, index) in answerData['5'].data">
                    <li @click="go(item.id)" :data-id="item.id" :key="index" :class="item.answer == undefined || item.answer.length == 0 ? 'active3' : item.is_right ? 'active1' : 'active2'">{{ item.num }}</li>
                  </template>
                </ul>
              </template>
            </div>
          </div>
        </div>
        <div :class="ratioNum == 100 ? 'st-btn cent' : 'st-btn'" v-if="title === '随堂小测' || title === '模拟考试' || title === '知识点小测'">
          <div class="btn" @click="go(1)">全部解析</div>
          <div class="btn" @click="go(-1)" v-if="ratioNum !== 100">错题解析</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Exam from '../action'
import { Toast } from 'vant'
// import { Toast } from 'vant'
export default {
  name: 'ExamEnd',
  data() {
    return {
      answerData: {
        1: {
          title: '单选题：',
          data: []
        },
        2: {
          title: '多选题：',
          data: []
        },
        5: {
          title: '案例题：',
          data: []
        },
        6: {
          title: '判断题：',
          data: []
        }
      },
      questionType: {
        1: '单选题：',
        2: '多选题：',
        5: '案例题：',
        6: '判断题：'
      },
      ratio: 0,
      ratioNum: 0,
      questionsData: {
        questions: []
      },
      requestData: {},
      title: ''
    }
  },
  created() {
    Toast.loading({
      message: '加载中...',
      duration: 5000
    })
  },
  mounted() {
    if (this.$route.query.course_id || this.$route.query.tag_id) {
      this.$route.query.type === 1 || this.$route.query.type === '1' ? this.title = '随堂小测' : this.title = '知识点小测'
    } else {
      this.$route.query.type === 1 || this.$route.query.type === '1' ? this.title = '能力自测' : this.title = '模拟考试'
    }
    // this.title
    this.initData()
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    },
    dataList() {
      let num = 1
      return this.questionsData.questions.map(item => {
        item.question_list.map((subitem, index) => {
          subitem.num = num + index
          return subitem
        })
        num += item.question_list.length
        return item
      })
    }
  },
  methods: {
    goVip() {
      this.$router.push({
        path: '/pay'
      })
    },
    goAbilityExam() {
      this.$router.replace({
        path: '/exam/index',
        query: {
          t: 1
        }
      })
    },
    goCourse() {
      if (this.isWeapp) {
        wx.miniProgram.navigateTo({ url: `/pages/web/index?src=${window.location.origin}/course/learn` })
      } else {
        this.$router.push({
          path: '/course/learn'
        })
      }
    },
    go(id) {
      const param = this.$route.query
      param.id = id
      this.$emit('cardChange', param)
    },
    initData() {
      const param = this.$route.query
      Exam.getExam(param, param.papersUrl).then(res => {
        this.questionsData = res
        this.requestData = res.answers === null ? [] : res.answers
        const count = parseInt(this.questionsData.score) / parseInt(this.questionsData.total_score)
        if (!isNaN(count)) {
          this.ratio = `${count * 158} 158`
          this.ratioNum = parseInt(count * 100)
        } else {
          this.ratioNum = 0
        }
        Toast.clear()
        this.changeData()
      })
    },
    changeData() {
      this.answerData = {
        1: {
          title: '单选题：',
          data: []
        },
        2: {
          title: '多选题：',
          data: []
        },
        5: {
          title: '案例题：',
          data: []
        },
        6: {
          title: '判断题：',
          data: []
        }
      }
      let num = 1
      this.questionsData.questions.map(item => {
        item.question_list.map((c, index) => {
          c.num = num + index
          c = Object.assign(this.questionsData.score_items[item.id][c.id], c)
          if (Object.prototype.hasOwnProperty.call(this.questionsData.answers, item.id)) {
            if (Object.prototype.hasOwnProperty.call(this.questionsData.answers[item.id], c.id)) {
              c = Object.assign(this.questionsData.answers[item.id][c.id], c)
            }
          }
          this.answerData[item.type].data.push(c)
        })
        num += item.question_list.length
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.end_box{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
}
.head{
  color: #222;
  display: flex;
  padding: .4rem 0;
  align-items: center;
  i{
    font-size: .35rem;
    margin-left: .28rem;
  }
  .title{
    margin-left: .03rem;
    font-size: .3rem;
  }
}
#bottom-view3{
  width: 100%;
  overflow: scroll;
}
.end_con{
  height: 100%;
  padding: .4rem 0.4rem 1rem .4rem;
  .cs_type{
    font-size: .3rem;
    color: #222;
    line-height: 100%;
    span{
      font-weight: bold;
    }
  }
  .cs_time{
    font-size: .3rem;
    color: #222;
    line-height: 100%;
    margin-top: .2rem;
    span{
      font-weight: bold;
    }
  }
  .charts{
    width: 3rem;
    height: 3rem;
    margin: .4rem auto;
    position: relative;
    svg{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
    }
    .w_svg{
      -webkit-transform:rotate(-90deg) translate(50%,-50%);
    }
    .circle{
      width: .96rem;
      height: .96rem;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 999;
      -webkit-transform: translate(-50%,-50%);
      background: #FF8000;
      border-radius: 50%;
      text-align: center;
      .p1{
        font-size: .2rem;
        color: #fff;
        line-height: 100%;
        margin: 0.18rem 0 0.15rem 0;
        opacity: .7;
      }
      .p2{
        font-size: .26rem;
        color: #fff;
        line-height: 100%;
        font-weight: bold;
        margin: 0;
      }
    }
  }
  .assess{
    .tit{
      font-size: .3rem;
      color: #333;
      font-weight: bold;
    }
    img{
      width: 4rem;
      height: 1.93rem;
      display: block;
      margin: 0 auto;
    }
    .txt{
      font-weight: bold;
      font-size: .3rem;
      color: #333;
      text-align: center;
      margin-top: .18rem;
    }
  }
  .card{
    padding-bottom: env(safe-area-inset-bottom);
    margin-top: .38rem;
    .tit{
      font-size: .3rem;
      color: #333;
      font-weight: bold;
    }
    .card_con{
      overflow-y: scroll;
      .flag{
        border-bottom: 0.01rem solid #EEEEEE;
        ul{
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          li{
            margin: 0 .4rem 0.1rem .4rem;
            text-align: center;
            .circle{
              width: .6rem;
              height: .6rem;
              border-radius: 50%;
              font-size: .26rem;
              text-align: center;
              line-height: .6rem;
              color: #fff;
            }
            .active1{
              background: #67C23A;
            }
            .active2{
              background:#FA5555;
            }
            .active3{
              background:rgba(204,204,204,1);
            }
            .txt{
              color: #222222;
              font-size: .26rem;
              margin-top: 0.1rem;
            }
          }
        }
      }
      .question{
        .title{
          font-size: .3rem;
          color: #333333;
          margin-top: .1rem;
          margin-bottom: .4rem;
        }
        ul{
          list-style: none;
          margin-top: .3rem;
          padding: 0 0.6rem;
          // border-bottom: 0.01rem solid #EEEEEE;
          display: flex;
          flex-wrap: wrap;
          li{
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            font-size: .26rem;
            text-align: center;
            line-height: .6rem;
            color: #fff;
            margin-right: .6rem;
            margin-bottom: .4rem;
          }
          :nth-child(5n+5){
            margin: 0;
          }
          .active1{
              background: #67C23A;
            }
          .active2{
            background:#FA5555;
          }
          .active3{
            background:rgba(204,204,204,1);
          }
        }
      }
    }
  }
}
.nl-btn{
  display: flex;
  margin-top: .3rem;
  .btn{
    width:3rem;
    height:.7rem;
    background:linear-gradient(90deg,rgba(43,124,233,1) 0%,rgba(103,168,255,1) 100%);
    border-radius:.12rem;
    font-size: .3rem;
    color: #fff;
    text-align: center;
    line-height: .7rem;
  }
  .btn:nth-child(2){
    margin-left: auto;
  }
  .new-btn{
    width: 3.2rem;
    height: .9rem;
    background: #C62245;
    text-align: center;
    line-height: .9rem;
    color: #fff;
    font-size: .3rem;
    background: url(../assets/images/ability-r-btn.png);
    background-size: 100% 100%;
    margin: 0 auto;
  }
}
.st-btn{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 1rem;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 6px 0px rgba(0,0,0,0.05);
  z-index: 99;
  display: flex;
  align-items: center;
  // padding: 0 .4rem;
  padding-bottom: env(safe-area-inset-bottom);
  .btn{width:3rem;
    height:.7rem;
    background:#C62245;
    border-radius:.12rem;
    color: #fff;
    font-size: .3rem;
    text-align: center;
    line-height: .7rem;
    margin-left: .4rem;
  }
  .btn:nth-child(2){
    margin-left: auto;
    margin-right: .4rem;
  }
}
.cent{
  justify-content: center;
}
</style>
