<template>
  <div class="content-big" ref="Power"></div>
</template>

<script setup lang="ts">
import {EDataPerson,EDataPersonItem} from '@/type/environment'
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import {getPowerData} from '@/http/environment/index'
import { map } from 'lodash';
const { proxy } = getCurrentInstance() as any;
let Power=ref()
let color=['#4992FF','#7CFFB2','#FDDD60','#FF6E76','#58D9F9','#05C091','#FF8A45','#8D48E3','#6950A1','#74787C','#5F5D46','#80752C'];
let yue = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
const echartsData = reactive<EDataPerson>({
    power:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    

})
const setData=(y:any,x:any,title:any)=>{
  console.log(x);

  let series=[]
  for(let key in x){
    let year =key.split('-')
    series.push({
      name: key,
      type: 'bar',
      stack: year[0],
      emphasis: {
        focus: 'series',
        label: {
        show: true
        }
      },
      itemStyle:{
        color:function (params){
          let item =params.seriesName.split('-')
          let a = 0
          yue.forEach((res,index)=>{
            if(res == item[1]){
              a=index
            }
          })
          
          return color[a]
          
          
        }
      },
      data: x[key]
    })
  }

    echartsData.power!.div=Power.value
    echartsData.power!.title=title
    echartsData.power!.data={
    title:{
        text:echartsData.power!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
      axis:'auto'
    }
  },
  color:color,
  legend: {
    type:'scroll',
    bottom: '3%',
    itemStyle:{
        data:yue
      },
  },
  grid: {
    top:'8%',
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: y
  },
  series: series
    };

change(echartsData.power)
}
const setData2=(value:any)=>{

  let series=[]
value.data.forEach(res=>{
  for(let key in res.month){
    series.push({
      name: key,
      type: 'bar',
      stack: res.year,
      emphasis: {
        focus: 'series',
        label: {
        show: true
        }
      },
      data: res.month[key]
    })
  }
})


    echartsData.power!.div=Power.value
    echartsData.power!.title='title'
    echartsData.power!.data={
    title:{
        text:echartsData.power!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
      axis:'auto'
    }
  },
  color:color,
  legend: {
    type:'scroll',
    bottom: '3%',
    // itemStyle:{
    //     data:yue
    //   },
  },
  grid: {
    top:'8%',
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: value.name
  },
  series: series
    };

change(echartsData.power)
}


const change = (item:EDataPersonItem) => {
    // console.log(item,"333333333333333333333333333333333");
    
    let Ebox=proxy.$echarts.init(
    item.div,
    "dark"
  );
  Ebox.setOption(item.data);
  item.box = Ebox
};
function setchartWH(width:any,height:any){
  if(!echartsData.power.div){
    echartsData.power!.div=Power.value
  }
  echartsData.power.div.style.height=height+'px'
  echartsData.power.div.style.width=width+'px'
  if(echartsData.power.box){
    echartsData.power.box.resize()
  }

};
// async function getData(){
//   let result:any = await getPowerData()
 
//   if(result.code==200){
//     let room:String[] = []
//     let year={}
//     for(let key in result.data){
//       room.push(key)
//       for(let sonKey in result.data[key]){
//         if(year[sonKey]){
//           year[sonKey].push(result.data[key][sonKey])
//         }else{
//           year[sonKey]=[result.data[key][sonKey]]
//         }
//       }
      
//     }
//     setData(room,year,result.title)
//   }
// }

async function getData2(){
  let result:any = await getPowerData()
 
  if(result.code==200){
    
    setData2(result.data2)
  }
}

onMounted(() => {
    // setData()
    // getData()
    getData2()
})

// return{setchartWH}
defineExpose({
    setchartWH,
})
</script>

<style module>
 .container {
 }
</style>
