<template>
    <div :id="id" style="height: 100%;width:100%;"></div>
</template>

<script>
export default {
    data () {
      return {
        myChart: '',
      }
    },
    props:{
      id:{
        type: String
      },
      todayData:{
      },
      lastWeekData:{
      },
      callBack: {
        type: String
      }
    },
    watch: {
      todayData(val) {
        if(val != null)
          this.drawLine()
      }
    },
    methods:{
      drawLine(){
          let _this = this
          if(this.todayData == null) return false;

          let lastWeekKeys = Object.keys(this.lastWeekData);
          let todayKeys = Object.keys(this.todayData);        
          let yLabel = [];

          // 取得Y軸Label
          function my_unique(a) {
            var a = a.concat();//使用concat()再複製一份陣列，避免影響原陣列
            for(var i=0; i<a.length; ++i) {
                for(var j=i+1; j<a.length; ++j) {
                    if(a[i] === a[j])
                        a.splice(j, 1);
                }
            }
        
            return a;
          };
          let temp = my_unique(lastWeekKeys.concat(todayKeys));
          temp.sort(function(a, b) {
            return a - b;
          });

          temp.forEach(function(item){
            yLabel.push(_this.$t('classMgmt.grade'+ item))
          });
          
          let todayDataArray = [];
          let lastWeekDataArray = [];

          Object.keys(this.lastWeekData).forEach(function(item){
            if(_this.isInteger(item)){
              let newKey = _this.$t('classMgmt.grade'+ item);
              _this.lastWeekData[newKey] = _this.lastWeekData[item];
              delete _this.lastWeekData[item];
            }            
          })

          Object.keys(this.todayData).forEach(function(item){
            if(_this.isInteger(item)){
              let newKey = _this.$t('classMgmt.grade'+ item);
              _this.todayData[newKey] = _this.todayData[item];
              delete _this.todayData[item];
            }
          })

          // 今日資料
          yLabel.map(function(key) {
            todayDataArray.push(_this.todayData[key]);
          });
          // 上週資料
          yLabel.map(function(key) {
            lastWeekDataArray.push(_this.lastWeekData[key]);
          });

          // 基于准备好的dom，初始化echarts实例
          this.myChart = this.$echarts.init(document.getElementById(this.id));
          this.myChart.setOption({
            backgroundColor: '#343a4073',
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              // formatter: function(params){
              //   // 故意開啟 但不設定使ToolTip 沒有彈跳的作用 但有Hover 功能
              // }
            },
            grid: {
              left: '5%',
              right: '0',
              bottom: '0',
              top:'0',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: false,
              axisLabel: {
                  inside: true,
                  textStyle: {
                      color:'transparent'
                  }
              },
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: 'rgba(185, 193, 173, 0.63)'
                  }
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                textStyle: {
                  fontSize: 12,
                  color: '#94998a'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(185, 193, 173, 0.63)',
                },
                show: true
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(185, 193, 173, 0.63)',
                  width: 1,
                }
              },
              data: yLabel,
            },
            series: [
              {
                name: _this.$t('classMgmt.today'),
                type: 'bar',
                data: todayDataArray,
                barWidth: 13, //柱子宽度
                itemStyle: {
                  normal: {  //渐变色
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "rgba(28, 208, 161, 1)" // 0% 处的颜色
                    },{
                      offset: 1,
                      color: "rgba(28, 208, 161, 0.5)" // 100% 处的颜色
                    }], false)
                  }
                }
              },
              {
                name: _this.$t('classMgmt.lastweek'),
                type: 'bar',
                data: lastWeekDataArray,
                barWidth: 13, //柱子宽度
                itemStyle: {
                  normal: {  //渐变色
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "rgba(228, 233, 220, 1)" // 0% 处的颜色
                    },{
                      offset: 1,
                      color: "rgba(228, 233, 220, 0.5)" // 100% 处的颜色
                    }], false)
                  }
                }
              }
            ]
          })
          //highlight觸發項
          this.myChart.on('highlight', function (params) {
            _this.$emit('highLightInfo', {'id': yLabel[params.batch[0].dataIndex], 'today': todayDataArray[params.batch[0].dataIndex], 'lastWeek': lastWeekDataArray[params.batch[1].dataIndex]});            
          });            
          this.myChart.on('downplay', function (params) {            
            _this.$emit('downplay', yLabel[params.batch[0].dataIndex])
          });
      },
      isInteger(obj) {
        return typeof parseInt(obj) === 'number' && obj%1 === 0
      }
    },
    mounted(){
      this.drawLine();
    },
}

</script>

<style>
</style>
