<template>
  <div class="electricityInfo">
    <div ref="electricityRef" class="electricityLine" />
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { Ref } from 'vue';
import { powerLostRate } from '@/api/data/index';
import useCounter from '@/store/modules/date';
const counterStore = useCounter();
const yearMonthDay = ref();
const electricityRef: Ref<HTMLElement | any> = ref(null);

const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    top: 10,
    right: 10,
    itemWidth: 11,
    itemHeight: 11,
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  grid: {
    top: '20%',
    left: '0',
    right: '0',
    bottom: '0',
    containLabel: true
  },
  dataset: {
    source: [
      ['name', '合力供热站', '浑南热力', '国润低碳', '新环保', '节能环保'],
      ['计划数', 41.1, 30.4, 65.1, 53.3, 69],
      ['实际数', 35.5, 92.1, 85.7, 83.1, 72]
    ]
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      show: true,
      color: '#99CFFF'
    },
    axisLine: {
      lineStyle: {
        color: '#546778'
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '单位',
      nameTextStyle: {
        color: '#546778',
        fontSize: 12,
        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLabel: {
        show: true,
        color: '#546778'
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          //分割线
          color: '#306269',
          width: 1,
          opacity: 0.2
        }
      },
    }
  ],
  series: [
    {
      type: 'bar',
      seriesLayoutBy: 'row',
      barWidth: 15, //设置宽度
      itemStyle: {
        //渐变背景
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#61B9FF' },
          { offset: 0.5, color: '#4263DF' },
          { offset: 1, color: '#2106BD' }
        ])
      }
    },
    {
      type: 'bar',
      seriesLayoutBy: 'row',
      barWidth: 15, //柱宽
      itemStyle: {
        //渐变背景
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#F2DE28' },
          { offset: 0.5, color: '#F5A113' },
          { offset: 1, color: '#F96800' }
        ])
      }
    }
  ]
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(electricityRef.value);
  chart.setOption(options);
  // getElect();

  // 大小自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
});
watchEffect(() => {
  const dataStr = counterStore.dateStr;
  if (dataStr != '') {
    yearMonthDay.value = counterStore.dateStr.split('-');
    //   getElect();
  }
});
function getElect() {
  //获取图表数据
  const params = {
    orgId: 206,
    dateYear: yearMonthDay.value[0],
    dateMonth: yearMonthDay.value[1],
    dateDay: yearMonthDay.value[2]
  };
  powerLostRate(params).then((res: any) => {
    if (res.code === 200 && Object.keys(res.data).length != 0) {
      options.dataset.source = res.data.source;
      options.yAxis[0].name = `单位(${res.data.unit})`;
      const chart = echarts.init(electricityRef.value);
      chart.setOption(options);
    }
  });
}
</script>
<style lang="scss" scoped>
.electricityInfo {
  width: 100%;
  height: 318px;
  .electricityLine {
    width: 100%;
    height: 318px;
  }
}
</style>
