<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\right.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-15 11:49:28
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- <water ref="water1" title="2023年总用水量(吨)" data="2940"></water> -->
        <chart
          :title="waterOption.title"
          :option="waterOption.option"
          ref="water1"
        ></chart>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- <gas ref="gas1" title="2023年总用气量(立方)" data="91346.15"></gas> -->
        <chart
          :title="gasOption.title"
          :option="gasOption.option"
          ref="gas1"
        ></chart>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import water from "./chart/water.vue";
import gas from "./chart/gas.vue";
import chart from "@/components/assembly/chart.vue";
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useEnergyConsumeStore();
let props = defineProps<{
  width: number;
  height: number;
}>();
watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);

let water1 = ref();
let gas1 = ref();
let waterOption = reactive({
  title: "",
  option: {
    title: {
      text: t('messages.waterto2023_t'),
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "bar",
        showBackground: true,
        label:{
          show:true
        },
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  },
});
let gasOption = reactive({
  title: "",
  option: {
    title: {
      text: t('messages.gasto2023'),
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    color: "#7CFFB2",
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        interval: 0, //控制X轴刻度全部显示
        rotate: 45, //倾斜角度
      },
    },
    series: [
      {
        data: [],
        type: "bar",
        showBackground: true,
        label:{
          show:true
        },
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  },
});
watch(
  () => store.nowYearWater,
  (newVal, oldVal) => {
    if (!newVal) {
      return;
    } else {
      if (newVal.length == 0) {
        return;
      }
    }
    changeWater(newVal);
  },
  { deep: true, flush: "post" }
);
function changeWater(val) {
  let x = [];
  let y = [];
  val.forEach((res) => {
    x.push(res.deptName);
    y.push(res.usageNum);
  });
  waterOption.option.xAxis.data=x
  waterOption.option.series[0].data=y
  water1.value.changeData(waterOption.option)
}
watch(
  () => store.nowYearGas,
  (newVal, oldVal) => {
    if (!newVal) {
      return;
    } else {
      if (newVal.length == 0) {
        return;
      }
    }
    changeGas(newVal);
  },
  { deep: true, flush: "post" }
);
function changeGas(val) {
  let x = [];
  let y = [];
  val.forEach((res) => {
    x.push(res.deptName);
    y.push(res.usageNum);
  });
  gasOption.option.xAxis.data=x
  gasOption.option.series[0].data=y
  gas1.value.changeData(gasOption.option)
}
function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;

  //重置盒子尺寸
  waterBox(val.width, val.height);
}

const waterBox = (width: any, height: any) => {
  let a = calcWH(height, width, 2, 1, 0);
  //修改高度
  a.oHeight = a.oHeight;
  water1.value.setchartWH(a.oWidth, a.oHeight);
  gas1.value.setchartWH(a.oWidth, a.oHeight);
};
</script>

<style scoped></style>
