<template>
  <!-- 历史数据 -->
  <div id="historyChart">
    <!-- 精度选择 -->
    <div class="query-area">
      <span>当下分精度下采集数量：{{ chartData.length }}</span>
      <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <!-- 图表 -->
    <div class="chart-area" ref="chart">

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getHistoryData
} from '@/api/scan/request'
import echarts from 'echarts'

export default {
  data() {
    return {
      lineChart: null,//折线表
      selectValue: '5min',//下拉框默认值
      options: [//精度
        { value: '1min', label: '1分钟' },
        { value: '5min', label: '5分钟' },
        { value: '15min', label: '15分钟' },
        { value: '30min', label: '30分钟' },
        { value: '1hour', label: '1小时' },
        { value: '1day', label: '1天' },
      ],
      //数据表
      chartData: []
    }
  },
  props: {
    tabFunNum: String//表号功能号
  },
  methods: {
    //加载表格
    loadTable() {
      let query = {
        secret: this.secret,
        projectId: this.projectId,
        userInfo: this.userInfo
      };
      //时间处理
      let nowDate = new Date().getTime();
      let gteDate = 0;
      if (this.selectValue == '1min' || this.selectValue == '5min') {
        gteDate = nowDate - 3600 * 1000;
      }
      else if (this.selectValue == '15min' || this.selectValue == '30min') {
        gteDate = nowDate - 24 * 3600 * 1000;
      }
      else {
        gteDate = nowDate - 30 * 24 * 3600 * 1000;
      }
      let pa = {
        criterias: [
          {
            "met_fun": this.tabFunNum,      //表号功能号
            "period": this.selectValue,
            "receivetime": {
              "$gte": this.date2String(gteDate),
              "$lt": this.date2String(nowDate)
            }
          }
        ]
      };
      //获取历史数据
      getHistoryData(query, pa, res => {
        this.chartData = res[`${this.tabFunNum}`].Content;
        //折线图参数
        let lineChartOption = {
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%'];
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.chartData.map(item => item.data_time)
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
          },
          dataZoom: [{
            type: 'inside',
            start: 80,
            end: 100
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgb(144, 147, 153)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          series: [
            {
              name: '数值',
              type: 'line',
              smooth: true,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                color: 'rgb(103, 194, 58)'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(225, 243, 216)'
                }, {
                  offset: 1,
                  color: 'rgb(225, 243, 216)'
                }])
              },
              data: this.chartData.map(item => item.data_value)
            }
          ]
        };
        this.lineChart.setOption(lineChartOption);
      });
    },
    //时间戳转string 例：标准时间 => 20190929120000
    date2String(d) {
      let localeString = new Date(d).toLocaleString();
      let timeString = new Date(d).toTimeString();
      let localArr = localeString.match(/(\d\d|\/\d+)/g).slice(0, 4);
      let timeArr = timeString.match(/(\d\d)/g).slice(0, 3);
      localArr[2] = localArr[2].length == 2 ? `0${localArr[2].substring(1, 2)}` : localArr[2].substring(1, 3);
      localArr[3] = localArr[3].length == 2 ? `0${localArr[3].substring(1, 2)}` : localArr[3].substring(1, 3);
      return localArr.concat(timeArr).join('');
    },
    init() {
      this.lineChart = echarts.init(this.$refs.chart);
      this.loadTable();
    },
  },
  computed: {
    ...mapGetters('layout', ['projectId', 'secret', 'userInfo'])
  },
  mounted() {
    //实例化
    this.init();
    let that = this;
    //图表大小随窗口变化
    window.onresize = () => {
      that.lineChart.resize();
    }
  },
  watch: {
    //切换时更新数据
    tabFunNum() {
      this.loadTable();
    }
  }
}
</script>

<style lang="less" scoped>
#historyChart {
  height: 100%;
  width: 100%;
  padding: 10px 5px;
}
.query-area {
  height: 40px;
  line-height: 40px;
}
.chart-area {
  height: 450px;
}
</style>