<template>
  <div class="main-body">
    <div class="irregular-border">
      <div class="main-content">
        <div class="condition">
          <div class="condition-left">
            <div class="time-label">时间类型:</div>
            <el-radio-group
              v-model="dateType"
              style="margin-right: 0.24rem"
              @change="updateDateType"
            >
              <el-radio label="hour">小时</el-radio>
              <el-radio label="day">日</el-radio>
              <el-radio label="month">月</el-radio>
              <el-radio label="year">年</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="dateType == 'hour'"
              v-model="timeDate"
              @change="handleConfirm"
              type="datetimerange"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="至"
              placeholder="选择日期"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-date-picker
              v-model="dayDate"
              type="daterange"
              v-if="dateType == 'day'"
              :key="this.dateType"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange"
            >
            </el-date-picker>
            <el-date-picker
              v-model="monthDate"
              type="monthrange"
              v-if="dateType == 'month'"
              :key="this.dateType"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM"
              @change="dateChange"
            >
            </el-date-picker>
            <div
              class="years-div"
              v-if="dateType == 'year'"
              :key="this.dateType"
            >
              <el-date-picker
                v-model="startYear"
                type="year"
                placeholder="选择开始年份"
                value-format="yyyy"
              >
              </el-date-picker>
              <div class="years-word">至</div>
              <el-date-picker
                v-model="endYear"
                type="year"
                placeholder="选择结束年份"
                value-format="yyyy"
              >
              </el-date-picker>
            </div>
            <el-select
              style="margin: 0 10px"
              clearable
              class="elSelectDiv"
              v-model="electType"
              placeholder="请选择查询类型"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in electTypes"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>

            <div class="success-btn">
              <el-button
                type="success"
                style="margin-left: 0.12rem"
                @click="findData"
                >查询</el-button
              >
            </div>
          </div>
          <!-- <div class="condition-right">
                        <el-button type="warning">导出</el-button>
                    </div> -->
        </div>
        <div class="charts-table" v-loading="listLoading">
          <div class="charts-title">
            {{ this.titleDate }} {{ this.deviceTitle }}
          </div>
          <div class="charts_refs" ref="charts_refs"></div>
          <div class="analysis-table">
            <table>
              <thead>
                <tr>
                  <th v-if="dateList.length > 0">数据类型</th>
                  <th v-for="(item, index) in dateList" :key="index">
                    {{ item }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td v-if="electData.length > 0">热量(kwh)</td>
                  <td v-for="(item, index) in electData" :key="index">
                    {{ item }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { format2 } from "@/utils/datetime";
import { deviceEnergy } from "@/api/centerairC/energyManage";
import * as echarts from "echarts";
import { listData } from "@/api/system/dict/data";
import { devicesList } from "@/api/device/gather";
export default {
  data() {
    return {
      listLoading: false,
      dateType: "hour", //默认选择小时
      timeDate: [], //小时值
      electType: [],
      electTypes: [],
      deviceTitle: "",
      dayDate: [], //日值
      monthDate: [], //月值
      startYear: "", //开始年份
      endYear: "", //结束年份
      startTime: "", //开始日期
      endTime: "", //结束日期
      // 表格数据
      dateList: [],
      electData: [],
      // 折线图数据
      dateList2: [],
      electData2: [],
      chartInstance2: null,
      option2: {},
      titleDate: "",
      systemType: "", //系统类型
      systemTypes: [],
    };
  },
  mounted() {
    this.initializeTimeDate();
    this.initChart2();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
    this.initData();
  },
  destroyed() {
    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    /** 查询系统类型-字典数据列表 */
    getDictList() {
      return new Promise((resolve, reject) => {
        let data = {
          pageNum: 1,
          pageSize: 100,
          dictType: "sys_type",
        };
        listData(data)
          .then((response) => {
            this.systemTypes = response.rows;
            if (this.systemTypes.length > 0) {
              this.systemType = this.systemTypes[0].dictValue;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    /** 查询设备类型 */
    getList() {
      return new Promise((resolve, reject) => {
        let data = {
          systemType: 7,
        };
        devicesList(data)
          .then((res) => {
            // 获取第四层级的children
            this.electTypes = this.getChildrenAtLevel(res.data, 5);
            this.electType = this.electTypes[0].id;
            // 标题
            let obj = {};
            obj = this.electTypes.find((item) => {
              return item.id === this.electType;
            });
            this.deviceTitle = obj.label;
            console.log(obj.label);
            console.log("this.electTypes", this.electTypes);
            console.log("this.electType", this.electType);
            this.handleSelectChange();
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 选择el-select
    handleSelectChange() {
      console.log("----和默认选中值比较", this.electType);
      // this.selectElect = this.electType.map((v) => {
      //   const selectedItem = this.electTypes.find((item) => item.mtNum === v);
      //   return {
      //     name: selectedItem ? selectedItem.otherName : "",
      //     // 如果 selectedItem 存在，则使用其 id 属性作为 value，否则设为 null
      //     value: selectedItem ? selectedItem.id : null,
      //   };
      // });
      // console.log("this.selectElect", this.selectElect);
    },
    getChildrenAtLevel(data, targetLevel, currentLevel = 1) {
      if (!Array.isArray(data) || data.length === 0) {
        return [];
      }

      if (currentLevel === targetLevel - 1) {
        // 到达目标层级的前一层，收集其children
        const result = [];
        for (let item of data) {
          if (item.children && Array.isArray(item.children)) {
            result.push(...item.children);
          }
        }
        return result;
      }

      // 继续递归遍历
      const result = [];
      for (let item of data) {
        if (item.children && Array.isArray(item.children)) {
          const children = this.getChildrenAtLevel(
            item.children,
            targetLevel,
            currentLevel + 1
          );
          result.push(...children);
        }
      }

      return result;
    },
    /** 初始化数据 */
    initData() {
      Promise.all([
        // this.getDictList(),
        this.getList(),
      ])
        .then(() => {
          this.getTableData();
        })
        .catch((error) => {
          console.error("数据获取失败:", error);
        });
    },
    handleConfirm() {
      console.log("打印选择的时间", this.timeDate);
      // const start = new Date(this.timeDate[0]);
      // start.setHours(0, 0, 0, 0);
      // const end = new Date(this.timeDate[1]);
      // end.setHours(23, 59, 59, 999);
      // this.timeDate = [start, end];
    },
    // 初始化时间
    initializeTimeDate() {
      const start = new Date(new Date().setHours(0, 0, 0, 0));
      const end = new Date(new Date().setHours(23, 59, 59, 59));
      this.timeDate = [format2(start), format2(end)]; // 更新
      this.titleDate = format2(start) + "至" + format2(end);
    },
    // 选择时间类型
    updateDateType() {
      // this.dateType = this.radio;
      console.log(this.dateType);
      (this.timeDate = []), //小时值
        (this.dayDate = []), //日值
        (this.monthDate = []), //月值
        (this.startYear = ""), //开始年份
        (this.endYear = ""); //结束年份
    },
    // 选中日期事件
    dateChange() {
      // console.log("打印时间", this.timeform.time1);
      if (!this.dayDate) {
        this.$nextTick(() => {
          this.dayDate = [];
        });
      }
      if (!this.monthDate) {
        this.$nextTick(() => {
          this.monthDate = [];
        });
      }
    },
    // 查询
    findData() {
      console.log(this.dateType);
      switch (this.dateType) {
        case "hour":
          if (!this.timeDate) {
            this.showMessage("请选择时间！", "warning");
          } else {
            this.titleDate =
              format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]);
            this.getTableData();
          }
          break;
        case "day":
          if (this.dayDate.length === 0) {
            this.showMessage("请选择时间！", "warning");
          } else {
            const newLength =
              new Date(this.dayDate[1]).getTime() -
              new Date(this.dayDate[0]).getTime();
            const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24));
            if (dayDiff > 31) {
              this.showMessage(
                "最多只能选择30天区间，请重新选择再查询！",
                "warning"
              );
            } else {
              this.titleDate = this.dayDate[0] + "至" + this.dayDate[1];
              this.getTableData();
            }
          }
          break;
        case "month":
          if (this.monthDate.length === 0) {
            this.showMessage("请选择时间！", "warning");
          } else {
            const [start, end] = this.monthDate;
            const startDate = new Date(start);
            const endDate = new Date(end);
            const startYear = startDate.getFullYear();
            const startMonth = startDate.getMonth();
            const endYear = endDate.getFullYear();
            const endMonth = endDate.getMonth();
            const monthDiff =
              (endYear - startYear) * 12 + (endMonth - startMonth);
            if (monthDiff > 12) {
              this.showMessage(
                "最多只能选择12个月区间，请重新选择再查询！",
                "warning"
              );
            } else {
              this.titleDate = this.monthDate[0] + "至" + this.monthDate[1];
              this.getTableData();
            }
          }
          break;
        case "year":
          if (!this.startYear || !this.endYear) {
            this.showMessage("请选择全年份区间！", "warning");
          } else if (this.startYear > this.endYear) {
            this.showMessage("结束年份要大于开始年份！", "warning");
          } else {
            this.titleDate = this.startYear + "至" + this.endYear;
            this.getTableData();
          }
          break;
        default:
          break;
      }

      // 找到el-select的label的值
      let value = this.electType;
      let obj = {};
      obj = this.electTypes.find((item) => {
        return item.id === value;
      });
      this.deviceTitle = obj.label;
      console.log(obj.label);
    },
    // 显示消息的函数
    showMessage(message, type) {
      this.$message({
        message: message,
        type: type,
      });
    },
    //请求数据
    getTableData() {
      if (this.dateType == "hour") {
        this.startTime = format2(this.timeDate[0]);
        this.endTime = format2(this.timeDate[1]);
      } else if (this.dateType == "day") {
        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
      } else if (this.dateType == "month") {
        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
      } else if (this.dateType == "year") {
        (this.startTime = this.startYear), (this.endTime = this.endYear);
      }
      let data = {
        timeType: this.dateType,
        startTime: this.startTime,
        endTime: this.endTime,
        houseId: this.electType,
        systemType: 7,
      };
      console.log("查询数据参数", data);
      // this.option2.series[0].data = ["1"];
      // this.option2.xAxis.data = ["1"];
      // this.screenAdapter();
      // this.chartInstance2.setOption(this.option2);
      this.listLoading = true;
      deviceEnergy(data).then((res) => {
        console.log("查询返回", res);
        if (res.code == 200 && res.data.lineTimes) {
          if (res.data.times && res.data.times.length > 0) {
            // 表格数据  .map(time => `${time}:00`)
            this.dateList = res.data.times;
            this.electData = res.data.data[0].meter;
            console.log("表头", this.dateList);
            console.log("表格内容", this.electData);
          } else {
            this.dateList = [];
            this.electData = [];
          }

          // 图例数据
          this.dateList2 = res.data.lineTimes.map((item) => {
            // 使用slice()方法截取需要的部分
            return item.slice(0, 16);
          });
          this.electData2 = res.data.data[1].lineMeter;

          this.option2.series[0].data = this.electData2;
          this.option2.xAxis.data = this.dateList2;
          this.option2.yAxis.name = "kwh";
          this.option2.yAxis.nameTextStyle = {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12,
          };
          console.log("x轴", this.dateList2);
          console.log("折线图数据", this.electData2);
          this.screenAdapter();
          this.chartInstance2.setOption(this.option2);
        } else {
          this.dateList = [];
          this.electData = [];
          this.option2.series[0].data = [];
          this.option2.xAxis.data = [];
          this.screenAdapter();
          this.chartInstance2.setOption(this.option2);
        }
      });
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false;
      }, 1.0 * 1000);
    },
    //初始化chartInstance2对象 折线图
    initChart2() {
      this.chartInstance2 = echarts.init(this.$refs.charts_refs);
      this.option2 = {
        tooltip: {
          trigger: "axis",
          // 使用 formatter 设定 tooltip 内容格式
          formatter: function (params) {
            let seriesHTML = "";
            params.forEach(function (item) {
              seriesHTML +=
                "<div>" +
                item.seriesName +
                ': <span style="color: #000000; font-weight: bold;">' +
                item.value +
                "</span></div>";
            });
            return "<div>" + params[0].name + "</div>" + seriesHTML;
          },
          // 自定义 tooltip 内容
          formatter: function (params) {
            var res = params[0].name + "<br/>";
            for (var i = 0, l = params.length; i < l; i++) {
              var seriesName = params[i].seriesName;
              var value = params[i].value;
              var marker =
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                params[i].color +
                '"></span>';
              // 根据不同德seriesName 返回不同的单位
              if (seriesName === "热量") {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  " " +
                  "kwh" +
                  "</span><br>";
              } else {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  "</span><br>";
              }
            }
            return res;
          },
        },
        legend: {
          show: false, // 不显示图例
        },
        grid: {
          top: "15%",
          left: "5%",
          right: "4.4%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.dateList2,
          //设置为true代表离零刻度间隔一段距离
          boundaryGap: true,
          // 修饰刻度标签的颜色即x坐标数据
          axisLabel: {
            // interval: 0, //强制显示所有x轴数据
            // rotate: 30, //x轴坐标字体倾斜30度
            color: "rgba(255, 255, 255, 1)",
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          // x坐标轴的颜色
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#e2e6f0",
            },
          }, //x轴分割线
        },
        yAxis: {
          min: 0,
          miniInterval: 5,
          type: "value",
          // 修饰刻度标签的颜色即y坐标数据
          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
          },
          // 显示y坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576", // 设置 y 轴线的颜色
            },
          },
          splitLine: {
            lineStyle: {
              color: "#1a3d62", // 设置分割线的颜色
              type: "dashed", // 设置分割线为虚线
            },
          },
        },
        series: [
          {
            name: "热量",
            type: "line",
            smooth: true,
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            data: this.electData2,
            sampling: "lttb", //降采样策略
            // 设置拐点颜色以及边框
            // itemStyle: {
            //   color: "#0184d5",
            //   borderColor: "rgba(221, 220, 107, .1)",
            //   borderWidth: 12
            //  },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            //折线颜色
            itemStyle: {
              color: "#01c29b", //折线点的颜色
              lineStyle: {
                color: "#01c29b", //折线的颜色
              },
            },
            areaStyle: {
              color: {
                //线性渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(1, 194, 155, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 194, 155,0.2)", // 100% 处的颜色
                  },
                ],
                // global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance2.setOption(this.option2, true);
    },
    // 元素大小
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.charts_refs.offsetWidth / 130;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {
        // x轴坐标字体大小
        xAxis: {
          axisLabel: {
            fontSize: titleFontSize * 1.4,
          },
        },
        yAxis: {
          axisLabel: {
            fontSize: titleFontSize * 1.4,
          },
        },
        // 拖拽X轴
        dataZoom: [
          {
            type: "slider", //inside鼠标缩放
            show: this.showZoom,
            height: titleFontSize, // 设置控制区域的高度为 20 像素
            // fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色
            // backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色
            start: 0,
            end: 100,
            xAxisIndex: [0],
            handleSize: "120%", // 设置滑块大小为默认大小的 120%
          },
        ],
      };
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance2.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance2.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.condition {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 0.24rem;

  .condition-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    .years-div {
      display: flex;
      flex-direction: row;
      align-items: center;

      .years-word {
        font-size: 14px;
        margin: 0 5px;
        color: #388ff3;
      }
    }

    .time-label {
      font-size: 16px;
      line-height: 7px;
      margin-right: 12px;
      white-space: nowrap;
    }
  }
}
.charts-title {
  font-size: 0.24rem;
  line-height: 0.07rem;
  letter-spacing: 0.02rem;
  color: #1f70e9;
  margin: 0.3rem 0 0rem 0;
  width: 100%;
  text-align: center;
}
.analysis-table table thead th {
  min-width: 1.6rem;
}

.analysis-table {
  margin: 0.3rem 0;
}

.main-content {
  min-height: 6.9rem;
}
.charts-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.charts_refs {
  width: 17rem;
  height: 4.55rem;
  margin-left: -0.35rem;
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
  .condition {
    .condition-left {
      .years-div {
        .years-word {
          font-size: 0.14rem !important;
          margin: 0 0.05rem !important;
        }
      }

      .time-label {
        font-size: 0.16rem !important;
        line-height: 0.07rem !important;
        margin-right: 0.12rem !important;
      }
    }
  }
}
</style>
