<template>
  <div class="achievement-container">
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ach_title4')}}</span>
    </Row>
    <Row class-name="base-table-row">
      <BaseTable :columns="entryNumberColumns" :tableDatas="echartData" :pageSize="20" :tips="'* 绿色代表进线，蓝色代表踩线'" @on-sort-change='changeSort'></BaseTable>
    </Row>
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ach_title5')}}</span>
    </Row>
    <Row class-name="base-table-row">
      <BaseTable :columns="entryRateColumns" :tableDatas="classList" :isScroll="false" ref="rateTable"></BaseTable>
    </Row>
  </div>
</template>

<script>
  import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
  export default {
    components: {
      BaseTable
    },
    data() {
      return {
        echartData: [],
        entryData: [],
        footfaultData: [],
        tipContent:"asdasdasd",
        classList: [],
        joinNum:0,
        entryNumberColumns: [
          {
            title: this.$t('totalAnalysis.base_name'),
            key: 'name',
            width: 100,
            fixed:"left"
          },
          {
            title: this.$t('totalAnalysis.base_class'),
            width:150,
            key: 'className',
            renderType: function (h, params) {
              return h('span', '初一' + Math.ceil(Math.random() * 10) + '班')
            }
          },
          {
            title: this.$t('totalAnalysis.ach_table_text1'), 
            width:150,
            renderType: 'renderRank'
          },
          {
            title: this.$t('totalAnalysis.ach_table_text2'),
            sortable: true,
            width:150,
            renderType: 'renderEntry',
            filters: [
                {
                    label: this.$t('totalAnalysis.ach_table_text6'),
                    value: 1
                },
                {
                    label: this.$t('totalAnalysis.ach_table_text7'),
                    value: 2
                }
            ],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === 1) {
                return row.score > 550;
                } else if (value === 2) {
                    return row.score > 550  && row.score < 580;
                }
            }
          },
          {
            title: '语文',
            sortable: true,
            width:150,
            renderType: function (h, params) {
              return h('span', params.row.chinese);
            }
          },
          {
            title: '数学',
            sortable:true,
            width: 150,
            key:'math',
            renderType: function (h, params) {
              return h('span', params.row.math);
            },
            sortMethod: (a, b, type) => {
              if (type === 'desc') {
                console.log(a);
                return parseInt(a) < parseInt(b) ? 1 : -1
              } else {
                console.log(a);
                console.log(b);
                return parseInt(a) > parseInt(b) ? 1 : -1
              }
            }
          },
          {
            title: '英语',
            sortable: true,
            width:150,
            renderType: function (h, params) {
              return h('span', params.row.english);
            }
          },
          {
            title: '化学',
            sortable: true,
            width:150,
            renderType: function (h, params) {
              return h('span', params.row.chemistry);
            }
          },
          {
            title: '物理',
            sortable: true,
            width:150,
            renderType: function (h, params) {
              return h('span', params.row.physics);
            }
          },
          {
            title: '生物',
            sortable: true,
            width:150,
            renderType: function (h, params) {
              return h('span', params.row.biology);
            }
          }
        ],
        
        entryRateColumns: [
          {
            title: this.$t('totalAnalysis.ach_table_text1'),
            key: 'gradeRank',
            sortable: true
          },
          {
            title: this.$t('totalAnalysis.base_class'),
            key: 'name'
          },
          {
            title: this.$t('totalAnalysis.ach_text8'),
            key: 'entryNum',
            sortable: true
          },
          {
            title: this.$t('totalAnalysis.ach_text7'),
            key: 'totalNum',
            sortable: true
          },
          {
            title: this.$t('totalAnalysis.ach_text9'),
            sortable: true,
            renderType: function (h, params) {
              return h('span', params.row.entryRate + '%');
            }
          },
          //{
          //  title: '进线率变化',
          //  key: 'people',
          //  renderType: 'renderRank'
          //},
        ]
      }
    },

    created() {
      let scatter = this.$store.state.totalAnalysis.scatter;
      this.classList = this.$store.state.totalAnalysis.classList;
      
      let tableList = scatter.map(item => item.achievement);

      for (let i = 0; i < 4; i++) {
        tableList.push.apply(tableList, tableList); //复制班级数据 创建模拟年级数据
      }

      //tableList.length = parseInt(JSON.parse(sessionStorage.getItem('c_exam')).joinNum);
      //tableList.length = this.joinNum;

      this.echartData = tableList;
      //console.log(tableList);

      //scatter.forEach((item, index) => {
      //  tableList[index].changesStatus = item.changesStatus;
      //  tableList[index].changesVal = item.changesVal;

      //})

      //console.log(JSON.stringify(scatter));
    },

    methods: {
      changeSort(column, key, order) {
        console.log(column);
        console.log(key);
        console.log(order);
      }

    },

    computed: {
      getEntryData() {
        //console.log(this.$store.state.totalAnalysis.entryData)
        return this.$store.state.totalAnalysis.entryData;
      }
    },
    watch: {
      getEntryData(val) {

      }
    },

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


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


