<template>
  <div class="scatter-container">
    <Row>
      <Col span="12">
      <span class="component-title">{{$t('totalAnalysis.sca_title1')}}</span>
      <BaseScatter @handleItemClick="handleItemClick"></BaseScatter>
      </Col>
      <Col span="12">
      <div class="scatter-statistics">
        <div class="scatter-table-line">
          <span>{{$t('totalAnalysis.sca_text1')}}</span>
          <span>{{$t('totalAnalysis.sca_text2')}}</span>
          <span>{{$t('totalAnalysis.sca_text3')}}</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>A</span>
          <span>{{$t('totalAnalysis.sca_text5')}}</span>
          <span>8</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>A-</span>
          <span>{{$t('totalAnalysis.sca_text6')}}</span>
          <span>2</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>B</span>
          <span>{{$t('totalAnalysis.sca_text7')}}</span>
          <span>17</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>B-</span>
          <span>{{$t('totalAnalysis.sca_text8')}}</span>
          <span>23</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>C</span>
          <span>{{$t('totalAnalysis.sca_text9')}}</span>
          <span>5</span>
        </div>
        <Divider />
        <div class="scatter-table-line">
          <span>C-</span>
          <span>{{$t('totalAnalysis.sca_text10')}}</span>
          <span>5</span>
        </div>
      </div>
      </Col>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.sca_title2')}}</span>
      <div style="padding:20px 50px;">
        <BaseTable :columns="tableColumns" :tableDatas = "tableData" ref="scatterTable" showSelect @onSelectChange="onSelectChange"></BaseTable>
      </div>
    </Row>
  </div>
</template>

<script>
  import BaseScatter from '@/components/student-analysis/total/BaseScatter.vue'
  import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
import { Set } from 'core-js';
  export default {
    components: {
      BaseScatter, BaseTable
    },
    data() {
      return {
        tableData:[],
        tableColumns: [
          {
            title: this.$t('totalAnalysis.base_name'),
            key: 'name',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.base_class'),
            key: 'className',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.base_id'),
            key: 'id',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.base_score'),
            sortable: true,
            key: 'score',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.sca_table_text1'),
            key: 'trueNum',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.sca_table_text2'),
            key: 'falseNum',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.sca_table_text3'),
            key: 'hardList',
            minWidth:120,
            renderType: 'renderHard'
          },
          {
            title: this.$t('totalAnalysis.sca_table_text4'),
            key: 'carefulList',
            minWidth:120,
            renderType: 'renderCareful'
          },
          {
            title: this.$t('totalAnalysis.sca_table_text5'),
            key: 'x',
            sortable: true,
            minWidth:120
          },
          {
            title: this.$t('totalAnalysis.sca_table_text6'),
            key: 'areaName',
            minWidth:100
          },
          //{
          //  title: '排名情况',
          //  key:'rank',
          //  renderType: 'renderRank'
          //}
        ]
      }
    },
    created() {
      let memberList = this.$store.state.totalAnalysis.scatter;
      this.tableData = memberList;
      this.onSelectChange(1);
    },

    methods: {

      //点击落点图某个点事件
      handleItemClick(item) {
        let memberId = item.data[item.data.length - 1];
        let member = this.tableData.filter(item => item.id == memberId)[0];
              this.tableData.unshift(member);
      },


      onSelectChange(val) {
        let memberList = this.$store.state.totalAnalysis.scatter;
        let list = ['A', 'A-', 'B', 'B-', 'C', 'C-'];
        memberList.forEach(item => {
          item.score = 90 - Math.ceil(Math.random() * 30);
          item.trueNum = 20 - Math.ceil(Math.random() * 10);
          item.falseNum = 20 - item.trueNum;
          item.hardList = this.getRandomArr();
          item.carefulList = this.getRandomArr();
          item.x = (Math.ceil(Math.random() * 100) * 0.01).toFixed(2);
          item.areaName = list[Math.ceil(Math.random() * 5)];
        })
        this.tableData = memberList;
      },

      getRandomArr() {
        let arr = [];
        for (let i = 0; i < 4; i++) {
          arr.push(Math.ceil(Math.random() * 19))
        }

        return [...new Set(arr)].sort(function (a, b) { return a-b});
      }

    },

    mounted() {
       this.$refs.scatterTable.$el.childNodes[2].style.borderRight = "0";
    },
  }
</script>
 

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


