<template>
  <div class="achievement-container">
    <Row>
      <span class="component-title" style="margin-top:40px">{{$t('totalAnalysis.ach_title1')}}</span>
    </Row>
    <Row class-name="component-percents">
      <div class="percent-item fl-col-center" v-for="(item,index) in subjectPercent" :key="index" v-if="subjectList.length > 3 && item.name" >
        <span class="percent-name">{{item.name}}</span>
        <span class="percent-value"><span class="percent-line" :style="{background:colorList[index]}"></span>{{item.classRate}}</span>
        <span class="percent-grade-value">{{$t('totalAnalysis.ach_text2')}}：{{item.gradeRate}}</span>
        <span class="percent-area-value">{{$t('totalAnalysis.ach_text3')}}：{{item.areaRate}}</span>
      </div>

      <div  class="percent-item fl-col-center" v-for="(item,index) in subjectPercent" :key="index" v-if="subjectList.length <= 3 && item.name">
        <span class="percent-name">{{item.name}}</span>
        <span class="percent-value"><span class="percent-line" :style="{background:colorList[index]}"></span>{{item.classRate}}</span>
        <span class="percent-grade-value">{{$t('totalAnalysis.ach_text2')}}：{{item.gradeRate}}</span>
        <span class="percent-area-value">{{$t('totalAnalysis.ach_text3')}}：{{item.areaRate}}</span>
      </div>

    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ach_title2')}}</span>
    </Row>
    <Row>
      <BaseBar :echartsData="getBaseBarData" ref="baseBar"></BaseBar>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ach_title3')}}</span>
      <div>
        <BaseEntryBar :echartData="classDatas"></BaseEntryBar>
      </div>
      <!--<Col span="12">
    <span class="component-title">进线率统计</span>
    <BaseEntryLine :echartData="classDatas"></BaseEntryLine>
    </Col>-->
    </Row>
    <Divider />
    <EntryTables ref="entryTable"></EntryTables>
    <Divider />
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ach_title6')}}</span>
    </Row>
    <Row type="flex" justify="space-around" class-name="base-table-row">
      <Col span="24" class-name="achievement-table">
        <BaseTable :columns="tableColumns" :tableDatas="tableData" ref="achievementTable"></BaseTable>
      </Col>
    </Row>

  </div>
</template>

<script>
  import BaseBar from '@/components/student-analysis/total/BaseBar.vue'
  import BaseEntryBar from '@/components/student-analysis/total/BaseEntryBar.vue'
  import BaseLine from '@/components/student-analysis/total/BaseLine.vue'
  import BaseEntryLine from '@/components/student-analysis/total/BaseEntryLine.vue'
  import BaseCircle from '@/components/student-analysis/total/BaseCircle.vue'
  import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
  import EntryTables from '@/view/student-analysis/total-analysis/AchievementAnalysis/EntryTables.vue'
  export default {
    components: {
      BaseBar, BaseLine, BaseCircle, BaseEntryBar, BaseEntryLine, BaseTable,EntryTables
    },
    data() {
      return {
        subjectPercent: [],
        subjectList:[],
        colorList:['#ff6b68','#ffa1f4','#41b0c7','#1cd1a1','#83dc07'],
        tableData: [],
        baseBarData:[],
        classDatas:[],
        tableColumns: [
          {
            title: this.$t('totalAnalysis.base_class'),
            key: 'name',
            renderType: "renderClassName",
            filters: [
                {
                    label: this.$t('totalAnalysis.ach_table_text14'),
                    value: 1
                },
                {
                    label: this.$t('totalAnalysis.ach_table_text15'),
                    value: 2
                },
                {
                    label: this.$t('totalAnalysis.ach_table_text16'),
                    value: 3
                },

            ],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === 1) {
                return row.changesStatus == 1 && row.changesVal != 0;
              } else if (value === 2) {
                return row.changesStatus == -1 && row.changesVal != 0;
              } else {
                return row.changesStatus == 0
              }
            }
          },
          {
            title: this.$t('totalAnalysis.ach_text7'),
            sortable: true,
            key: 'totalNum'
          },
          {
            title: this.$t('totalAnalysis.ach_table_text3'),
            key: 'average',
            sortable: true,
          },
          {
            title: this.$t('totalAnalysis.ach_table_text4'),
            key: 'standardDeviation',
            sortable: true,
          },
          {
            title: this.$t('totalAnalysis.ach_table_text5'),
            key: 'overAverageRate',
            sortable: true,
          },
          {
            title: this.$t('totalAnalysis.ach_table_text1'),
            key: 'gradeRank',
            sortable: true,
            renderType:function(h, params) {
              const row = params.row;
              return h('span', {
                domProps: {
                  className: "badge-wrap"
                },
              }, [
                  h('span', {
                    domProps: {
                      className: 'table-rank-badge'
                    },
                    style: {
                      color: row.changesStatus == 1 ? '#0ccb0c' : '#ff5d5d'
                    },
                  }, (row.changesStatus == 1 && row.changesVal != 0) ? '+' + row.changesVal : (row.changesStatus == -1 && row.changesVal != 0) ? '-' + row.changesVal : ''),
                  h('span', {
                    domProps: {
                      className: "table-rank-value"
                    },
                  }, row.gradeRank),

                ]
              );
            }
          },
        ]
      }
    },

    created() {
      this.tableData = this.$store.state.totalAnalysis.classList;
      this.classDatas = this.$store.state.totalAnalysis.classList;
      this.baseBarData = this.$store.state.totalAnalysis.baseBarData;
      this.subjectPercent = this.$store.state.totalAnalysis.subjectPercent;

    },
    methods: {


    },
    computed: {
      //获取最新柱状图数据
      getBaseBarData() {
        let list = this.$store.state.totalAnalysis.baseBarData;
        return list;
      },
      getSubjectList() {
        let list = this.$store.state.totalAnalysis.subjectList;
        return list;
      }
    },

    mounted() {
      this.$parent.dataSelectIndex = 0;
      this.$refs.achievementTable.$el.childNodes[2].style.borderRight = "0";
      this.subjectList = this.$store.state.totalAnalysis.subjectList;
    },

    watch: {
      getSubjectList(val) {
        this.subjectList = val;
        this.subjectPercent.forEach((item,index) => {
          item.name = val[index] || null
        })
      }
    }

  }
</script>


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


