<template>
  <div class="achievement-container">
    <Row>
      <span class="class-info">
        <Icon type="ios-ribbon" />{{$t('totalAnalysis.ach_text10')}}: <span style="color:#0bdfc4;font-size:16px;margin-right:20px"> {{className}} </span> {{$t('totalAnalysis.ach_text11')}}  <span style="color:#0bdfc4;font-size:20px"> 60 </span>
        <span class="class-info-back">
          <Button type="primary" @click="goBack">
            {{$t('totalAnalysis.ach_text12')}}
          </Button>
        </span>
      </span>
    </Row>
    <Row>
      <span class="component-title">{{$t('totalAnalysis.ach_title7')}}</span>
    </Row>
    <Row>
      <!--<div class="early-warning-tab">
        <span :class="warningIndex == 0 ? 'early-warning-active': '' " @click="warningTabClick('0')">百分等级（PR）</span>
      </div>-->
    </Row>
    <Row class-name="base-table-row">
      <BaseTable :columns="earlyPercentColumns" :tableDatas="tableData" ref="percentTable" v-show="warningIndex == 0" showSelect @onSelectChange="onSelectChange"></BaseTable>
      <!--<BaseTable :columns="earlyScoreColumns" :tableDatas="tableData" ref="scoreTable" v-show="warningIndex == 1"></BaseTable>-->
    </Row>
    <Row class-name="averageBarRow">
      <span class="component-title">{{$t('totalAnalysis.ach_title8')}}</span>
      <div class="sort-box">
        <span style="font-size:14px;margin-right:10px;color: #a9a9a9;">{{$t('totalAnalysis.ach_chart_text1')}}:</span>
        <Select v-model="sortValue" style="width:160px" @on-change="handleSort">
          <Option v-for="(item,index) in sortArr" :value="index" :label="item" :key="index"></Option>
        </Select>
      </div>
    </Row>
    <Row>
      <div id="stuAverageBar"></div>
    </Row>
  </div>
</template>

<script>
  import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
  export default {
    components: {
      BaseTable
    },
    data() {
      return {
        echartData: [],
        tableData: [],
        warningIndex: 0,
        sortValue: 0,
        className:"",
        sortArr: [this.$t('totalAnalysis.ach_chart_text2'), this.$t('totalAnalysis.ach_chart_text3'), this.$t('totalAnalysis.ach_chart_text4')],
        earlyPercentColumns: [
          {
            title: this.$t('totalAnalysis.base_name'),
            key: 'name',
            fixed: "left",
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.base_id'),
            key: 'id',
            minWidth:120
          },
          {
            title: this.$t('totalAnalysis.ach_table_text2'),
            sortable: true,
            key: 'chinese',
            minWidth:100
          },
          {
            title: this.$t('totalAnalysis.ach_table_text11'),
            key: 'classPR',
            sortable: true,
            minWidth:120,
            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.classPR),

                ]
              );
            }
          },
          {
            title: this.$t('totalAnalysis.ach_table_text8'),
            key: 'classPR',
            minWidth:120,
            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.classRank),

                ]
              );
            }
          },
          {
            title: this.$t('totalAnalysis.ach_table_text12'),
            key: 'gradePR',
            minWidth:120,
            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.changesStatus2 == 1 ? '#0ccb0c' : '#ff5d5d'
                    },
                  }, (row.changesStatus2 == 1 && row.changesVal2 != 0) ? '+' + row.changesVal2 : (row.changesStatus2 == -1 && row.changesVal2 != 0) ? '-' + row.changesVal2 : ''),
                  h('span', {
                    domProps: {
                      className: "table-rank-value"
                    },
                  }, row.gradePR),

                ]
              );
            }
          },
          {
            title: this.$t('totalAnalysis.ach_table_text9'),
            key: 'gradePR',
            minWidth:120,
            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.changesStatus2 == 1 ? '#0ccb0c' : '#ff5d5d'
                    },
                  }, (row.changesStatus2 == 1 && row.changesVal2 != 0) ? '+' + row.changesVal2 : (row.changesStatus2 == -1 && row.changesVal2 != 0) ? '-' + row.changesVal2 : ''),
                  h('span', {
                    domProps: {
                      className: "table-rank-value"
                    },
                  }, row.gradeRank),

                ]
              );
            }
          },
          {
            title: this.$t('totalAnalysis.ach_table_text13'),
            key: 'areaPR',
            minWidth:120,
            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.changesStatus3 == 1 ? '#0ccb0c' : '#ff5d5d'
                    },
                  }, (row.changesStatus3 == 1 && row.changesVal3 != 0) ? '+' + row.changesVal : (row.changesStatus3 == -1 && row.changesVal3 != 0) ? '-' + row.changesVal3 : ''),
                  h('span', {
                    domProps: {
                      className: "table-rank-value"
                    },
                  }, row.areaPR),

                ]
              );
            }
          },
          {
            title: this.$t('totalAnalysis.ach_table_text10'),
            key: 'areaPR',
            sortable: true,
            minWidth:120,
            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.changesStatus3 == 1 ? '#0ccb0c' : '#ff5d5d'
                    },
                  }, (row.changesStatus3 == 1 && row.changesVal3 != 0) ? '+' + row.changesVal3 : (row.changesStatus3 == -1 && row.changesVal3 != 0) ? '-' + row.changesVal3 : ''),
                  h('span', {
                    domProps: {
                      className: "table-rank-value"
                    },
                  }, row.areaRank),

                ]
              );
            }
          },
        ],
      }
    },

    created() {
      console.log(this.$route);
      this.className = this.$route.params.name;
      let memberList = this.$store.state.totalAnalysis.memberList;
      this.tableData = this.$store.state.totalAnalysis.memberList;
      this.echartData = memberList;

      console.log(JSON.stringify(memberList));
    },

    methods: {
      warningTabClick(index) {
        this.warningIndex = index;
      },

      handleSort(index) {
        let memberList = [...this.$store.state.totalAnalysis.memberList];
        if (index == 0) {
          this.echartData = memberList.sort(function (a, b) { return Number(b.id) - Number(a.id) });
        } else if (index == 1) {
          this.echartData = memberList.sort(function (a, b) { return Number(b.score) - Number(a.score) });
        } else {
          this.echartData = memberList.sort(function (a, b) { return Number(b.score) - Number(a.score) }).reverse();
        }
        this.drawLine(this.echartData);
      },

      onSelectChange(val) {
        let memberList = this.$store.state.totalAnalysis.memberList;
        let list = ['A', 'A-', 'B', 'B-', 'C', 'C-'];
        memberList.forEach(item => {
          item.chinese = Math.abs(90 - Math.ceil(Math.random() * 30));
          item.classPR = Math.abs(item.classPR - 9 + Math.ceil(Math.random() * 10));
          item.classRank = Math.abs(item.classRank - 9 + Math.ceil(Math.random() * 10));
          item.gradePR = Math.abs(item.gradePR - 9 + Math.ceil(Math.random() * 10));
          item.gradeRank = Math.abs(item.gradeRank - 9 + Math.ceil(Math.random() * 10));
          item.areaPR = Math.abs(item.areaPR - 9 + Math.ceil(Math.random() * 10));
          item.areaRank = Math.abs(item.areaRank - 9 + Math.ceil(Math.random() * 10));
        })
        this.tableData = memberList;
      },

      goBack() {
        this.$router.back(-1);
        this.$parent.isShowQuestions = false;
      },

      drawLine(echartData) {
        let that = this;
        let myBar = this.$echarts.init(document.getElementById("stuAverageBar"));
        var option = {
          legend: {
            data: [{
              name: this.$t('totalAnalysis.ach_table_text2'),
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: this.$t('totalAnalysis.ach_text4'),
              color: "red",
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: this.$t('totalAnalysis.ach_text5'),
              color: "red",
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: this.$t('totalAnalysis.ach_text6'),
              color: "red",
              textStyle: {
                color: '#fff'
              }
            }
            ]

          },
          tooltip: {
            show: true, // 是否显示提示框，默认为true
            trigger: "axis", // 数据项图形触发
            axisPointer: {
              // 指示样式
              type: "shadow",
              axis: "auto",
              shadowStyle: {
                color: "rgba(128,128,128,0.1)"
              }
            },
            padding: 5,
            textStyle: {
              color: "#fff"
            },
            formatter: function (params) {
              let name = echartData[params[0].dataIndex].name;
              return name + '<br>' +  params[0].marker  + that.$t('totalAnalysis.ach_table_text2') + '：' + params[0].data + '<br>' +  params[1].marker  + that.$t('totalAnalysis.ach_text4') + '：'
                + params[1].data + '<br>' + params[2].marker  + that.$t('totalAnalysis.ach_text5') + '：' + params[2].data + '<br>'
                +  params[3].marker  + that.$t('totalAnalysis.ach_text6') + '：' + params[3].data;
            }
          },
          grid: {
            show: false,
            containLabel: true,
            height: 480,
            width: "90%",
            x2: "5%",
            tooltip: {
              show: true,
              trigger: "axis", // 触发类型
              textStyle: {
                color: "#666"
              },
            }
          },
          dataZoom: [{
            "show": true,
            "height": 10,
            "xAxisIndex": [
              0
            ],
            bottom: 40,
            "start": 0,
            "end": 100,
             handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
            handleSize: '160%',
            handleStyle: {
              color: "#d3dee5",

            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 0,
            "end": 100
          }],
          //toolbox: {
          //  show: true,
          //  feature: {
          //    magicType: { show: true, type: ['line', 'bar'] },
          //    saveAsImage: { show: true }
          //  }
          //},
          xAxis: {
            show: true,
            offset: 0,
            type: "category",
            nameTextStyle: {
              color: "#a2a2a2"
            },
            name: this.$t('totalAnalysis.base_id'),
            axisLabel: {
              show: true,
              inside: false,
              margin: 15,
              color: "#989898",
            },
            data: echartData.map(item => item.id)
          },
          yAxis: {
            show: true,
            type: "value",
            axisLabel: {
              show: true,
              inside: false,
              rotate: 0,
              margin: 8,
              color: "#989898",
              fontSize: 12,
              fontFamily: "Microsoft YaHei"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#4c504a",
                width: 0.5,
                type: "solid"
              }
            }
          },
          series: [
            {
              name: this.$t('totalAnalysis.ach_table_text2'),
              type: "bar",
              itemStyle: {
                normal: {  //渐变色
                  color: '#66ccff'
                },
                width: 20,
              },
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' }
                ],
              },
              data: echartData.map(item => item.score)
            },
            {
              name: this.$t('totalAnalysis.ach_text4'),
              type: "line",
              itemStyle: {
                color: "yellow",
                width: 0,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: 'yellow',
                  type: "dashed"
                }
              },
              data: echartData.map(item => 561.87)
            },
            {
              name: this.$t('totalAnalysis.ach_text5'),
              type: "line",
              itemStyle: {
                color: "#ff33cc",
                width: 0,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: '#ff33cc',
                  type: "dashed"
                }
              },
              data: echartData.map(item => 526.35)
            },
            {
              name: this.$t('totalAnalysis.ach_text6'),
              type: "line",
              itemStyle: {
                color: "#66ff99",
                width: 0,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: '#66ff99',
                  type: "dashed"
                }
              },
              data: echartData.map(item => 485)
            },
          ]
        };

        // 绘制图表
        myBar.setOption(option);
        window.addEventListener("resize", function () {
          myBar.resize();
        });
      }

    },

    mounted() {
      this.$parent.isShowQuestions = true;
      this.drawLine(this.echartData);
      this.$refs.percentTable.$el.childNodes[2].style.borderRight = "0";
      //this.$refs.scoreTable.$el.childNodes[2].style.borderRight = "0";
    },
  }
</script>


<style src="./AchievementAnalysis.css" scoped></style>
<style scoped>
  .early-warning-tab {
    margin-left: 60px;
    font-size: 16px;
  }

    .early-warning-tab span {
      border-bottom: 2px solid #808080;
      margin-left: 20px;
      padding: 5px 0;
      cursor: pointer;
    }

    .early-warning-tab .early-warning-active {
      font-weight: bold;
      color: #07cdd8;
      border-color: #07cdd8;
    }

  #stuAverageBar {
    height: 600px;
  }

  .averageBarRow {
    position: relative;
  }

  .sort-box {
    position: absolute;
    right: 150px;
    top: 20px;
  }
</style>

<style>

  .sort-box .ivu-input::-webkit-input-placeholder {
    color: #a9a9a9;
  }

  .sort-box .ivu-select {
    margin: 5px 0;
    height: 34px;
  }

  .sort-box .ivu-select-single .ivu-select-selection {
    height: 30px;
    background: transparent;
    border: 1px solid #a9a9a9;
    box-shadow: none;
  }

  .sort-box .ivu-select-single .ivu-select-dropdown {
    /*background: #595959;*/
  }

  .sort-box .ivu-select-single .ivu-select-placeholder {
    height: 30px;
    line-height: 26px;
    font-size: 16px;
  }

  .sort-box .ivu-select-single .ivu-select-selected-value {
    color: #a9a9a9;
  }

  .sort-box .ivu-select-single .ivu-select-arrow {
    color: #a9a9a9;
    top: 80%;
  }
</style>


