<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\energyConsume\content\left.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 14:43:28
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div style="display: flex">
          <chart
            :title="gasOption.title"
            :option="gasOption.option"
            ref="ratio"
            @click="clickPowerChart"
          ></chart>

          <!-- <power
            ref="yields"
            :title="'2023年生产额(元)'"
          ></power> -->
          <div>
            <power ref="power1" :title="t('messages.PowerProductionto2023')"></power>
            <power2 ref="yields" :title="t('messages.jixiePowerto2023')"></power2>
          </div>
          
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
// import {getPowerData} from '@/http/environment'
import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
import power from "./chart/power.vue";
import power2 from "./chart/power2023.vue";
import chart from "./chart/chartRatio.vue";
import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useEnergyConsumeStore();
const router = useRouter();

let power1 = ref();
let yields = ref();
let ratio = ref();

let props = defineProps<{
  width: number;
  height: number;
}>();
watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);

let gasOption = reactive({
  title: "",
  option: {
    title: {
      text: t('messages.performanceYOYto2023'),
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
      top:'1%'
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
        axis: "auto",
      },
    },
    legend: {
      type: "scroll",
      top: "6%",
      left: "10%",
      width: "auto",
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "-5%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",      
      show:false,
      splitLine:{
      show:false
    }
    },
    series: [],
  },
});
let gasOption2 = reactive({
  title: "",
  option: {
    title: {
      text: "",
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
        axis: "auto",
      },
    },
    // legend: {
    //   type: "scroll",
    //   // top: '3%',
    //   // itemStyle:{
    //   //     data:yue
    //   //   },
    // },
    grid: {
      top: "10%",
      left: "-50%",
      right: "-10%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
      show:false
    },
    series: [],
  },
});
function reset(val: any) {
  //宽高为0时跳出该方法

  if (!val.width && !val.height) return;

  //重置盒子尺寸
  powerBox(val.width, val.height);
}
const powerBox = (width: any, height: any) => {
  let a = calcWH(height, width, 5, 2, 0);
  //修改高度
  power1.value.setchartWH(a.oWidth +90, a.oHeight*3 - 30);
  yields.value.setchartWH(a.oWidth+120, a.oHeight*2 - 30);
  ratio.value.setchartWH(a.oWidth-120, a.oHeight*5);
};
const clickPowerChart = () => {
  router.push({
    path: "/energyConsume/historyData",
  });
};
async function getpower() {
  let result: any = await getPowerData({ time: 1 });

  if (result.code == 200) {
    // result.data.name = result.data.name.reverse();
    // result.data.listData.forEach((res) => {
    //   for (let key in res.month) {
    //     res.month[key] = res.month[key].reverse();
    //   }
    // });
    //对应车间的下标
    // let dataDownIndex=[]
    // let namedata=[]
    // result.data.name.forEach((res,index)=>{
    //   if(res=='精饰车间'||res=='精加车间'||res=='焊接车间'||res=='大件车间'||res=='机加车间'){
    //     dataDownIndex.push(index)
    //     namedata.push(res)
    //   }
    // })
    // result.data.name=namedata
    // result.data.listData.forEach((res) => {
    //   for (let key in res.month) {
    //     let datakey=[]
    //     res.month[key].forEach((ele,index)=>{
          
    //       dataDownIndex.forEach(e=>{
    //         if(index==e){
    //           datakey.push(ele)
    //         }
    //       })
          
    //     })
    //     res.month[key]=datakey
    //     datakey=[]
    //   }
    // });
    // power1.value.setData(result.data);
    yields.value.setData(result.data);
  }
}

watch(
  () => store.powerProduct,
  (newVal, oldVal) => {
    // 生成与数据对应的长度大小的null
    let nData = newVal;
    let noMonth = [];
    nData.name.forEach((res) => {
      noMonth.push(null);
    });
    nData.listData.forEach((res) => {
      for (let key = 1; key <= 12; key++) {
        if (!res.month[key]) {
          res.month[key] = noMonth;
        }
      }
    });

    power1.value.setData(nData);
    // changeGas(newVal);
  },
  { deep: true, flush: "post" }
);
watch(
  () => store.powerRatio,
  (newVal, oldVal) => {
    console.log(newVal, "dfsfsdf");

    if (!newVal) {
      return;
    }
    let option1 = { list: {}, name: [] };
    let option2 = { list: {}, name: ["机械分厂"] };
    let storekey = null;
    for (let i = 0; i <= newVal.name.length - 1; i++) {
      if (newVal.name[i] != "机械分厂") {
        option1.name.push(newVal.name[i]);
      } else {
        storekey = i;
      }
    }
    for (let key = 1; key <= 12; key++) {
      // console.log(newVal.listData[key]);
      if (newVal.listData[key]) {
        newVal.listData[key].forEach((res, index) => {
          if (res == "0.0000"||res == "0.000") {
            res = null;
          }
          if (index != storekey) {
            if (!option1.list[key]) {
              option1.list[key] = [];
            }
            option1.list[key].push(res);
          } else {
            console.log(index);
            if (!option2.list[key]) {
              option2.list[key] = [];
            }
            option2.list[key].push(res);
          }
        });
      }
    }
    gasOption.option.xAxis.data = option1.name;
    gasOption2.option.xAxis.data = option2.name;
    let series = [];
    let series2 = [];
    let noData = [];
    newVal.name.forEach(() => {
      noData.push(null);
    });
    for (let key = 1; key <= 12; key++) {
      if (option1.list[key]) {
        series.push({
          name: key + "月",
          stack: "2023",
          data: option1.list[key],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          label: {
            show: true,
            formatter: function (value, index) {
              return value.value.toLocaleString();
            },
          },
        });
      } else {
        series.push({
          name: key + "月",
          stack: "2023",
          data: noData,
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          barWidth:'60%',
          label: {
            show: true,
            formatter: function (value, index) {
              return value.value.toLocaleString();
            },
          },
        });
      }
      if (option2.list[key]) {
        series2.push({
          name: "",
          stack: "2023",
          data: option2.list[key],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          barWidth:'22%',
          label: {
            show: true,
            formatter: function (value, index) {
              
              return JSON.parse(value.value).toLocaleString();
            },
          },
        });
      } else {
        series2.push({
          name: "",
          stack: "2023",
          data: noData,
          type: "bar",
          showBackground: true,
          barWidth:'20%',
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          label: {
            show: true,
            formatter: function (value, index) {
              return value.value.toLocaleString();
            },
          },
        });
      }
    }
    gasOption.option.series = series;
    gasOption2.option.series = series2;

    ratio.value.changeData(gasOption.option, gasOption2.option);
  },
  { deep: true, flush: "post" }
);

onMounted(() => {
  getpower();
});
</script>

<style scoped></style>
