<!--
 * @FilePath: \gitscreenFront\src\views\energyConsumeJixiefenchang\content\top.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; width: 100%; height: 100%">
          <!-- <chart
            :title="gasOption.title"
            :option="gasOption.option"
            ref="ratio"
            @click="clickPowerChart"
          ></chart> -->
          <chart
            :title="gasOption.title"
            :option="gasOption.option"
            ref="ratio"
          ></chart>
          <gas ref="gasref" :title="t('messages.GasConsumption_2023JiXie')"></gas>
        </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/power2023.vue";
import chart from "./chart/chartRatio.vue";
import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import gas from "./chart/gas.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useEnergyConsumeStore();
const router = useRouter();

let ratio = ref();
let gasref = 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:'2%'
    },
    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",
      width: 800,
      // right: 20,
      top:'8%'
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "0%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    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: "8%",
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       containLabel: true,
//     },
//     xAxis: {
//       type: "category",
//       data: [],
//     },
//     yAxis: {
//       type: "value",
//     },
//     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, 1, 4, 0);
  //修改高度
  ratio.value.setchartWH(a.oWidth * 3, a.oHeight);
  gasref.value.setchartWH(a.oWidth-20, a.oHeight);
};
const clickPowerChart = () => {
  router.push({
    path: "/energyConsume/historyData",
  });
};

watch(
  () => store.powerRatio,
  (newVal, oldVal) => {
    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 (index != storekey) {
            console.log(index);

            if (!option1.list[key]) {
              option1.list[key] = [];
            }
            if(res=='0.000'||res=='0.0000'){
                res=null
            }
            option1.list[key].push(res);
          } else {
            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)",
          },
          barWidth:'80px',
          label: {
            show: true,
          },
        });
      } else {
        series.push({
          name: key + "月",
          stack: "2023",
          data: noData,
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          barWidth:'80px',
          label: {
            show: true,
          },
        });
      }
      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:'80px',
          label: {
            show: true,
          },
        });
      } else {
        series2.push({
          name: "",
          stack: "2023",
          data: noData,
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          barWidth:'80px',
          label: {
            show: true,
          },
        });
      }
    }
    gasOption.option.series = series;
    // gasOption2.option.series = series2;
    ratio.value.changeData(gasOption.option);
  },
  { deep: true, flush: "post" }
);
watch(
  () => store.nowYearGas,
  (newVal, oldVal) => {
    if (!newVal) {
      return;
    } else {
      if (newVal.length == 0) {
        return;
      }
    }
    changeGas(newVal);
  },
  { deep: true, flush: "post" }
);
function changeGas(val) {
  val.forEach((res) => {
    if(res.deptName=='喷漆车间'){
        gasref.value.setData(res.usageNum);
    }
    
  });
//   gasOption.option.xAxis.data=x
//   gasOption.option.series[0].data=y
//   gas1.value.changeData(gasOption.option)
}
onMounted(() => {
 
});
</script>

<style scoped></style>
