<!-- 报表查询-用能查询-年数据 -->
<template>
  <div>
    <div class="findwatercharts" ref="findwater_ref"></div>
    <!-- 表格 -->
    <el-table
      class="maintable"
      header-align="center"
      :data="tableData"
      style="margin-right: 0.13rem"
      :cell-style="tableRowStyle"
    >
      <el-table-column
        align="center"
        prop="itemType"
        label="类别"
        width="160"
        fixed="left"
      >
      </el-table-column>
      <el-table-column align="center" prop="month01" label="1月">
      </el-table-column>
      <el-table-column align="center" prop="month02" label="2月">
      </el-table-column>
      <el-table-column align="center" prop="month03" label="3月">
      </el-table-column>
      <el-table-column align="center" prop="month04" label="4月">
      </el-table-column>
      <el-table-column align="center" prop="month05" label="5月">
      </el-table-column>
      <el-table-column align="center" prop="month06" label="6月">
      </el-table-column>
      <el-table-column align="center" prop="month07" label="7月">
      </el-table-column>
      <el-table-column align="center" prop="month08" label="8月">
      </el-table-column>
      <el-table-column align="center" prop="month09" label="9月">
      </el-table-column>
      <el-table-column align="center" prop="month10" label="10月">
      </el-table-column>
      <el-table-column align="center" prop="month11" label="11月">
      </el-table-column>
      <el-table-column align="center" prop="month12" label="12月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="totalValue"
        label="合计"
        fixed="right"
        width="100"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getYear } from "@/utils/datetime";
import * as echarts from "echarts";
export default {
  props: {
    chType: {
      type: Number,
    },
    chTime: {
      type: String,
    },
    jtData: {
      type: String,
    },
  },
  data() {
    return {
      chartInstance1: null,
      option1: {
        series: [],
      },
      // 给后端日期
      endTime: "",
      //表格数据
      tableData: [],
      // 四条折线图
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: [],
      // 图例
      data6: [],
      // x轴数据
      data8: [],
    };
  },
  watch: {
    chType: {
      immediate: true,
      deep: true,
      handler(newVal, val) {
        // console.log("子组件改变的值", newVal);
        this.$nextTick(function () {
          this.getYearData();
        });
      },
    },
    // 对vuex里的点击的楼栋id进行监听
    jtData: {
      handler(newVal, oldVal) {
        // console.log("监听vuex的id", newVal, oldVal);
        this.$nextTick(function () {
          this.getYearData();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getYearData();
    this.initChart1();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      // 如果第1列，修改颜色
      if (columnIndex === 0) {
        return "background-color: #31354e !important;";
      }
    },
    // 查询表格数据
    getYearData() {
      // 本月 本年参数
      // 选择时间的参数 父传子
      // 楼栋id 兄弟组件传值
      // select选择的值  父传子
      if (this.chTime) {
        this.endTime = this.chTime;
      } else {
        this.endTime = getYear(0);
      }
      let params = {
        curDate: this.endTime,
        buildingId: this.endId,
        type: this.chType,
      };
      console.log("年表格参数", params);
      //   this.$api.statementfind.energyYear(params).then((res) => {
      //     // console.log("年表格返回", res);
      //     if (res.code == 200) {
      //       var line1 = [];
      //       var line2 = [];
      //       var line3 = [];
      //       var line4 = [];
      //       this.tableData = res.data;
      //       // Object.values 把数组对象 转化为 数组
      //       line1 = Object.values(this.tableData[0]).slice(3, 15);
      //       line2 = Object.values(this.tableData[1]).slice(3, 15);
      //       line3 = Object.values(this.tableData[2]).slice(3, 15);
      //       line4 = Object.values(this.tableData[3]).slice(3, 15);
      //       // 四条折线图  filter里过滤掉空值
      //       this.data1 = line1.filter(function (s) {
      //         return s && s.trim();
      //       });
      //       this.data2 = line2.filter(function (s) {
      //         return s && s.trim();
      //       });
      //       // 含百分比的数组数据还需要处理
      //       var line5 = line3.filter(function (s) {
      //         return s && s.trim();
      //       });
      //       this.data3 = [];
      //       this.data4 = [];
      //       // 遍历去除掉%，拼接后返回新数组
      //       line5.forEach((item) => {
      //         this.data3.push(item.split("%").join(""));
      //       });
      //       var line6 = line4.filter(function (s) {
      //         return s && s.trim();
      //       });
      //       line6.forEach((item) => {
      //         this.data4.push(item.split("%").join(""));
      //       });
      //       // 折线图x轴 数据
      //       // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
      //       //定义一个新数组
      //       let newObj = {};
      //       for (let key in this.tableData[0]) {
      //         if (this.tableData[0][key]) {
      //           newObj[key] = this.tableData[0][key];
      //         }
      //       }
      //       // console.log("不含空的数组对象", newObj);
      //       // 在返回的新的对象中，取出对象的所有key值返回新数组
      //       // Object.setPrototypeOf(this.newObj);
      //       let data7 = Object.keys(newObj);
      //       // console.log("不含空的x轴数据", data7);
      //       // 先返回月的数组
      //       let allArr = [
      //         "month01",
      //         "month02",
      //         "month03",
      //         "month04",
      //         "month05",
      //         "month06",
      //         "month07",
      //         "month08",
      //         "month09",
      //         "month10",
      //         "month11",
      //         "month12",
      //       ];
      //       // 非空数组和所有月的数组进行筛选出重复的元素
      //       function compare(data7, allArr) {
      //         return data7.filter((v) => {
      //           return allArr.includes(v);
      //         });
      //       }
      //       // console.log("x轴未分割月份", compare(data7, allArr));
      //       // 分割data7，返回月份 xx月
      //       this.data8 = [];
      //       compare(data7, allArr).forEach((item) => {
      //         if (item) {
      //           this.data8.push(item.split("month").join("") + "月");
      //         }
      //       });
      //       // console.log("x轴数据", this.data8);
      //       // 图例
      //       this.data6 = [];
      //       this.data5 = this.tableData.forEach((item) => {
      //         return this.data6.push(item.itemType);
      //       });
      //       // console.log("data1数据", this.data1);
      //       // console.log("data2数据", this.data2);
      //       // console.log("data3数据", this.data3);
      //       // console.log("data4数据", this.data4);
      //       // console.log("图例文字", this.data6);
      //       // 月数据
      //       var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
      //         Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
      //         Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
      //         Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
      //       // console.log("Min1", Min1);
      //       // console.log("Min2", Min2);
      //       // console.log("Max1", Max1);
      //       // console.log("Max2", Max2);
      //       this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
      //       const adapterOption = {
      //         legend: {
      //           data: this.data6,
      //         },
      //         xAxis: {
      //           data: this.data8,
      //         },
      //         yAxis: [
      //           //两个y轴
      //           {
      //             min: Min1,
      //             max: Max1,
      //             splitNumber: 10,
      //             interval: (Max1 - Min1) / 10,
      //           },
      //           {
      //             min: Min2,
      //             max: Max2,
      //             splitNumber: 10,
      //             interval: (Max2 - Min2) / 10,
      //           },
      //         ],
      //         series: [
      //           {
      //             name: this.data6[0],
      //             data: this.data1,
      //           },
      //           {
      //             name: this.data6[1],
      //             data: this.data2,
      //           },
      //           {
      //             name: this.data6[2],
      //             data: this.data3,
      //           },
      //           {
      //             name: this.data6[3],
      //             data: this.data4,
      //           },
      //         ],
      //       };
      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      //       this.chartInstance1.setOption(adapterOption);
      //       //手动的调用图标对象的resize才能产生效果
      //       this.chartInstance1.resize();
      //     }
      //   });
    },
    // 导出数据
    outTable() {
      // console.log("年数据啦");
      import("@/assets/excel/Export2Excel").then((excel) => {
        const tHeader = [
          "类别",
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
          "合计",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "itemType",
          "month01",
          "month02",
          "month03",
          "month04",
          "month05",
          "month06",
          "month07",
          "month08",
          "month09",
          "month10",
          "month11",
          "month12",
          "totalValue",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        // const list = this.tableData;
        // console.log(list)
        if (this.chTime) {
          this.endTime = this.chTime;
        } else {
          this.endTime = getYear(0);
        }
        let params = {
          curDate: this.endTime,
          buildingId: this.endId,
          type: this.chType,
        };
        console.log("年表格参数", params);
        // this.$api.statementfind.energyYear(params).then((res) => {
        //   if (res.code == 200) {
        //     // console.log(res);
        //     const data = this.formatJson(filterVal, res.data);
        //     const autoWidth = true;
        //     excel.export_json_to_excel({
        //       header: tHeader, //表头
        //       data, //数据
        //       filename: "年数据报表", //名称
        //       autoWidth: true, //宽度自适应
        //     });
        //   }
        // });
      });
    },
    //格式转换,不需要改动
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "installDate") {
            return format(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    //初始化chartInstance1对象
    // 如果父组件点击了月 x轴数据 1号 2号 3号。。。
    // 如果父组件点击了年 x轴数据 1月 2月 3月。。。
    initChart1() {
      this.$emit("initChart1");
      this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
      this.option1 = {
        tooltip: {
          trigger: "axis",
          // 以下为鼠标hover时的背景颜色
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(30, 69, 113, 0.15)",
              width: "1",
            },
          },
        },
        legend: {
          // 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同
          // icon: "cricle",
          //图例文字颜色
          textStyle: {
            color: "#ffff",
            fontSize: 12, //这里改字体大小
          },
          left: "56%",
          top: "5%",
          //图例距离饼图的距离
          itemGap: 5,
          itemWidth: 10,
          itemHeight: 5,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          //设置为true代表离零刻度间隔一段距离
          boundaryGap: true,
          // 修饰刻度标签的颜色即x坐标数据
          axisLabel: {
            // interval: 0,
            // rotate: 30, //x轴坐标字体倾斜30度
            color: "rgba(255,255,255,.7)",
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: true,
            lineStyle: {
              // X 轴颜色配置
              color: "#707070",
            },
          },
          //splitLine: { show: true }  //x轴分割线
        },
        yAxis: [
          //两个y轴
          {
            type: "value",
            // 修饰刻度标签的颜色即y坐标数据
            axisLabel: {
              color: "rgba(255,255,255,.7)",
            },
            // 显示y坐标轴的颜色
            axisLine: {
              show: true,
              lineStyle: {
                // X 轴颜色配置
                color: "#707070",
              },
            },
            //y轴分割线段数
            splitNumber: 10,
            // 修改y轴分割线的颜色
            splitLine: {
              lineStyle: {
                // color: "#252843",
                color: "#707070",
              },
            },
          },
          {
            type: "value",
            // 修饰刻度标签的颜色即y坐标数据
            axisLabel: {
              color: "rgba(255,255,255,.7)",
              formatter: "{value} %",
            },
            // 显示y坐标轴的颜色
            axisLine: {
              show: true,
              lineStyle: {
                // X 轴颜色配置
                color: "#707070",
              },
            },
            //y轴分割线段数
            splitNumber: 5,
            // 修改y轴分割线的颜色
            splitLine: {
              lineStyle: {
                // color: "#252843",
                color: "#707070",
              },
            },
          },
        ],

        series: [
          {
            type: "bar",
            barWidth: 10, // 柱子宽度
            //折线颜色
            itemStyle: {
              color: "#db9215",
              lineStyle: {
                color: "#db9215", //折线的颜色
              },
            },
          },
          {
            type: "bar",
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + "吨";
            //   },
            // },
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                //数据单位格式化
                var relVal = params[0].name; //x轴名称
                if (params[0].seriesName == "2022年用水量") {
                  relVal =
                    params[0].name +
                    "<br/>" +
                    params[0].seriesName +
                    " : " +
                    params[0].value +
                    " 吨";
                } else if (params[0].seriesName == "用电量") {
                  relVal =
                    params[0].name +
                    "<br/>" +
                    params[0].seriesName +
                    " : " +
                    params[0].value +
                    " 度";
                } else if (params[0].seriesName == "耗能") {
                  relVal =
                    params[0].name +
                    "<br/>" +
                    params[0].seriesName +
                    " : " +
                    params[0].value +
                    " 度/吨";
                } else {
                  relVal =
                    params[0].name +
                    "<br/>" +
                    params[0].seriesName +
                    " : " +
                    params[0].value +
                    " 次";
                }
                return relVal;
              },
            },
            barWidth: 10, // 柱子宽度
            //折线颜色
            itemStyle: {
              color: "#1ab395",
              lineStyle: {
                color: "#1ab395", //折线的颜色
              },
            },
          },
          {
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value + "%";
              },
            },
            // stack: 'Total',
            symbol: "circle",
            // 拐点大小
            symbolSize: 6,
            yAxisIndex: 1,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // data: this.data3,
            //折线颜色
            itemStyle: {
              color: "#e23131",
              lineStyle: {
                color: "#e23131", //折线的颜色
              },
            },
          },
          {
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value + "%";
              },
            },
            // stack: 'Total',
            symbol: "circle",
            // 拐点大小
            symbolSize: 6,
            //第二个y轴
            yAxisIndex: 1,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // data: this.data4,
            //折线颜色
            itemStyle: {
              color: "#4a98ff",
              lineStyle: {
                color: "#4a98ff", //折线的颜色
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance1.setOption(this.option1, true);
    },
    // 折线图自适应
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = (this.$refs.findwater_ref.offsetWidth / 100) * 1.8;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {
        //比如fontSize
        textStyle: {
          fontSize: titleFontSize,
        },
      };
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance1.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance1.resize();
    },
  },
};
</script>
<style scoped>
.findwatercharts {
  margin-bottom: 0.35rem;
  width: 100%;
  height: 4.5rem;
  /* background-color: pink; */
}
</style>
