<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\energyConsume\content\chart\power.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 15:04:23
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div>
    <border4 ref="refborder4">
      <template v-slot>
        <div style="display: flex; flex-direction: column;">
          <div ref="powerjixie"></div>
          <div ref="power"></div>

        </div>

      </template>
    </border4>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { EDataPerson, EDataPersonItem } from "@/type/energyConsume";
import { accAdd } from "@/utils/precision";
import border4 from "@/components/borderBox/border6.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
}>();
let power = ref();
let powerjixie = ref();

let refborder4 = ref();

const echartsData = reactive<EDataPerson>({
  power: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});
const echartsData2 = reactive<EDataPerson>({
  power: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});

const setData = (value: any) => {
  let series = [];
  let series2 = [];
  let name = [];
  let name2 = [];
  let shuju = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
  let shuju2 = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
  let nameIndex = null;
  value.name.forEach((ele, index) => {
    if (ele == "机械分厂") {
      name2.push(ele);
      nameIndex = index;
    } else {
      name.push(ele);
    }
  });
  value.listData.forEach((res,listDataindex) => {
    for (let key in res.month) {
      res.month[key].forEach((ele,index)=>{
        if(!shuju2[listDataindex].month[key]){
          shuju2[listDataindex].month[key]=[]
        }
        if(!shuju[listDataindex].month[key]){
          shuju[listDataindex].month[key]=[]
        }
        if(index==nameIndex){
          shuju2[listDataindex].month[key].push(ele)
        }else{
          shuju[listDataindex].month[key].push(ele)
        }
      })
    }
  });
  shuju.forEach((res) => {
    for (let key in res.month) {
      series.push({
        name: key + "月",
        type: "bar",
        stack: res.type,
        emphasis: {
          focus: "coordinateSystem",
          label: {
            show: true,
            formatter: function (value, index) {
              return value.value.toLocaleString();
            },
          },
        },
        data: res.month[key],
        xAxisIndex: res.type == "生产额" ? 0 : 1,
      });
    }
  });
  shuju2.forEach((res) => {
    for (let key in res.month) {
      series2.push({
        name: key + "月",
        type: "bar",
        stack: res.type,
        barWidth:'20%',
        emphasis: {
          focus: "coordinateSystem",
          label: {
            show: true,
            formatter: function (value, index) {
              return value.value.toLocaleString();
            },
          },
        },
        data: res.month[key],
        xAxisIndex: res.type == "生产额" ? 0 : 1,
      });
    }
  });
  //data0用于初始化计算的数据
  let data0 = [];
  for (let i = 1; i <= value.name.length; i++) {
    data0.push(0);
  }
  let data1 = [];
  for (let i = 1; i <= name2.length; i++) {
    data1.push(0);
  }

  series.push(
    {
      name: "",
      type: "bar",
      data: data0,
      color: "#bbf",
      stack: value.listData[0].type,
      // barWidth: 30,
      label: {
        show: true,
        position: "right",
        color: "#fff",
      },
      xAxisIndex: 0,
    },
    {
      name: "",
      type: "bar",
      data: data0,
      color: "#bbf",
      stack: value.listData[1].type,
      // barWidth: 30,
      label: {
        show: true,
        position: "right",
        color: "#fff",
      },
      xAxisIndex: 1,
    }
  );
  series2.push(
    {
      name: "",
      type: "bar",
      data: data1,
      color: "#bbf",
      stack: value.listData[0].type,
      // barWidth: 30,
      label: {
        show: true,
        position: "right",
        color: "#fff",
      },
      xAxisIndex: 0,
    },
    {
      name: "",
      type: "bar",
      data: data1,
      color: "#bbf",
      stack: value.listData[1].type,
      // barWidth: 30,
      label: {
        show: true,
        position: "right",
        color: "#fff",
      },
      xAxisIndex: 1,
    }
  );

  echartsData.power!.div = powerjixie.value;
  echartsData.power!.title =props.title;;
  echartsData.power!.data = {
    title: {
      text: echartsData.power!.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top:"2%"
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
        axis: "auto",
      },
    },
    // color:color,
    legend: {
      type: "scroll",
      top: "10%",
      // itemStyle:{
      //     data:yue
      //   },
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "15%",
      bottom: "-0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        name: t('messages.Production_yuan'),
        show:false,
        splitLine:{
      show:false
    }
      },
      {
        type: "value",
        name: t('messages.powerhi_du'),
        splitLine:{
      show:false
    }
        // show:false
      },
    ],
    yAxis: {
      type: "category",
      data: name,
    },
    series: series,
  };

  echartsData2.power!.div = power.value;
  echartsData2.power!.title ='';
  echartsData2.power!.data = {
    title: {
      text: '',
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
        axis: "auto",
      },
    },
    // color:color,
    // legend: {
    //   type: "scroll",
    //   top: "5%",
    //   // itemStyle:{
    //   //     data:yue
    //   //   },
    // },
    grid: {
      top: "-35%",
      left: "3%",
      right: "15%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        name: t('messages.Production_yuan'),
        splitLine:{
      show:false
    },
    max:10000000
        // show:false
      },
      {
        type: "value",
        name: t('messages.powerhi_du'),
        splitLine:{
      show:false
    },
        show:false
      },
    ],
    yAxis: {
      type: "category",
      data: name2,
    },
    series: series2,
  };
  change(echartsData.power, value);
  change(echartsData2.power,value)
};

const change = (item: EDataPersonItem, value: any) => {
  let Ebox = proxy.$echarts.init(item.div, "dark");
  clacChartsSum(item.data, value);
  Ebox.setOption(item.data);
  item.box = Ebox;
  changeecharts(item.data, value);
};

/**
 * @函数功能: 修改用电量总数数值的标签
 * @param {*} option echarts数据
 * @param {*} value api接收数据
 * @出口参数:
 * @函数备注:
 */
const clacChartsSum = (option: any, value: any) => {
  var series = option.series;
  function getSum1(params) {
    let stack = value.listData[0].type;
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      if (series[i].stack == stack) {
        // datavalue += series[i].data[params.dataIndex]
        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
      }
    }
    if(stack=='生产额'){
      stack=t('messages.Production')
    }else if(stack=='用电量'){
      stack=t('messages.powerTip')
    }

    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
  }
  function getSum2(params) {
    let stack = value.listData[1].type;
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      if (series[i].stack == stack) {
        // datavalue += series[i].data[params.dataIndex]
        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
      }
    }
    if(stack=='生产额'){
      stack=t('messages.Production')
    }else if(stack=='用电量'){
      stack=t('messages.powerTip')
    }

    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
  }
  series[series.length - 1].label.formatter = getSum2;
  series[series.length - 2].label.formatter = getSum1;
};

/**
 * @函数功能: 修改用电量总数数值的标签
 * @param {*} option echarts数据
 * @param {*} value api接收数据
 * @出口参数:
 * @函数备注:
 */
const changeecharts = (option: any, value: any) => {
  var series = option.series;

  echartsData.power.box.on("legendselectchanged", (obj) => {
    //重新计算前一年数据
    function getSum1(params) {
      let stack = value.listData[0].type;
      var datavalue = 0;
      for (var i = 0; i < series.length; i++) {
        if (obj.selected[series[i].name]) {
          if (series[i].stack == stack) {
            // datavalue += series[i].data[params.dataIndex]
            datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
          }
        }
      }
      if(stack=='生产额'){
      stack=t('messages.Production')
    }else if(stack=='用电量'){
      stack=t('messages.powerTip')
    }

      return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
    }
    //重新计算今年年数据
    function getSum2(params) {
      let stack = value.listData[1].type;
      var datavalue = 0;
      for (var i = 0; i < series.length; i++) {
        if (obj.selected[series[i].name]) {
          if (series[i].stack == stack) {
            // datavalue += series[i].data[params.dataIndex]
            datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
          }
        }
      }
      if(stack=='生产额'){
      stack=t('messages.Production')
    }else if(stack=='用电量'){
      stack=t('messages.powerTip')
    }

      return datavalue ? stack + ":" + datavalue.toLocaleString() + "" : null;
    }
    series[series.length - 1].label.formatter = getSum2;
    series[series.length - 2].label.formatter = getSum1;
    echartsData.power.box.setOption(option);
  });

  function getSum1(params) {
    let stack = value.listData[0].type;
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      if (series[i].stack == stack) {
        // datavalue += series[i].data[params.dataIndex]
        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
      }
    }
    if(stack=='生产额'){
      stack=t('messages.Production')
    }else if(stack=='用电量'){
      stack=t('messages.powerTip')
    }

    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
  }
  function getSum2(params) {
    let stack = value.listData[1].type;
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      if (series[i].stack == stack) {
        // datavalue += series[i].data[params.dataIndex]
        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
      }
    }
    if(stack=='生产额'){
      stack=t('messages.Production')
    }else if(stack=='用电量'){
      stack=t('messages.powerTip')
    }

    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
  }
  series[series.length - 1].label.formatter = getSum2;
  series[series.length - 2].label.formatter = getSum1;
};

function setchartWH(width: any, height: any) {
  echartsData.power!.div = power.value;
  power.value.style.height = height/20*5 + "px";
  power.value.style.width = width + "px";
  
  powerjixie.value.style.height = height/20*15 + "px";
  powerjixie.value.style.width = width + "px";
  refborder4.value.resetWH();
  if (echartsData.power.box) {
    echartsData.power.box.resize();
    echartsData2.power.box.resize();
  }
}
onMounted(() => {});

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

<style scoped></style>
