<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\energyConsume\content\child\content\left.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 14:43:28
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div class="content-left">
    <chart
      :title="powerData.title"
      :option="powerData.option"
      ref="powerhistory"
    ></chart>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue"
import { calcWH } from "@/components/ts/selfAdaption";
import chart from "@/components/assembly/chart.vue";
// import {getPowerData} from '@/http/environment'
import { useenergyUseStore } from "@/store/module/energyUse";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useenergyUseStore();

let powerhistory=ref()

let powerData = reactive({
  title: "",
  option: {
  title: {
    text: t('messages.powerhistory'),
    show:true,
      textStyle:{
          color:'#fff',
          fontSize:20
      }
  },
  tooltip:{trigger:"axis",axisPointer:{type:"cross"}},
  legend: {
    // data: ['2018', '2019', '2020', '2021', '2022'],
    textStyle: {
                color: "#fff",
            }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine:{
        show:true,
      },
    data: []
  },
  yAxis: {
    type: 'value',
    axisLine:{
        show:false,
      },
      splitLine: {
              // 网格线
              show: true,
              lineStyle: { //分割线
                color: "#B3A5A5",
              // color: "#268C8C",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
             }
            },
  },
  series: [
  ]
},
});

let props=defineProps<{
    width:number,
    height:number,
    }>()
    watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);
function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  box(val.width, val.height);
}
const box = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 1, 0);
  
  powerhistory.value.setchartWH(a.oWidth, a.oHeight);
  // tableref.value.setchartWH(a.oWidth, a.oHeight);
  // swiperref.value.setchartWH(a.oWidth, a.oHeight);
};
//监听电量
watch(
  () => store.poswerHistory,
  (newVal, oldVal) => {
    changepowerData(newVal);
  },
  { deep: true, flush: "post" }
);
function changepowerData(val:any){
  console.log(val);
  
let x=[]
let y={}
let series=[]
for(let key in val){
  x.push(key)
  val[key].forEach(res=>{
    if( y[res.years]){
      y[res.years].push(res.usageNum)
    }else{
      y[res.years]=[]
      y[res.years].push(res.usageNum)
    }
  })
}
for(let key in y){
series.push({
      name: key,
      type: 'line',
      data: y[key]
    })
}
powerData.option.xAxis.data=x
powerData.option.series=series
console.log(series);

powerhistory.value.changeData(powerData.option);
}
onMounted(() => {

})


</script>



<style scoped>
.content-left {
  width: 100%;
  display: flex;
}
</style>
