<template>
  <div class="question-list-container" ref="questionContainer">
    <!-- 左侧题目列表清单 -->
    <div class="ql-left-box">
      <!--<p style="font-size:28px;text-align:center;margin:20px 0">芳草小学2019年5月期中考试数学试卷</p>
  <p style="font-size:16px;text-align:center">考试时间：120分钟&nbsp;&nbsp;&nbsp;出卷人：张纪中</p>-->

      <span class="btn-back" @click="handleBackTo" ref="btnBack"><Icon type="ios-arrow-back" />{{$t('totalAnalysis.ql_text13')}}</span>

      <div class="ql-item" v-for="(question,index) in questionList">
        <div>
          <div class="item-question">
            <p>
              <span>{{index+1}} :</span>
              <span v-html="question.question"></span>
            </p>

          </div>
          <div class="item-question-score">
            <span class="item-type">{{question.questionType}}</span>
            <span class="item-type" style="background: #05b454;">{{question.score}}{{$t('totalAnalysis.ql_text8')}}</span>
          </div>
        </div>
        <div class="item-option-wrap">
          <div v-for="(option,optionIndex) in question.option" class="item-option">
            <p>{{String.fromCharCode(64 + parseInt(optionIndex+1))}} : <span v-html="option.value"></span></p>
          </div>
        </div>

        <!-- 如果是组合题 -->
        <div v-for="(childQuestion,childIndex) in question.children" v-if="question.children.length">
          <div class="item-question" style="margin-top:20px;">
            <p>{{childIndex+1}} : <span v-html="childQuestion.question"></span></p>
          </div>
          <div v-for="(childOption,childOptionIndex) in childQuestion.option" style="margin:10px 0">
            <p>{{String.fromCharCode(64 + parseInt(childOptionIndex+1))}} : <span v-html="childOption.value"></span></p>
          </div>
          <div class="item-concept" style="margin-top:20px;">
          </div>
          <div class="item-answer">
            <span class="item-header-title">【答案】:</span>
            <span v-html="childQuestion.answer[0] || childQuestion.answer" v-if="childQuestion.type == 'Subjective'"></span>
            <span :class="[ childQuestion.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in childQuestion.answer" v-else-if="childQuestion.type == 'Complete'" v-html="answer"></span>
            <span :class="[ childQuestion.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in childQuestion.answer" v-else>{{answer}}</span>
          </div>
          <div class="item-explain">
            <div class="item-header-title">【解析】:</div>
            <div v-html="childQuestion.explain"></div>
          </div>
        </div>

        <Collapse simple @on-change="handleCollapseChange" v-model="activeCollapseIndex">
          <Panel :name="index+'answer'">
            <span>{{$t('totalAnalysis.ql_text9')}}</span>
            <div class="answerAndExplain" slot="content" style="margin-top:10px;margin-left: 25px;">
              <div class="item-answer" v-show="question.type != 'Compose'">
                <span class="item-header-title">【{{$t('totalAnalysis.ql_text11')}}】</span>
                <span v-html="question.answer[0] || question.answer" v-if="question.type == 'Subjective'"></span>
                <span :class="[ question.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in question.answer" v-else-if="question.type == 'Complete'" v-html="answer"></span>
                <span :class="[ question.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in question.answer" v-else>{{answer}}</span>
              </div>
              <div class="item-explain" v-show="question.type != 'Compose'">
                <div class="item-header-title">【{{$t('totalAnalysis.ql_text12')}}】</div>
                <div v-html="question.explain"></div>
              </div>
            </div>
          </Panel>
          <Panel :name="index+''">
            <span>{{$t('totalAnalysis.ql_text10')}}</span>
            <div class="answerAndExplain" slot="content" style="margin-top:10px" v-if="collapseList.indexOf(index.toString()) > -1">
              <Table :columns="dataColumns" :data="tableData.filter((item,index2) => index2 == index)"></Table>
              <Table :columns="optionColumns" :data="optionsData" style="margin-top:20px"></Table>
              <!-- 每个题目的数据分析折线图 -->
              <div class="analysis-charts">
                <BaseLine :ids="'myLine' + index" :echartsData="tableData[index]"></BaseLine>
                <BaseRateLine :ids="'myRateLine' + index" :echartsData="optionsData"></BaseRateLine>
              </div>
            </div>
          </Panel>
        </Collapse>

      </div>
    </div>

    <!-- 右侧题目列表题型概览 -->
    <div class='ql-right-box' ref="rightBox">
      <div class="ql-right-score">
        {{$t('totalAnalysis.ql_text1')}} ：<span>100 {{$t('totalAnalysis.ql_text8')}}</span>
      </div>
      <div class="ql-right-list">
        <div class="ql-right-part" v-if="SingleList.length">
          <span class="ql-right-part-title"><span class="ql-line"></span>{{$t('totalAnalysis.ql_text2')}}({{sumArr(SingleList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
          <div class="ql-right-items">
            <span class="ql-right-item" v-for="(item,index) in SingleList" :key="index" @click="handleItemClick(item,$event)">{{index + 1}}</span>
          </div>
        </div>
        <div class="ql-right-part" v-if="MultipleList.length">
          <span class="ql-right-part-title"><span class="ql-line"></span>{{$t('totalAnalysis.ql_text3')}}({{sumArr(MultipleList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
          <div class="ql-right-items">
            <span class="ql-right-item" v-for="(item,index) in MultipleList" :key="index" @click="handleItemClick(item,$event)">{{index + 1}}</span>
          </div>
        </div>
        <div class="ql-right-part" v-if="JudgeList.length">
          <span class="ql-right-part-title"><span class="ql-line"></span>{{$t('totalAnalysis.ql_text4')}}({{sumArr(JudgeList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
          <div class="ql-right-items">
            <span class="ql-right-item" v-for="(item,index) in JudgeList" :key="index" @click="handleItemClick(item,$event)">{{index + 1}}</span>
          </div>
        </div>
        <div class="ql-right-part" v-if="CompleteList.length">
          <span class="ql-right-part-title"><span class="ql-line"></span>{{$t('totalAnalysis.ql_text5')}}({{sumArr(CompleteList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
          <div class="ql-right-items">
            <span class="ql-right-item" v-for="(item,index) in CompleteList" :key="index" @click="handleItemClick(item,$event)">{{index + 1}}</span>
          </div>
        </div>
        <div class="ql-right-part" v-if="SubjectiveList.length">
          <span class="ql-right-part-title"><span class="ql-line"></span>{{$t('totalAnalysis.ql_text6')}}({{sumArr(SubjectiveList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
          <div class="ql-right-items">
            <span class="ql-right-item" v-for="(item,index) in SubjectiveList" :key="index" @click="handleItemClick(item,$event)">{{index + 1}}</span>
          </div>
        </div>
        <div class="ql-right-part" v-if="ComposeList.length">
          <span class="ql-right-part-title"><span class="ql-line"></span>{{$t('totalAnalysis.ql_text7')}}({{sumArr(ComposeList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
          <div class="ql-right-items">
            <span class="ql-right-item" v-for="(item,index) in ComposeList" :key="index" @click="handleItemClick(item,$event)">{{index + 1}}</span>
          </div>
        </div><div style="margin-top:30px">注：标红题号为班级易错题目</div>
      </div>
    </div>
  </div>
</template>

<script>
  import BaseTestScatter from '@/components/student-analysis/total/BaseTestScatter.vue'
  import BaseLineBar from '@/components/student-analysis/total/BaseLineBar.vue'
  import BaseLine from '@/components/student-analysis/total/BaseLine.vue'
  import BaseRateLine from '@/components/student-analysis/total/BaseRateLine.vue'
import { setTimeout } from 'timers';
  export default {
    components: {
      BaseTestScatter, BaseRateLine, BaseLineBar,BaseLine
    },
    data() {
      return {
        activeCollapseIndex:[],
        isFixed: false,
        isLoadingEcharts:false,
        isShowAnswerExplain: false,
        tableData: [],
        optionsData:[],
        collapseList:[],
        questionList: [],
        SingleList: [],
        MultipleList:[],
        JudgeList:[],
        CompleteList:[],
        SubjectiveList:[],
        ComposeList:[],
        typeTransfer: {
          "Single":"单选",
          "Multiple":"多选",
          "Judge":"判断",
          "Complete":"填空",
          "Subjective":"主观",
          "Compose":"综合"
        },
        diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
        dataColumns: [
          {
            title: '知识点',
            key: 'knowledgePoint',
            align:'center',
            width:150
          },
          {
            title: '落点区域',
            key: 'areaName',
            align: 'center',
          },
          {
            title: '配分',
            key: 'score',
            align:'center',
          },
          {
            title: '难易度',
            key: 'diff',
            align:'center',
          },
          {
            title: '鉴别度',
            key: 'identify',
            align:'center',
          },
          {
            title: '正答率',
            align:'center',
            key: 'classScoreRate',
          },
          {
            title: '高分组正答率',
            align:'center',
            key: 'PH',
          },
          {
            title: '低分组正答率',
            align:'center',
            key: 'PL',
          },
          {
            title: 'R1',
            align:'center',
            key: 'R1',
          },
          {
            title: 'R2',
            key: 'R2',
            align:'center',
          },
          {
            title: 'R3',
            align:'center',
            key: 'R3',
          },
          {
            title: 'R4',
            align:'center',
            key: 'R4',
          },
          {
            title: 'R5',
            align:'center',
            key: 'R5',
          },
          {
            title: 'R6',
            align:'center',
            key: 'R6',
          }
        ],
        optionColumns: [
          {
            title: '选项',
            key: 'option',
            align:'center',
            width:150
          },
          {
            title: '选答人数',
            key: 'num',
            align: 'center',
          },
          {
            title: '选答率',
            key: 'rate',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                  h('Progress', {
                      props: {
                        percent: params.row.rate,
                        strokeColor:params.row.isTrue?'#14db14':'#b5bcbe'
                      }
                  }),
              ]);
          }
          },
          {
            title: '高分组选答率',
            align:'center',
            key: 'PH',
            render: function (h, params) {
              return h('span',params.row.PH + '%')
            }
          },
          {
            title: '低分组选答率',
            align:'center',
            key: 'PL',
            render: function (h, params) {
              return h('span',params.row.PL + '%')
            }
          },
        ],
        

      }
    },
    created() {
      this.rightTableData = this.$store.state.totalAnalysis.classList;
      this.questionList = this.$store.state.totalAnalysis.questions;
      this.SingleList = this.questionList.filter(item => item.type == 'Single');
      this.MultipleList = this.questionList.filter(item => item.type == 'Multiple');
      this.JudgeList = this.questionList.filter(item => item.type == 'Judge');
      this.CompleteList = this.questionList.filter(item => item.type == 'Complete');
      this.SubjectiveList = this.questionList.filter(item => item.type == 'Subjective');
      this.ComposeList = this.questionList.filter(item => item.type == 'Compose');

      let testScatter = this.$store.state.totalAnalysis.testScatter;
      let list = testScatter.map(item => item.tableData);

      //list.forEach((item, index) => {
      //  item.type = questions[index].type;
      //  item.stem = '';
      //})

      //console.log(JSON.stringify(testScatter));

      //数据分析表格数据
      let knowledgeArr = testScatter.map(item => item.tableData);
      this.tableData = knowledgeArr;

      this.optionsData = [
        {
          option: "A",
          isTrue:false,
          num: 12,
          rate: 40,
          PH: 10,
          PL:60
        },
        {
          option: "B",
          isTrue:false,
          num: 6,
          rate: 20,
          PH: 10,
          PL:23
        },
        {
          option: "C",
          isTrue:true,
          num: 9,
          rate: 30,
          PH: 70,
          PL:10
        },
        {
          option: "D",
          isTrue:false,
          num: 3,
          rate: 10,
          PH: 10,
          PL:7
        }
      ]
    },

    methods: {

      //指定容器滚动到指定位置
      scrollToTop(element, to, duration) {
        if (duration <= 0) return;
        const diff = to - element.scrollTop;
        const perTick = diff / duration * 10;
        this.timer = setTimeout(() => {
          element.scrollTop += perTick;
          if (element.scrollTop === to) return;
          this.scrollToTop(element, to, duration - 10);
        }, 10);
      },

      //点击右边题序 获取到题目DOM 进行滚动操作
      handleItemClick(item, e) {
        let currentSpan = e.target || e;
        let allList = document.getElementsByClassName('ql-right-item');
        let questionList = document.getElementsByClassName('ql-item');
        let itemIndex = this.questionList.indexOf(item);
        let questionDom = questionList[itemIndex];
        console.log(item);
        console.log(questionDom.offsetTop);
        console.log(questionDom);
        //选中题目高亮显示
        //questionDom.style.boxShadow = "0px 0px 5px 3px #9e9e9e";
        //setTimeout(function () {
        //  questionDom.style.boxShadow = "none";
        //}, 2000);
        let scrollDistance = questionDom.offsetTop + 134; //相对父级容器高度加上头部高度即为滚动距离
        this.scrollToTop(this.$parent.$refs.dataContainer, itemIndex == 0 ? 0 : scrollDistance, 500);
        //伪数组处理统一背景颜色
        Array.prototype.slice.call(allList).forEach(item => {
          item.style.background = "#3c8fa2";
        })
        //将当前选中项修改选中色
        currentSpan.style.background = "#139c51";
      },

      //点击返回
      handleBackTo() {
        this.$refs.btnBack.style.display = 'none';
        this.$parent.isShowQuestions = false;
        this.$router.back(-1);
      },


      //折叠面板点击事件
      handleCollapseChange(val) {
        let questionIndex = val[0];
        if (questionIndex == "999") return;
        if (questionIndex && this.collapseList.indexOf(questionIndex) == -1 && questionIndex != "999") {
          this.collapseList.push(questionIndex);
          this.activeCollapseIndex = questionIndex;
        } else if (questionIndex == 0) {
          this.collapseList.push(questionIndex);
          this.activeCollapseIndex = questionIndex;
        } else {
          //console.log("加入异常", questionIndex);
          //console.log("加入异常", this.collapseList.indexOf(questionIndex));
        }
        this.activeCollapseIndex = this.collapseList;
      },

      //返回题目区域总分 字符串换算
      sumArr(arr) {
        return eval(arr.join('+'));
      }
    },

    mounted() {
      this.$parent.isShowQuestions = true;
      //this.isLoadingEcharts = true;
      let box = this.$refs.rightBox;
      let btnBack = this.$refs.btnBack;
      let that = this;
      //页面滚动时 右侧题目序号以及返回按钮的滚动
      this.$parent.$refs.dataContainer.addEventListener('scroll', () => {
        let isOverHeight = this.$parent.$refs.dataContainer.scrollTop >= 129; //判定右侧序号滚动距离是否到达临界值
        let isBackHeight = this.$parent.$refs.dataContainer.scrollTop >= 129; //判定右侧序号滚动距离是否到达临界值
        let t = 232 - this.$parent.$refs.dataContainer.scrollTop;
        box.style.top = isOverHeight ? "100px" : (t + 'px');
        btnBack.style.top = isBackHeight ? (this.$parent.$refs.dataContainer.scrollTop - 152)  + 'px' : '-1px';
        //btnBack.style.top = this.$parent.$refs.dataContainer.scrollTop > 146 ? (this.$parent.$refs.dataContainer.scrollTop - 146)  + 'px' : '20px';
      }, false)

      if (this.$route.query.QIndex) {
        let index = this.$route.query.QIndex - 1;
        let allList = document.getElementsByClassName('ql-right-item');
        this.handleCollapseChange([index.toString()]);
        this.activeCollapseIndex.push(index + 'answer');
        this.$nextTick(() => {
          that.handleItemClick(that.questionList[index], allList[index]);
        });

        setTimeout(function () {
          that.handleItemClick(that.questionList[index], allList[index]);
        },200)
      }
    },
  }
</script>


<style src="./QuestionList.css" scoped></style>

<style>
  .ql-item .ivu-collapse {
    border:0;
  }

    .ql-item .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
      color:#06a9bb;
    }
    .ql-item .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header > .ivu-icon {
      vertical-align:unset;
    }

    .ql-item .ivu-collapse > .ivu-collapse-item {
      border-top:0;
    }
</style>
