<template>
  <div class="center-bottom-warp">
    <item :title="'日充放电对比'">
      <dv-loading v-if="Loading">Loading...</dv-loading>
      <Chart v-else :options="options" />
    </item>
  </div>
</template>

<script>
import item from './item-warp.vue'
import { GetChargeDailyChart } from '@/api/screen/zzScreen'
import dayChargeIcon from '../../../assets/new-screen/dayCharge-icon.png'
import dayDischargeIcon from '../../../assets/new-screen/dayDischarge-icon.png'
export default {
  components: { item },
  data() {
    return {
      options: {},
      Loading: true
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    async getData(deptId) {
      try {
        this.Loading = true
        const { data } = await GetChargeDailyChart({
          deptId: deptId
        })
        this.initChart(data)
      } catch (error) {
        console.log(error)
      } finally {
        this.Loading = false
      }

      // data.splice(0, 3)
    },
    initChart(data) {
      if (data.length) {
        const x_data = []

        const dayCharge = []
        const dayDischarge = []
        data.forEach((el) => {
          x_data.push(el.time)
          dayCharge.push(el.dayCharge)
          dayDischarge.push(el.dayDischarge)
        })
        this.options = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            orient: 'horizontal',
            right: 30,
            itemWidth: 14,
            data: [
              { icon: 'image://' + dayChargeIcon, name: '充电' },
              { icon: 'image://' + dayDischargeIcon, name: '放电' }
            ]

          },

          grid: {
            left: '5%',
            top: '13%',
            right: '5%',
            bottom: '10%'
          },
          xAxis: [{
            data: x_data,
            axisLabel: {
              textStyle: {
                color: '#6E7174'
              },
              margin: 10 // 刻度标签与轴线之间的距离。
            },

            axisLine: {
              show: false // 不显示x轴
            },
            axisTick: {
              show: false // 不显示刻度
            },
            boundaryGap: true,
            splitLine: {
              show: false,
              width: 0.08,
              lineStyle: {
                type: 'solid',
                color: '#03202E'
              }
            }
          }],
          yAxis: [{
            name: 'kWh',
            nameTextStyle: {
              color: '#6E7174',
              fontSize: 12,
              padding: [0, 0, 0, -40]
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#eee',
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#6E7174'
              }
            }
          }],
          series: [

            // 柱体
            {
              name: '充电',
              type: 'bar',

              barGap: '20%',
              barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
              itemStyle: {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{ // 第一节下面
                      'offset': 0,
                      'color': 'rgba(0, 243, 253, 1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(0, 243, 253, 0.2)'
                    }]
                  }
                }
              },

              data: dayCharge
            },
            {
              name: '放电',
              type: 'bar',
              barGap: '20%',
              barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
              itemStyle: {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{ // 第一节下面
                      'offset': 0,
                      'color': 'rgba(253, 228, 0, 1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(253, 228, 0, 0.2)'
                    }]
                  }
                }
              },

              data: dayDischarge
            }

          ]
        }
      } else {
        this.options = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 14,
              color: 'rgb(153, 153, 153)',
              fontWeight: 'normal'
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center-bottom-warp {
  width: 100%;
  height: 100%;
}
</style>
