<template>
  <div class="overview">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card ref="rowOne" class="box-card row-one">
          <div slot="header">
            <span>温度</span>
          </div>
          <div class="number">
            {{ overview.temperature }}摄氏度
          </div>
          <div class="content">
            <div id="gaugePlot" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="box-card row-one">
          <div slot="header">
            <span>气压</span>
          </div>
          <div class="number">
            1212帕
          </div>
          <div class="content">
            <div id="meterGaugePlot" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="box-card row-one">
          <div slot="header">
            <span>功率</span>
          </div>
          <div class="number">
            6560千瓦时
          </div>
          <div class="content">
            <div id="fanGaugePlot" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="box-card row-one">
          <div slot="header">
            <span>活动营销效果</span>
          </div>
          <div class="number">
            ¥126560
          </div>
          <div class="content" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" style="height: 500px">
        <div id="line" style="background-color: #fff" />
      </el-col>
      <el-col :span="12" style="height: 500px">
        <chart width="100%" height="100%"/>
      </el-col>
      <el-col :span="12" style="height: 500px">
        <g2-line />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Line, Gauge, MeterGauge, FanGauge } from '@antv/g2plot'
import { getLineData, getOverviewData } from '@/api/overview/overview'
import Chart from '@/components/Charts/LineMarker'
import G2Line from '@/components/G2Plot/G2Line'

export default {
  name: 'Overview',
  components: {
    Chart,
    G2Line
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      line: null,
      timer: 0,
      count: 0,
      lineData: [],
      gaugePlot: null,
      overview: {
        temperature: null,
        pressure: null,
        power: null
      }
    }
  },
  mounted() {
    this.line = new Line(document.getElementById('line'), {
      data: this.lineData,
      title: {
        visible: true,
        text: '折线图'
      },
      description: {
        visible: true,
        text: '用平滑的曲线代替折线'
      },
      xField: 'time',
      yField: 'value',
      xAxis: {
        type: 'time',
        mask: 'HH:mm:ss'
      }
    })
    // this.timer = setInterval(() => {
    //   this.count++
    //   this.updateData()
    // }, 1000)
    this.line.render()
    this.gaugePlot = new Gauge(document.getElementById('gaugePlot'), {
      value: 64,
      min: 0,
      max: 100,
      range: [0, 25, 50, 75, 100],
      height: 200,
      color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3']
    })
    this.gaugePlot.render()
    const meterGaugePlot = new MeterGauge(document.getElementById('meterGaugePlot'), {
      value: 64,
      min: 0,
      max: 100,
      height: 200,
      range: [0, 25, 50, 75, 100],
      forceFit: true,
      color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3']
    })
    meterGaugePlot.render()
    const fanGaugePlot = new FanGauge(document.getElementById('fanGaugePlot'), {
      value: 34,
      min: 0,
      max: 100,
      height: 200,
      range: [0, 70],
      format: (v) => {
        return v + '%'
      },
      color: ['l(0) 0:#b0d0ff 1:#5f92f9']
    })
    fanGaugePlot.render()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    updateData() {
      getLineData()
        .then(res => this.line.changeData(res.data))
        .catch(err => console.error(err))
      getOverviewData()
        .then(res => this.updateGaugePlot(res))
        .catch(err => console.error(err))
    },
    updateGaugePlot(res) {
      const { temperature } = res.data
      this.overview.temperature = temperature
      this.gaugePlot.updateConfig({
        value: temperature
      })
      this.gaugePlot.render()
    }
  }
}
</script>

<style lang="scss" scoped>
  .overview{
    .row-one{
      margin-bottom: 20px;
      .number{
        font-size: 30px;
      }
      .content{
        height: 200px;
      }
      .el-divider{
        margin-top: 12px;
      }
    }
  }
</style>
