<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from './theme.json' // 引入默认主题
import resizeMixins from "../../utils/resizeMixins";
import '../map/fujian.js'
import moment from "moment";
export default {
  name: 'echart',
  mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '2.5rem'
    },
    options: {
      type: Object,
      default: ()=>({})
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler (options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true)
      },
      deep: true
    }
  },
  mounted () {
    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
    this.initChart();
  },
  methods: {
    initChart () {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme')
      this.chart.setOption(this.options, true)
      this.chart.on('click', params => {
        var datePicker=['','']
        if(params.name=="1:00"){
          datePicker=[moment().format("YYYY-MM-DD 00:00:00"),moment().format("YYYY-MM-DD 01:00:00")]
        }else if(params.name=="2:00"){
          datePicker=[moment().format("YYYY-MM-DD 01:00:00"),moment().format("YYYY-MM-DD 02:00:00")]
        }else if(params.name=="3:00"){
          datePicker=[moment().format("YYYY-MM-DD 02:00:00"),moment().format("YYYY-MM-DD 03:00:00")]
        }else if(params.name=="4:00"){
          datePicker=[moment().format("YYYY-MM-DD 03:00:00"),moment().format("YYYY-MM-DD 04:00:00")]
        }else if(params.name=="5:00"){
          datePicker=[moment().format("YYYY-MM-DD 04:00:00"),moment().format("YYYY-MM-DD 05:00:00")]
        }else if(params.name=="6:00"){
          datePicker=[moment().format("YYYY-MM-DD 05:00:00"),moment().format("YYYY-MM-DD 06:00:00")]
        }else if(params.name=="7:00"){
          datePicker=[moment().format("YYYY-MM-DD 06:00:00"),moment().format("YYYY-MM-DD 07:00:00")]
        }else if(params.name=="8:00"){
          datePicker=[moment().format("YYYY-MM-DD 07:00:00"),moment().format("YYYY-MM-DD 08:00:00")]
        }else if(params.name=="9:00"){
          datePicker=[moment().format("YYYY-MM-DD 08:00:00"),moment().format("YYYY-MM-DD 09:00:00")]
        }else if(params.name=="10:00"){
          datePicker=[moment().format("YYYY-MM-DD 09:00:00"),moment().format("YYYY-MM-DD 10:00:00")]
        }else if(params.name=="11:00"){
          datePicker=[moment().format("YYYY-MM-DD 10:00:00"),moment().format("YYYY-MM-DD 11:00:00")]
        }else if(params.name=="12:00"){
          datePicker=[moment().format("YYYY-MM-DD 11:00:00"),moment().format("YYYY-MM-DD 12:00:00")]
        }else if(params.name=="13:00"){
          datePicker=[moment().format("YYYY-MM-DD 12:00:00"),moment().format("YYYY-MM-DD 13:00:00")]
        }else if(params.name=="14:00"){
          datePicker=[moment().format("YYYY-MM-DD 13:00:00"),moment().format("YYYY-MM-DD 14:00:00")]
        }else if(params.name=="15:00"){
          datePicker=[moment().format("YYYY-MM-DD 14:00:00"),moment().format("YYYY-MM-DD 15:00:00")]
        }else if(params.name=="16:00"){
          datePicker=[moment().format("YYYY-MM-DD 15:00:00"),moment().format("YYYY-MM-DD 16:00:00")]
        }else if(params.name=="17:00"){
          datePicker=[moment().format("YYYY-MM-DD 16:00:00"),moment().format("YYYY-MM-DD 17:00:00")]
        }else if(params.name=="18:00"){
          datePicker=[moment().format("YYYY-MM-DD 17:00:00"),moment().format("YYYY-MM-DD 18:00:00")]
        }else if(params.name=="19:00"){
          datePicker=[moment().format("YYYY-MM-DD 18:00:00"),moment().format("YYYY-MM-DD 19:00:00")]
        }else if(params.name=="20:00"){
          datePicker=[moment().format("YYYY-MM-DD 19:00:00"),moment().format("YYYY-MM-DD 20:00:00")]
        }else if(params.name=="21:00"){
          datePicker=[moment().format("YYYY-MM-DD 20:00:00"),moment().format("YYYY-MM-DD 21:00:00")]
        }else if(params.name=="22:00"){
          datePicker=[moment().format("YYYY-MM-DD 21:00:00"),moment().format("YYYY-MM-DD 22:00:00")]
        }else if(params.name=="23:00"){
          datePicker=[moment().format("YYYY-MM-DD 22:00:00"),moment().format("YYYY-MM-DD 23:00:00")]
        }else if(params.name=="24:00"){
          datePicker=[moment().format("YYYY-MM-DD 23:00:00"),moment().format("YYYY-MM-DD 23:59:59")]
        }
        this.$router.push({
          name:"UnlockRecord",
          params:{
            datePicker:datePicker
          }
        })
      })
    }
  }
}
</script>

<style>
</style>
