<template>
  <div class="scatter-container">
    <Row>
      <Col span="12">
      <span class="component-title">{{$t('totalAnalysis.ka_title4')}}</span>
      <BaseDetailBar :echartData="knowledgeData" @handleItemClick="handleItemClick" ref="detailsBar"></BaseDetailBar>
      </Col>
      <Col span="12">
      <span class="component-title">{{$t('totalAnalysis.ka_title5')}}<span style="font-size:14px;font-weight:bold;margin-left:20px;color:#66cccc">{{$t('totalAnalysis.ka_text2')}}：{{currentPoint}}</span></span>
      <div style="padding:0 50px;">
        <BaseMyTable :columns="detailsColumns" :tableDatas="tableData" ref="detailsTable"></BaseMyTable>
      </div>
      </Col>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ka_title6')}}</span>
      <div style="padding:20px 50px;">
        <BaseMyTable :columns="tableColumns" :tableDatas="numData" ref="numTable" :tips="$t('totalAnalysis.ka_tip1')"></BaseMyTable>
      </div>
      <!--<span style="/*font-size:14px;font-weight:bold;margin-left:60px;color:#66cccc*/"></span>-->
    </Row>
  </div>
</template>

<script>
  import Mock from 'mockjs'
  import BaseDetailBar from '@/components/student-analysis/total/BaseKnowledgeDetail.vue'
  import BaseMyTable from '@/components/student-analysis/total/BaseMyTable.vue'
  export default {
    components: {
      BaseDetailBar, BaseMyTable
    },
    data() {
      return {
        tableData: [],
        classDatas: [],
        currentPoint: "",
        tipContent: "* RH:高分区段  /  RL:低分区段 （模拟数据,仅供参考）",
        knowledgeData: [],
        numData: [],
        tableColumns: [
          //{
          //  title: '题号',
          //  key: 'id',
          //  width:100
          //},
          {
            title: this.$t('totalAnalysis.ka_table_text1'),
            key: 'knowledgePoint',
            minWidth: 150
          },
          {
            title: this.$t('totalAnalysis.ka_table_text4'),
            key: 'score',
            minWidth: 100
          },
          {
            title: this.$t('totalAnalysis.ka_table_text7'),
            key: 'hardList',
            renderType: 'renderHard',
            width: 250
          },
          {
            title: this.$t('totalAnalysis.ka_table_text8'),
            key: 'averageScoreRate',
            renderType: function (h, params) {
              return h('span', params.row.averageScoreRate + '%');
            },
            sortable: true,
            minWidth: 100
          },
          {
            title: this.$t('totalAnalysis.ka_table_text9'),
            key: 'falseNum',
            sortable: true,
            minWidth: 100
          },
          {
            title: this.$t('totalAnalysis.ka_table_text10'),
            key: 'RH',
            sortable: true,
            minWidth: 100
          },
          {
            title: this.$t('totalAnalysis.ka_table_text11'),
            key: 'RL',
            sortable: true,
            minWidth: 100
          },
        ],
        detailsColumns: [
          {
            title: this.$t('totalAnalysis.base_name'),
            key: 'name',
            minWidth: 100
          },
          {
            title: this.$t('totalAnalysis.base_class'),
            key: 'className',
            width: 120
          },
          {
            title: this.$t('totalAnalysis.base_id'),
            key: 'id',
            width: 120
          },
          {
            title: this.$t('totalAnalysis.ka_table_text4'),
            key: 'score',
            minWidth: 100
          },
          {
            title: this.$t('totalAnalysis.ka_table_text5'),
            key: 'score',
            minWidth: 100,
            renderType: function (h, params) {
              return h('span', params.row.score - Math.floor(Math.random() * 4))
            }
          },
          {
            title: this.$t('totalAnalysis.ka_table_text6'),
            key: 'scoreRate',
            renderType: 'renderPercent',
            minWidth: 100
          },
          //{
          //  title: '历次得分率趋势',
          //  renderType:"renderLineChange"
          //},

        ]
      }
    },
    created() {

      let memberList = this.$store.state.totalAnalysis.memberList;
      let scatter = this.$store.state.totalAnalysis.scatter;
      let testScatter = this.$store.state.totalAnalysis.testScatter;
      let knowledgeArr = testScatter.map(item => item.tableData);
      //this.numData = knowledgeArr;

      this.tableData = Mock.mock({
        'list|60': [{
          "id|+1": 1,
          "className|1": ['初一5班'],
          "name": '@cname',
          "score": 4,
          "averageScoreRate|40-80": 40,
          "scoreRate|50-100": 50
        }],
      }).list;

      this.numData = Mock.mock({
        'list|10': [{
          "id|+1": 1,
          "knowledgePoint|1": ['算法平均值', '一元二次方程', '全等三角形性质'],
          "score|1": ['4', '5', '10'],
          "averageScoreRate|40-80": 40,
          "falseNum|15-30": 20,
          "RH|5-15": 20,
          "RL|5-15": 20,
        }],
      }).list;


      this.numData.forEach((item, index) => {
        item.knowledgePoint = this.knowPoints[index].knowledgePoint;
        item.score = knowledgeArr[index].score;
        item.hardList = scatter[index].hardList;
      })
    },

    methods: {
      //点击柱状图某个点事件
      handleItemClick(item) {
        this.currentPoint = item.name;
        let newList = Mock.mock({
          'list|60': [{
            "id|+1": 1,
            "className|1": ['初一5班'],
            "name": '@cname',
            "score|1-10": 1,
            "averageScoreRate|40-80": 40,
            "scoreRate|50-100": 50
          }],
        }).list;
        let randomVal = 4 + Math.floor(Math.random() * 6);
        this.tableData.forEach((item, index) => {
          item.score = randomVal;
          item.scoreRate = newList[index].scoreRate;
        })
      }
    },
    mounted() {
      this.$refs.detailsTable.$el.childNodes[2].style.borderRight = "0";
      this.$refs.numTable.$el.childNodes[2].style.borderRight = "0";
    },
    computed: {
      knowPoints() {
        return this.$store.state.totalAnalysis.exerciseList;
      }
    },
    watch: {
      knowledgeData(val) {
        this.knowledgeData = val;
        this.currentPoint = val[0].knowledgePoint;
      },
      knowPoints(val) {
        let scatter = this.$store.state.totalAnalysis.scatter;
        let testScatter = this.$store.state.totalAnalysis.testScatter;
        let knowledgeArr = testScatter.map(item => item.tableData);
        this.numData.forEach((item, index) => {
          item.knowledgePoint = val[index].knowledgePoint;
          item.score = knowledgeArr[index].score;
          item.hardList = scatter[index].hardList;
        })
      }
    }
  }
</script>


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


