<template>
  <div class="scatter-container">
    <Row>
      <Col span="12">
      <span class="component-title">{{$t('totalAnalysis.ta_title1')}}</span>
      <BaseTestScatter @handleItemClick="handleItemClick"></BaseTestScatter>
      </Col>
      <Col span="12">
      <div class="scatter-statistics">
        <div class="scatter-table-line">
          <span>{{$t('totalAnalysis.ta_text1')}}</span>
          <span>{{$t('totalAnalysis.ta_text2')}}</span>
          <span>{{$t('totalAnalysis.ta_text3')}}</span>
          <span>{{$t('totalAnalysis.ta_text4')}}</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>A</span>
          <span class="scatter-explain" :title="$t('totalAnalysis.ta_text6')">{{$t('totalAnalysis.ta_text6')}}</span>
          <span>{{A1List.length}}</span>
          <div class="index-box"><span v-for="item in A1List" class="scatter-exercise-index" @click="handleIndexClick(item)">{{item > 9 ? item : '0' + item}}</span></div>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>A`</span>
          <span class="scatter-explain" :title="$t('totalAnalysis.ta_text7')">{{$t('totalAnalysis.ta_text7')}}</span>
          <span>{{A2List.length}}</span>
          <div class="index-box"><span v-for="item in A2List" class="scatter-exercise-index" @click="handleIndexClick(item)">{{item > 9 ? item : '0' + item}}</span></div>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>B</span>
          <span class="scatter-explain" :title="$t('totalAnalysis.ta_text8')">{{$t('totalAnalysis.ta_text8')}}</span>
          <span>{{B1List.length}}</span>
          <div class="index-box"><span v-for="item in B1List" class="scatter-exercise-index" @click="handleIndexClick(item)">{{item > 9 ? item : '0' + item}}</span></div>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>B`</span>
          <span class="scatter-explain" :title="$t('totalAnalysis.ta_text9')">{{$t('totalAnalysis.ta_text9')}}</span>
          <span>{{B2List.length}}</span>
          <div class="index-box"><span v-for="item in B2List" class="scatter-exercise-index" @click="handleIndexClick(item)">{{item > 9 ? item : '0' + item}}</span></div>
        </div>
      </div>
      </Col>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ta_title2')}} <span style="font-size:14px;font-weight:bold;margin-left:20px;color:#66cccc">{{$t('totalAnalysis.ta_text5')}} ：{{currentExerciseIndex}}</span></span>
      <div>
        <BaseLineBar :echartData="rightTableData" ref="lineBar"></BaseLineBar>
      </div>
      <!--<Col span="12">
      <span class="component-title"></span>
      <div style="padding:55px 30px 0 30px">
        <BaseTable :columns="rightRateColumns" :tableDatas="rightTableData" ref="rightRateTable"></BaseTable>
      </div>
      </Col>-->
    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ta_title3')}}</span>
      <div style="padding:20px 50px;">
        <BaseTable :columns="tableColumns" :tableDatas="tableData" ref="analysisTable" :tips="$t('totalAnalysis.ta_table_tip2')"></BaseTable>
      </div>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ta_title4')}}</span>
      <div style="padding:20px 50px;">
        <BaseTable :columns="exerciseColumns" :tableDatas="tableData" ref="scoreRateTable" :tips="$t('totalAnalysis.ta_table_tip1')"></BaseTable>
      </div>
    </Row>
  </div>
</template>

<script>
  import BaseTestScatter from '@/components/student-analysis/total/BaseTestScatter.vue'
  import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
  import BaseLineBar from '@/components/student-analysis/total/BaseLineBar.vue'
  export default {
    components: {
      BaseTestScatter, BaseTable, BaseLineBar
    },
    data() {
      return {
        tableData: [],
        rightTableData: [],
        currentExerciseIndex: 0,
        A1List:[1,2,3,4,5,6,7,8,9,10,18],
        A2List:[11,12,13,19],
        B1List:[15,16,17],
        B2List:[14,20],
        tableColumns: [
          {
            title: this.$t('totalAnalysis.ta_table_text1'),
            key: 'id',
            width: 100,
            renderType:'renderEventIndex'
          },
          {
            title: this.$t('totalAnalysis.ta_table_text2'),
            key: 'type',
            minWidth:100
          },
          //{
          //  title: '题干',
          //  key: 'stem',
          //},
          {
            title:this.$t('totalAnalysis.ta_table_text3'),
            key: 'knowledgePoint',
            minWidth:150
          },
          {
            title: this.$t('totalAnalysis.sca_table_text6'),
            key: 'areaName',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.ta_table_text4'),
            key: 'score',
            minWidth:80
          },
          {
            title: this.$t('totalAnalysis.ta_table_text5'),
            key: 'diff',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.ta_table_text6'),
            key: 'identify',
            minWidth:120
          },
          {
            title: 'R1',
            key: 'R1',
            sortable: true,
            minWidth:100
          },
          {
            title: 'R2',
            key: 'R2',
            sortable: true,
            minWidth:100
          },
          {
            title: 'R3',
            sortable: true,
            key: 'R3',
            minWidth:100
          },
          {
            title: 'R4',
            sortable: true,
            key: 'R4',
            minWidth:100
          },
          {
            title: 'R5',
            sortable: true,
            key: 'R5',
            minWidth:100
          },
          {
            title: 'R6',
            sortable: true,
            key: 'R6',
            minWidth:100
          }
        ],
        exerciseColumns: [
          {
            title: this.$t('totalAnalysis.ta_table_text1'),
            key: 'id',
            width: 100,
            renderType:'renderEventIndex'
          },
          {
            title: this.$t('totalAnalysis.ta_table_text7'),
            key: 'classScoreRate',
            sortable: true,
            width:150
          },
          {
            title: this.$t('totalAnalysis.ta_table_text8'),
            key: 'gradeScoreRate',
            sortable: true,
            width:150
          },
          {
            title: this.$t('totalAnalysis.ta_table_text9'),
            key: 'areaScoreRate',
            sortable: true,
            width:150
          },
          {
            title: this.$t('totalAnalysis.ta_table_text10'),
            key: 'highScoreRate',
            sortable: true,
            width:150
          },
          {
            title: this.$t('totalAnalysis.ta_table_text11'),
            key: 'lowScoreRate',
            sortable: true,
            width:150
          },
          {
            title: '1班',
            key: 'R1',
            sortable: true,
            width:150
          },
          {
            title: '2班',
            key: 'R2',
            sortable: true,
            width:150
          },
          {
            title: '3班',
            key: 'R3',
            sortable: true,
            width:150
          },
          {
            title: '4班',
            key: 'R4',
            sortable: true,
            width:150
          },
          {
            title: '5班',
            key: 'R5',
            sortable: true,
            width:150
          },
          {
            title: '6班',
            key: 'R6',
            sortable: true,
            width:150
          },
          {
            title: '7班',
            key: 'R1',
            sortable: true,
            width:150
          },
          {
            title: '8班',
            key: 'R2',
            sortable: true,
            width:150
          },
          {
            title: '9班',
            key: 'R3',
            sortable: true,
            width:150
          },
          {
            title: '10班',
            key: 'R4',
            sortable: true,
            width:150
          }
        ],
        rightRateColumns: [
          {
            title: '班级',
            key: 'name'
          },
          {
            title: '得分率',
            key: 'entryRate',
            sortable: true,
            renderType: function (h, params) {
               return h('span', params.row.entryRate + '%');
            }
          },
          {
            title: '总人数',
            key: 'totalNum',
            sortable: true
          },
          {
            title: '答对人数',
            sortable: true,
            key: 'entryNum'
          },
        ]
      }
    },
    created() {
      let classList = this.$store.state.totalAnalysis.classList;
      let testScatter = this.$store.state.totalAnalysis.testScatter;
      let knowledgeArr = testScatter.map(item => item.tableData);
      this.tableData = knowledgeArr;
      this.rightTableData = classList;

    },

    methods: {
       //点击落点图某个点事件
      handleItemClick(item) {
        //console.log(item);
        this.currentExerciseIndex = item.data[item.data.length - 1];
        let classList = this.$store.state.totalAnalysis.classList;
        classList.forEach(item => {
          item.entryRate = 90 - Math.ceil(Math.random() * 30);
        })

        //单题得分率联动
        this.$refs.lineBar.drawLine(classList);
        this.$refs.lineBar.gradeRate = 90 - Math.ceil(Math.random() * 30);
        this.$refs.lineBar.areaRate = 90 - Math.ceil(Math.random() * 30);

        //题目编号联动
        let indexDomList = Array.prototype.slice.call(document.getElementsByClassName('scatter-exercise-index'));
        let hignlightIndexDom = indexDomList.filter(item => item.innerText == this.currentExerciseIndex);
        indexDomList.forEach(item => {
          item.style.background = "transparent";
        })
        hignlightIndexDom[0].style.background = "#018b99";
        hignlightIndexDom[0].style.borderRadius = "50%";
      },

      handleIndexClick(index) {
        this.$router.push({ path: '/total/questionList', query: { QIndex : index}})
      }

    },

    mounted() {
      this.$refs.analysisTable.$el.childNodes[2].style.borderRight = "0";
      this.handleItemClick({data:[1]});

    },
  }
</script>


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


