<template>
    <Row class="resultbox">
        <!--设定答案-->
        <Col :class="box1">
        <div class="titleresult"><span>設定答案</span></div>
        <div class="answerms">
          <div class="letterbtn"  @click="change('number')" :class='{"btn-on":textstatus===true}'><svg-icon icon-class="SetAns" /></div>
          <div class="letterbtn2"  @click="change('letter')" :class='{"btn-on":textstatus===false}'><svg-icon icon-class="SetAnsEn" /></div>
            
        </div>
        <ul class="resultnumbtn">
            <li v-for="(item,i) in numbtndata" :key="item.id" v-if="textstatus === false" @click="ClickAnswer(item.english,i,item.classname)" :class="item.classname">{{item.english}}</li>
            <li v-for="(item,i) in numbtndata" :class="item.classname"  :key="item.id" v-if="textstatus === true" @click="ClickAnswer(item.num,i,item.classname)">{{item.num}}</li>
            <li :class="noclassName" @click="noneAnswer">無答案</li>
        </ul>
        <!--<div class="switchbox">
      <i-Switch  v-model="textstatus" @on-change="change" /><span class="icontext">数字选项</span>
    </div>-->
        </Col>
        <Col :class="box2">
        <div class="titleresult"><span>答对计分</span></div>
        <div class="pickername">
            <VuePicker :data="pickData"
                       @cancel="cancel"
                       @confirm="confirm"
                       :showToolbar="false"
                       :maskClick="false"
                       :visible.sync="pickerVisible"
                       @change="sswu"/>
        </div>
        <div class="scorebox"><span class="scoretitle">分</span></div>
        </Col>
    </Row>
</template>
<script>
  import vuePicker from 'vue-pickers'
  var tdata = []
  for (let i = 0; i < 20; i++) {
    tdata.push({
      label: i,
      value: i
    })
  }
  export default {
        components: { vuePicker },
    data() {
      return {
        box1: 'options',
        box2: 'scoringbox',
        pickerVisible: true,
        pickData: [ tdata ],
        result: '',
        switch1: false,
        textstatus: false,
        numbtn: 'numbtn',
        scorecontent: '不计分',
        numbtndata: [
          { 'num': 1, 'english': 'A', classname: 'numbtn' },
          { 'num': 2, 'english': 'B', classname: 'numbtn' },
          { 'num': 3, 'english': 'C', classname: 'numbtn' },
          { 'num': 4, 'english': 'D', classname: 'numbtn' },
          { 'num': 5, 'english': 'E', classname: 'numbtn' },
          { 'num': 6, 'english': 'F', classname: 'numbtn' },
          { 'num': 7, 'english': 'G', classname: 'numbtn' },
          { 'num': 8, 'english': 'H', classname: 'numbtn' },
          { 'num': 9, 'english': 'I', classname: 'numbtn' },
          ],
          resultData: [],
          cssvalueas: this.$store.state.cssvalue,
          lettername: 'letter',
          numbername: 'number',
          noAnswer: false,
          noclassName:'nonumbtn'
      }
        },
        computed: {
            // 获取答题状态
            AnswerStatus() {
                return this.$store.state.answerstatus
            },
            //监听cssvalue的值
            lookcssvalue() {
               return this.$store.state.cssvalue
            },
            watchnowstatus() {
                return this.$store.state.answerstatus
            }
        },
       created() {
            this.init()
        },
        methods: {
            //初始化判定全屏还是半屏
            init() {
                let solution = this.$store.state.answervalue[0]
                let patterns = JSON.parse(localStorage.getItem('msgBody'))
                let nowpages= this.$store.state.carouselSlide
                for (var i = 0; i < this.numbtndata.length; i++) {
                    if (solution === this.numbtndata[i].english || solution=== this.numbtndata[i].num) {
                        this.numbtndata[i].classname='pitchnumbtn'
                    }
                }
                if (patterns) { 
                for (var t = 0; t < patterns.length; t++) {
                    if (nowpages === patterns[t].page) {
                        if (patterns[t].pattern === 'number') {
                            this.textstatus=true
                        } else if (patterns[t].pattern === 'letter') {
                            this.textstatus=false
                        }
                    }
                  }
                }
            },
      // 英文、数字设定答案切换
            change(status) {
               this.resultData = []
               this.textstatus = status
                if (status === 'number') {
                    this.$store.state.answerpattern = 'number'
                    this.textstatus=true
                } else if (status === 'letter') {
                    this.$store.state.answerpattern = 'letter'
                    this.textstatus=false
                }
        },
      // 设定答案选择点击
            ClickAnswer(value, numid, classname) {
            // 选中状态
                if (classname === 'numbtn') {
                    this.numbtndata[numid].classname = 'pitchnumbtn'
                    // 判断防止重复添加
                    //if (this.resultData.indexOf(value, 0) === -1) {
                    if (this.resultData === '' || this.resultData === null) {
                        this.resultData.push(value)
                    } else {
                        this.resultData.splice(0, 1, value)
                    }
                    this.$store.state.answerstatus = 1
                    this.$store.state.IRSswitch = false
                    this.$store.state.answervalue = this.resultData
                    //}
                }
             //取消答案选项并删除数组中的数据
            if (classname === 'pitchnumbtn') {
                this.numbtndata[numid].classname = 'numbtn'
                 for (var i = 0; i < this.resultData.length; i++) {
                        if (this.resultData[i] === value) {
                                this.resultData.splice(i, 1)
                                break
                        }
                }
                // 判断没有答案了，修改设定答案状态
                if (this.resultData === '') {
                    this.$store.state.answerstatus = '0'
                }
                // 赋值 并传递答案数组给vuex
                this.$store.state.answervalue = this.resultData
                }
                    let answerid = numid + 1
                    for (var y = 0; y < this.numbtndata.length; y++) {
                        if (answerid !== this.numbtndata[y].num) {
                            this.numbtndata[y].classname = 'numbtn'
                        }
                    }
            },
            //无答案
            noneAnswer() {
                if (this.noAnswer == false) {
                    this.noAnswer = true
                    this.noclassName = 'clicknonumbtn'
                    for (let i in this.numbtndata) {
                        this.numbtndata[i].classname = 'numbtn'
                    }
                    this.$store.state.answerstatus = 0
                    this.$store.state.IRSswitch = false
                } else {
                    this.noAnswer = false
                    this.noclassName = 'nonumbtn'
                }
            },
      scorechange(status) {
        if (status === true) {
          this.scorecontent = '计分'
          this.box1 = 'optionsbox'
          this.box2 = 'scoring'
          this.$emit('poptipwidth', 'ChangeWidth')
        } else {
          this.scorecontent = '不计分'
          this.box1 = 'options'
          this.box2 = 'scoringbox'
          this.$emit('poptipwidth', 'poptipStyleWidth')
        }
      },
      cancel() {

        this.result = 'click cancel result: null'
      },
      confirm(res) {
        this.result = JSON.stringify(res)

      },
      sswu(e) {
        console.log(e)
        console.log(this.pickData)
      }
        },
        watch: {
            watchcssvalueas(e) {
                console.log('进入监听状态')
                if (e) {
                    this.cssvalueas = e;
                }
            },
            //监听答题状态 改变样式
            watchnowstatus(e) {
                if (e === 0) {
                    let answerdata = this.numbtndata
                    for (var i = 0; i < answerdata.length; i++) {
                        answerdata[i].classname = 'numbtn'
                    }
                }
            }
            }
        }
</script>
<style lang='less'>
  .pickerbox {
    width:13vw !important;
    height:auto !important;
    position:absolute !important;
    background:inherit !important;
    top:0px !important;
    float:left;
  }
  .vue-picker {
    position:static !important;
  }
  .content {
    height:300px !important;
    position:static !important;
  }
  .colums {
    font-size:42px !important;
  }
  .list ul {
    line-height:42px !important;
  }
  .list li{
    padding:0% 5% !important;
    width:100%
  }
  .ivu-poptip-popper {
    top:40px !important;
    left:-80px !important;
  }
</style>
<style scoped lang='less'>
@import '../../assets/css/color.less';
  .ivu-poptip-inner {
    border-radius:15px !important;
  }
  .resultbox {
    width:100%;
    height:189px !important;
  }
  .titleresult {
    width:30%;
    font-size:16px;
    font-weight:bold;
  }
  .resultnumbtn {
    cursor:pointer;
    width:100%;
    height:160px;
    padding:0% 22%;
    display:block;
    
  }
  .numbtn {
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:#D8D8D8;
    text-align:center;
    line-height:30px;
    color:#000;
    font-size:18px;
    font-weight:bold;
    float:left;
    margin-left:20px;
    margin-top:5px;
  }
    .nonumbtn {
        width: 130px;
        height: 30px;
        border-radius: 5%;
        background-color: #D8D8D8;
        text-align: center;
        line-height: 30px;
        color: #000;
        font-size: 18px;
        font-weight: bold;
        float: left;
        margin-left: 20px;
        margin-top: 15px;
    }
    .clicknonumbtn {
        width: 130px;
        height: 30px;
        border-radius: 5%;
        background-color: @main-color;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        float: left;
        margin-left: 20px;
        margin-top: 15px;
    }
    .englishnumbtn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: @main-color;
        text-align: center;
        line-height: 55px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        float: left;
        margin-left: 20px;
        margin-top: 5px;
    }
  .pitchnumbtn {
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:@main-color;
    text-align:center;
    line-height:30px;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    float:left;
    margin-left:20px;
    margin-top:5px;
  }
  .switchbox {
    width:50%;
    padding-left:10px;
    padding-top:0px;
    font-size:17px;
    color:#000;
    font-weight:bold;
    display:block;
    float:left;
  }
  .pickername {
    width:70%;
    height:300px;
    float:left;
    position:relative;
  }
  .scorebox {
    width:30%;
    height:300px;
    float:left;
    line-height:300px;
    font-size:42px;
  }
  .options {
    width:100%;
    display:block;

  }
  .optionsbox {
    width:50%;
    display:block;
     float:left;
  }
  .scoring {
    width:50%;
    display:block;
    float:left;
  }
  .scoringbox {
    width:0%;
    display:block;
    float:left;
    display:none;
  }
  .ivu-poptip-body{
      padding:2px 16px !important;
  }
    .answerms {
        width: 100%;
        text-align: center;
        margin-top:-5px;
    }

    .numbtns {
        font-size:10px !important;
        padding:4px 30px !important;
    }
    .letterbtn{
      cursor: pointer;
      position:absolute;
      right:10px;
      background-color: #D8D8D8;
      width:40px;
      height:40px;
      line-height: 40px;
      border-radius: 50%;
      display: inline-block;
      font-size:30px 

    }
    .letterbtn2{
      cursor: pointer;
      position:absolute;
      top:70px;
      right:10px;
      background-color: #D8D8D8;
      width:40px;
      height:40px;
      line-height: 40px;
      border-radius: 50%;
      display: inline-block;
      font-size:30px 
    }
    .btn-on{
      background-color: @main-color;
      color:white;
    }
</style>
