<template>
  <div class="questions-box">
    <div v-if="!answerFinished&&loaded">
      <div class="questions wt">
        <div class="questions-header flex flex_sb flex_ac">
            <span class="question-num">
              <i class="currQuestion font20 blue">{{parseInt(current)+1}}</i>/{{questions.length}}
            </span>
          <button class="blue" @click="prev">上一题</button>
        </div>
        <mt-tab-container class="swiper questions-list" v-model="current" :swipeable=false>
          <mt-tab-container-item class="questions-list-item" :key="index" v-for="(item,index) in questions" :id="index.toString()">
            <div class="questions-list-item-title">
              {{item.title}}
            </div>
            <div class="questions-list-item-content">
              <ul>
                <li v-for="(citem,cidx) in item.options" :key="cidx" :class="{'border-bottom':cidx!=item.options.length-1}" class="flex flex_sb font13 questions-list-item-content-item">
                  <span class="flex flex_ac"> {{String.fromCharCode((cidx+65))+'. '+citem}}</span>
                  <button :label="index" :accno="citem" :title="item.title" :option="String.fromCharCode((cidx+65))" is="radio" @chk="getAnswer"></button>
                </li>
              </ul>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <div class="btns questions-btn">
        <button class="button" v-if="!answerAll" @click="next">下一题</button>
        <button class="button" v-if="answerAll" @click="finish">提交</button>
      </div>
    </div>
    <div v-if="answerFinished&&loaded" class="questionsResult">
      <container>
        <span class="space-top font14 bc tc financialProductTip">您的投资类型</span>
        <span class="tc bc font24 in space-top">
          <img :src="baseUrl+'/static/images/'+riskIcon" class="questionsResult-icon" alt="">
        </span>
        <span class="space-top font14 bc tc financialProductTip" style="padding-bottom: .2rem">有效期至 {{riskDate}}</span>
      </container>
      <div class="btns">
        <button class="button" @click="financiaprolist">购买理财</button>
        <button class="button" @click="riskAssessmentSel">重新评测</button>
      </div>
    </div>
  </div>
</template>
<script>
    import base from '../../lib/base'
    import config from '../../lib/config'
    export default {
        name: "questions",
        data () {
          return {
            riskDate:"",
            answerFinished:false,
            baseUrl:config.baseUrl,
            answerAll:"",
            current:'0',
            questions:[],
            options:[],
            loaded:false,
            list:[],
          }
        },
        created(){
          this.no = this.$route.query.no
          base.$.http({
            app:'riskAssessment',
            func:'queryQuestions'
          },data=> {
            data = JSON.parse(data);
            console.log(data)
            if (data.error) {
              base.msg.alert(data.error);
              return;
            }
            var arr = []
            var questions = [];
            data.success.forEach(function (item, index) {
              questions.push({
                title:"",
                option:"",
              });
              var obj = {}
              obj.title = item.question_content
              obj.type = item.id + 1
              var options = [];
              (item.answer).forEach(function (citem, idx) {
                options.push(citem.option_content)
              })
              obj.options = options
              arr.push(obj)
            })
            this.questions = arr
            this.answers = questions
            this.loaded = true
            // console.log(this.list)
          })
        },
        watch:{
          current:function () {
            if (this.current==this.questions.length-1){
              this.answerAll = true
            }
          }
        },
        methods: {
          financiaprolist(){
             this.$router.push({
                 path:'fincialProducts'
             })
           },
          getAnswer(e){
            console.log(e)
            this.answers[e.index].title = e.title
            this.answers[e.index].option = e.option
            this.answers[e.index].optionLetter = e.optionLetter
          },
          next(){
            //点击下一步，校验当前题是否未作答
            if (this.current<this.questions.length-1&&!this.answers[this.current].option){
                base.msg.alert('此题未作答！');
                return
            }
            this.current = (++this.current).toString()
          },
          prev(){
            if (this.current>0){
              this.current = (--this.current).toString()
            }
          },
          riskAssessmentSel(){
            this.answerFinished= false;
            this.loaded=false;
            this.no = this.$route.query.no;
            this.current='0';
            this.answerAll = "";
            base.$.http({
              app:'riskAssessment',
              func:'queryQuestions'
            },data=> {
              data = JSON.parse(data);
              console.log(data)
              if (data.error) {
                base.msg.alert(data.error);
                return;
              }
              var arr = []
              var questions = [];
              data.success.forEach(function (item, index) {
                questions.push({
                  title:"",
                  option:"",
                });
                var obj = {}
                obj.title = item.question_content
                obj.type = item.id + 1
                var options = [];
                (item.answer).forEach(function (citem, idx) {
                  options.push(citem.option_content)
                })
                obj.options = options
                arr.push(obj)
              })
              this.questions = arr
              this.answers = questions
              this.loaded = true
              // console.log(this.list)
            })
            // this.$router.push({
            //   path:'riskAssessment',
            //   query:{
            //     no:url.getKey("no")
            //   }
            // })
          },
          finish(){
            //最后一题
            if (this.current==this.questions.length-1&&!this.answers[this.current].option){
              base.msg.alert('此题未作答！');
              return
            }
            var str = "",questionIndex = "",optionLetter = ""
            this.answers.forEach((item,index)=>{
              if (index<this.answers.length-1){
                str += index + 1 + '.' + item.title + ":" + item.optionLetter + '.' + item.option + ';'
                optionLetter += item.optionLetter + ","
                questionIndex += index + 1 + ','
                return
              }
              str += index + 1 + '.' + item.title + ":" + item.optionLetter + '.' + item.option
              optionLetter += item.optionLetter
              questionIndex += index + 1
            })
            // console.log(str)
            // console.log(questionIndex)
            // console.log(optionLetter)
            var that = this;
            var no = this.$route.query.no;
            base.$.http({
              app: 'riskAssessment',
              func: 'riskEvaluation',
              no:this.no,
              listth:questionIndex,
              qarecord:str,
              listda:optionLetter
            }, data => {
              data=JSON.parse(data);
              var riskname = data.risklevelname
              var riskDate=data.lastassessdate
              console.log(data)
              if (data.error) {
                base.msg.alert(data.error);
                return;
              }
              switch (riskname){
                case '低风险':
                  this.riskIcon = 'lowRisk.png'
                  break
                case '中低风险':
                  this.riskIcon = 'middleRisk.png'
                  break
                case '中风险':
                  this.riskIcon = 'middleRisk.png'
                  break
                case '中高风险':
                  this.riskIcon = 'highRisk.png'
                  break
                case '高风险':
                  this.riskIcon = 'highRisk.png'
                  break
              }
              this.riskDate = riskDate.substring(0,4)+'-'+riskDate.substring(4,6)+'-'+riskDate.substring(6,8);
              this.answerFinished = true
            })
          }
        }
    }
</script>

<style scoped>
  .cancel{
    border-color: transparent;
  }
</style>
