<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="曲线"
    class="curve"
    @close="value = 0"
  >
    <el-select v-model="value" @change="handleTime">
      <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item"
        :value="index">
      </el-option>
    </el-select>
    <!-- 图表 -->
    <div class="chart-area" ref="chart"></div>
  </el-dialog>
</template>

<script>
import echarts from 'echarts'
import moment from 'moment'
import {originalHistory} from '@/api/scan/request'

export default {
  name: "curve",
  data() {
    return {
      lineChart: null,//折线表
      chartData: [],//数据表
      dialogVisible: false,
      options: ['当日', '最近七天'],
      value: 0,
      row: {}
    }
  },
  methods: {
    handleTime() {
      this.open(this.row, this.value)
    },
    /**
     *@param row   当前行
     *@param val  当前日期
     */
    open(row, val) {
      this.row = row
      let toDay = moment().format('YYYY-MM-DD 00:00:00'),
        toCurrentDay = moment().format('YYYY-MM-DD HH:mm:ss'),
        history7 = moment().subtract('days', 6).format('YYYY-MM-DD HH:mm:ss'),
        Filters = '';
      if (val == 1) {
        Filters = `Time > '${history7}' and Time < '${toCurrentDay}'`
      } else {
        Filters = `Time > '${toDay}' and Time < '${toCurrentDay}'`
      }
      let param = {
        PointId: row.Id,
        ...row,
        Filters,
      }
      originalHistory(param, res => {
        let arr = res.Content ? res.Content : []
        this.chartData = []
        arr.forEach(i => this.chartData.push([moment(i.Time).format('YYYY-MM-DD'), i.Data]))
      })
      console.log(this.chartData)
      this.timeoutSetVal()
      this.dialogVisible = true
    },
    timeoutSetVal() {
      setTimeout(() => {
        if (this.$refs.chart) {
          this.lineChart = echarts.init(this.$refs.chart);
          let dateList = this.chartData.map(item => item[0]),
            valueList = this.chartData.map(item => item[1]),
            lineChartOption = {
              visualMap: [
                {
                  show: false,
                  type: 'continuous',
                  seriesIndex: 1,
                  dimension: 0,
                  min: 0,
                  max: dateList.length
                }],
              tooltip: {
                trigger: 'axis'
              },
              xAxis: [{}, {
                data: dateList,
                gridIndex: 1
              }],
              yAxis: [{}, {
                splitLine: {show: false},
                gridIndex: 1
              }],
              grid: [{
                bottom: '13%'
              }, {
                top: '45%'
              }],
              series: [
                {
                  type: 'line',
                  showSymbol: false,
                  data: valueList,
                  xAxisIndex: 1,
                  yAxisIndex: 1
                }]
            }
          this.lineChart.setOption(lineChartOption);
        } else {
          this.timeoutSetVal()
        }
      }, 500)
    },
  },
  mounted() {
    let _this = this
    window.onresize = () => {
      _this.lineChart.resize()
    }
  },
}
</script>

<style scoped lang="less">
.curve {
  .chart-area {
    height: 450px;
  }
}
</style>
