<template>
  <div class="scatter-container">
    <Row>
      <Col span="12" style="position:relative">
      <span class="component-title">{{$t('totalAnalysis.ka_title1')}}</span>
      <BasePie v-if="isShowPie" @handleItemClick="handleItemClick"></BasePie>
      <BaseKnowledgeBar v-else-if="!isShowPie" :echartData="barData"></BaseKnowledgeBar>
      <span class="pie-to-bar" @click="changePieOrBar"><Icon :type="isShowPie ? 'ios-podium' : 'ios-pie'" />{{isShowPie?$t('totalAnalysis.ka_chart_text1'):$t('totalAnalysis.ka_chart_text2')}}</span>
      </Col>
      <Col span="12">
      <span class="component-title">{{$t('totalAnalysis.ka_title2')}}</span>
      <BaseRadar></BaseRadar>
      </Col>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">
        {{$t('totalAnalysis.ka_title3')}}
        <span style="font-size:14px;font-weight:bold;margin-left:20px;color:#66cccc">
          {{$t('totalAnalysis.ka_text1')}}：{{currentBlock}}
          <Icon type="ios-close-circle-outline" @click="refresh" style="cursor:pointer;" v-show="currentBlock != '全部'" />
        </span>
      </span>
      <div style="padding:20px 50px;position:relative">
        <!--<span class="btn-class-score" @click="handleGoDetails">查看班级得分<Icon type="ios-arrow-dropright" /></span>-->
        <BaseMyTable :columns="tableColumns" :tableDatas="knowledgeData"></BaseMyTable>
      </div>
    </Row>
    <Divider />
    <ScoreDetails ref="detailsRef"></ScoreDetails>
  </div>
</template>

<script>
  import BasePie from '@/components/student-analysis/total/BasePie.vue'
  import BaseKnowledgeBar from '@/components/student-analysis/total/BaseKnowledgeBar.vue'
  import BaseRadar from '@/components/student-analysis/total/BaseRadar.vue'
  import BaseMyTable from '@/components/student-analysis/total/BaseMyTable.vue'
  import ScoreDetails from '@/view/student-analysis/total-analysis/KnowledgeAnalysis/ScoreDetails.vue'
  export default {
    components: {
      BasePie, BaseMyTable, BaseRadar,BaseKnowledgeBar,ScoreDetails
    },
    data() {
      return {
        isShowPie: true,
        currentBlock:"全部",
        tableData: [],
        classDatas: [],
        barData:[],
        tableColumns: [
          {
            title: this.$t('totalAnalysis.ka_table_text1'),
            key: 'knowledgePoint',
            width:200
          },
          {
            title: this.$t('totalAnalysis.ka_table_text2'),
            key: 'level',
            width:100
          },
          {
            title: this.$t('totalAnalysis.ka_table_text3'),
            key: 'gradeScoreRate',
            sortable: true,
            width:150
          },
          {
            title: '1班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '2班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '3班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '4班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '5班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '6班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '7班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '8班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '9班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
          {
            title: '10班',
            key: 'gradeScoreRate',
            sortable: true,
            width:120
          },
        ]
      }
    },
    created() {
      let classList = this.$store.state.totalAnalysis.classList;
      let exerciseList = this.$store.state.totalAnalysis.exerciseList;
      this.tableData = classList;
      this.knowledgeData = exerciseList;
      this.barData = this.$store.state.totalAnalysis.pieData;

      this.isShowPie = !(this.knowledgeData.length > 10);

      let knowList = ['方程与不等式','图形的性质','统计与概率','函数','图形的相似','锐角三角函数','几何图形初步','投影与视图']
      let levelList = ['知识','理解','评鉴','综合','分析','应用']
      let typeList = ['单选','多选','判断','问答','填空','问答']
      //exerciseList.forEach(item => {
      //  item.knowledgePoint = knowList[Math.ceil(Math.random() * 7)]
      //  item.level = levelList[Math.ceil(Math.random() * 5)]
      //  item.type = typeList[Math.ceil(Math.random() * 5)]
      //  item.gradeScoreRate = this.randomNum(60,90).toString() + '%'
      //})

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

    },

    methods: {
      randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * ( maxNum - minNum + 1 ) + minNum, 10);
            //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
            break;
          default:
            return 0;
            break;
        }
      }, 
      changePieOrBar() {
        this.isShowPie = ! this.isShowPie;
      },

      handleGoDetails() {
        this.isShowPie = true;
        this.$router.push("/total/knowledge/details");

      },

      //点击玫瑰图某个知识点事件
      handleItemClick(item) {
        let exerciseList = this.$store.state.totalAnalysis.exerciseList;
        this.currentBlock = item.data.name;
        let blockId = item.data.id;
        this.knowledgeData = exerciseList.filter(item => item.blockId == blockId);
        this.$refs.detailsRef.knowledgeData = this.knowledgeData;
      },

      refresh() {
        this.currentBlock = '全部';
        this.knowledgeData = this.$store.state.totalAnalysis.exerciseList;
        this.$refs.detailsRef.knowledgeData = this.$store.state.totalAnalysis.exerciseList;;
      }

    },
    mounted() {
      this.$refs.detailsRef.knowledgeData = this.$store.state.totalAnalysis.exerciseList;
    },
    computed: {
      //获取最新柱状图数据
      getPointsData() {
        let list = this.$store.state.totalAnalysis.exerciseList;
        this.knowledgeData = list;
        let a = list.map(item => item.y);
        return list;
      }
    },
    watch: {
      getPointsData(val) {
        this.knowledgeData = [...this.$store.state.totalAnalysis.exerciseList];
        let tempItem = { data: { name: this.knowledgeData[0].knowledgePoint, id: this.knowledgeData[0].blockId } };
        this.handleItemClick(tempItem);
        this.refresh();


    }
  }
  }
</script>


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


