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

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import chart from "@/components/assembly/chart.vue";
import { useenergyUseStore } from "@/store/module/energyUse";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useenergyUseStore();

let waterhistory = ref();
let gashistory = ref();

let waterData = reactive({
  title: "",
  option: {
    title: {
    text: t('messages.waterhistory'),
    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',
    
  },
},
    legend: {
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
      data: [t('messages.waterTip')],
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        data: [],
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          // 网格线
          show: true,
          lineStyle: {
            //分割线
            color: "#B3A5A5",
            width: 1,
            type: "dashed", //dotted：虚线 solid:实线
          },
        },
      },
    ],
    series: [
      {
        name: t('messages.waterTip'),
        type: "bar",
        barWidth:'30%',
        label: {
          normal: {
            show: true,
            formatter: "{c}m³",
            position: "top",
            textStyle: {
              color: "",
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          color: "#1273c3",
        },
        emphasis: {
          focus: "series",
        },
        data: [],
      },
    ],
  },
});
let gasData = reactive({
  title: "",
  option: {
    title: {
    text: t('messages.gashistory'),
    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',
    
  },
},
    legend: {
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
      data: [t('messages.gasTip')],
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
    
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        data: [1],
      },
    ],
    yAxis: [
      {
        type: "value",
        // axisLine: {
        //   show: false,
        //   lineStyle: {
        //     color: "#fff",
        //   },
        // },
        // splitLine: {
        //   // 网格线
        //   show: true,
        //   lineStyle: {
        //     //分割线
        //     color: "#B3A5A5",
        //     width: 1,
        //     type: "dashed", //dotted：虚线 solid:实线
        //   },
        // },
      },
    ],
    series: [
      {
        name: t('messages.gasTip'),
        type: "bar",
        barWidth:'30%',
        label: {
          normal: {
            show: true,
            formatter: "{c}m³",
            position: "top",
            textStyle: {
              color: "",
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            color: "#1a724a",
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [1],
      },
    ],
  },
});

let props = defineProps<{
  width: number;
  height: number;
}>();
watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);
function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  box(val.width, val.height);
}
const box = (width: any, height: any) => {
  let a = calcWH(height, width, 2, 1, 0);

  waterhistory.value.setchartWH(a.oWidth, a.oHeight);
  gashistory.value.setchartWH(a.oWidth, a.oHeight);
  // tableref.value.setchartWH(a.oWidth, a.oHeight);
  // swiperref.value.setchartWH(a.oWidth, a.oHeight);
};
//监听用水量
watch(
  () => store.waterHistory,
  (newVal, oldVal) => {
    changewaterData(newVal);
  },
  { deep: true, flush: "post" }
);
function changewaterData(val :any){
  let x = []
  let y = []
val.forEach(res=>{
  x.push(res.years)
  y.push(res.usageNum)
})
  waterData.option.xAxis[0].data=x
  waterData.option.series[0].data=y
  waterhistory.value.changeData(waterData.option);
}
//监听用气量
watch(
  () => store.gasHistory,
  (newVal, oldVal) => {
    changegasData(newVal);
  },
  { deep: true, flush: "post" }
);
function changegasData(val :any){
  let x = []
  let y = []
val.forEach(res=>{
  x.push(res.years)
  y.push(res.usageNum)
})
gasData.option.xAxis[0].data=x
gasData.option.series[0].data=y
gashistory.value.changeData(gasData.option);
}
onMounted(() => {});
</script>

<style scoped>
.content-left {
  width: 100%;
  /* display: flex; */
}
</style>
