<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :model="queryParams" ref="queryForm">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="11" :md="12" :sm="24">
            <a-form-item label="查询日期">
              <a-range-picker date-format="YYYY-MM-DD" v-model="queryParams.date" @change="onChangeDate" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleQuery" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="trend-charts" ref="trendCharts" style="width: 100%; height: 1800px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: '',
  data() {
    return {
      loading: true,
      // 数据
      tpmequiponoffsectionList: [],
      // 查询参数
      queryParams: {
        date: [],
        day_begin: '',
        day_end: '',
      },
      // 设备
      equipments: [],
      // 运行
      onduration: [],
      // 待机
      pauseduration: [],
      // 关机
      offduration: [],
      url: {
        list: '/equipmentOnoffSection/equipmentOnoffSection/gettransverse',
      },
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      var now = this.dateformat(new Date()).substring(0, 10)
      this.queryParams.date.push(now)
      this.queryParams.date.push(now)
      this.queryParams.day_begin = now
      this.queryParams.day_end = now
      this.handleQuery()
    })
  },
  methods: {
    // 时间处理
    onChangeDate(date, dateString) {
      this.queryParams.day_begin = dateString[0]
      this.queryParams.day_end = dateString[1]
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.handleQuery()
    },
    dateformat(date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var strDate = date.getDate()
      strDate = strDate < 10 ? '0' + strDate : strDate
      var hour = date.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second

      return year + '-' + month + '-' + strDate + ' ' + hour + ':' + minute + ':' + second
    },
    handleQuery() {
      var _this = this
      _this.loading = true
      getAction(this.url.list, _this.queryParams).then((response) => {
        _this.tpmequiponoffsectionList = response.result
        // Generate mock data
        _this.equipments = []
        _this.onduration = []
        _this.pauseduration = []
        _this.offduration = []
        _this.tpmequiponoffsectionList.forEach(function (equipment, key) {
          _this.equipments.push(equipment.equipmentid_dictText + '[' + equipment.equipmentcode + ']')
          _this.onduration.push(equipment.onduration)
          _this.pauseduration.push(equipment.pauseduration)
          _this.offduration.push(equipment.offduration)
        })

        this.loading = false

        this.initEcharts()
      })
    },
    initEcharts() {
      var _this = this
      var chartDom = this.$refs.trendCharts
      var myChart = echarts.init(chartDom)
      var option
      var types = [
        { name: '运行', color: '#75d874' },
        { name: '待机', color: '#dc77dc' },
        { name: '停机', color: '#bd6d6c' },
      ]

      option = {
        title: {
          text: '设备运行情况(分钟)',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          bottom: 0,
        },
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '25px',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: _this.equipments,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        series: [
          {
            name: types[0].name,
            type: 'bar',
            stack: 'total',
            color: types[0].color,
            data: _this.onduration,
          },
          {
            name: types[1].name,
            type: 'bar',
            stack: 'total',
            color: types[1].color,
            data: _this.pauseduration,
          },
          {
            name: types[2].name,
            type: 'bar',
            stack: 'total',
            color: types[2].color,
            data: _this.offduration,
          },
        ],
      }

      option && myChart.setOption(option)

      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/uStyle.less';
</style>
<style lang="less">
.trend-charts {
  padding: 10px;
  margin-top: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
