<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:37
 * @FilePath: src/views/screen/components/video/components/EventDetail.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div :class="className" :style="{height:height,width:width,backgroundColor: 'transparent'}" />
</template>
<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'EventDetail',
  mixins: [resize],
  props: {
    y_data: {
      type: Array,
      default: () => []
    },
    _data1: {
      type: Array,
      default: () => []
    },
    _data2:{
      type: Array,
      default: () => []
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    y_data: {
      handler: function() {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      var spNum = 1, _max = 10
      var legendData = ['设备上线', '设备下线']
      var y_data = this.$props.y_data
      var _data1 = this.$props._data1,
        _data2 = this.$props._data2
      console.log(y_data)
      console.log(_data1)
      console.log(_data2)
      // var fomatter_fn = function(v) {
      //   return (v.value / _max * 100).toFixed(0)
      // }

      var _label = {
        normal: {
          show: true,
          position: 'inside',
          // formatter: fomatter_fn,
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        }
      }

      var option = {
        backgroundColor: 'transparent',
        legend: {
          show: false,
          data: legendData,
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          containLabel: true,
          left: 0,
          right: 15,
          bottom: 30
        },
        tooltip: {
          show: true,
          backgroundColor: '#fff',
          borderColor: '#ddd',
          borderWidth: 1,
          textStyle: {
            color: '#3c3c3c',
            fontSize: 16
          },
          formatter: function(p) {
            return '名称：' + p.seriesName + '<br>' + '数量：' + p.value
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
        },
        xAxis: {
          // splitNumber: spNum,
          // interval: _max / spNum,
          // max: _max,
          axisLabel: {
            show: false,
            // formatter: function(v) {
            //   var _v = (v / _max * 100).toFixed(0)
            //   return _v == 0 ? _v : _v + '%'
            // }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }

        },
        yAxis: [{
          data: y_data,
          axisLabel: {
            fontSize: 16,
            color: '#fff'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }, {
          show: false,
          data: y_data,
          axisLine: {
            show: false
          }
        }],
        dataZoom: [{
          type: 'slider',
          width: 20,
          itemStyle: {
            color: '#fff',
            borderColor: 'transparent'
          },
          yAxisIndex: 0,
          start: 0,
          end: (10 / y_data.length) * 100,
          zoomLock: true
        }],
        series: [{
          type: 'bar',
          name: '设备上线',
          stack: '2',
          label: _label,
          legendHoverLink: false,
          barWidth: 30,
          itemStyle: {
            normal: {
              color: '#0064e8'
            },
            emphasis: {
              color: '#0064e8'
            }
          },
          data: _data1
        }, {
          type: 'bar',
          name: '设备下线',
          stack: '2',
          legendHoverLink: false,
          barWidth: 30,
          label: _label,
          itemStyle: {
            normal: {
              color: '#00edfd'
            },
            emphasis: {
              color: '#00edfd'
            }
          },
          data: _data2
        }]
      }

      this.chart.setOption(option)

      // var currentIndex = 0
      // var totalData = y_data.length
      // var visibleCount = 6
      // if (totalData < visibleCount) {
      //   this.chart.dispatchAction({
      //     type: 'dataZoom',
      //     start: 0,
      //     end: 100
      //   })
      //   return
      // }
      // const updateDataZoom = () => {
      //   this.chart.dispatchAction({
      //     type: 'dataZoom',
      //     start: (currentIndex / totalData) * 100,
      //     end: ((currentIndex + visibleCount) / totalData) * 100
      //   })
      //   currentIndex = (currentIndex + 1) % totalData
      // }
      //
      // updateDataZoom() // Initialize with the first set of data
      // setInterval(updateDataZoom, 3000)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
