<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-model="timeDate"
              :default-time="['00:00:00', '23:59:59']"
              type="datetimerange"
              range-separator="至"
              v-if="dateType == 'hour'"
              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"
              multiple
              collapse-tags
              class="elSelectDiv"
              v-model="electType"
              placeholder="请选择查询类型"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in electTypes"
                :key="item.mtNum"
                :label="item.otherName"
                :value="item.mtNum"
              ></el-option>
            </el-select>
            <!-- <el-select
              style="margin: 0 10px"
              v-model="systemType"
              placeholder="请选择系统类型"
              clearable
            >
              <el-option
                v-for="dict in systemTypes"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select> -->
            <div class="success-btn">
              <el-button type="success" @click="findData">查询</el-button>
            </div>
            <div class="primary-btn">
              <el-button type="primary" @click="leadingPrint">打印</el-button>
            </div>
            <div class="warning-btn">
              <el-button type="warning" @click="exportData">导出</el-button>
            </div>
          </div>
        </div>
        <div class="charts-table" v-loading="listLoading">
          <div class="details_ref" ref="details_ref"></div>
          <div class="table-content" style="width: 100%">
            <el-table
              stripe
              :data="tableData"
              style="width: 100%"
              v-if="tableData && tableData.length > 0"
            >
              <el-table-column
                v-for="header in headers"
                :key="header.key"
                :prop="header.key"
                :label="header.label"
              >
              </el-table-column>
            </el-table>
            <div class="page" v-if="tableData && tableData.length > 0">
              <el-pagination
                background
                style="width: 100%; height: 20%"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.pageParm.page"
                :page-size="10"
                layout="->,total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 50, 100, 200, 9999]"
                :total="this.pageParm.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogPrintVisible"
      title="打印预览"
      width="900px"
    >
      <div id="report" ref="report" class="report">
        <table
          border="1"
          style="
            table-layout: fixed;
            width: 100%;
            border: 1px solid #e2e6f0;
            margin-bottom: 35px;
          "
        >
          <thead>
            <tr>
              <th rowspan="1" :colspan="headers.length">设备能耗报表</th>
            </tr>
            <tr>
              <th
                align="center"
                v-for="(item, index) in headers"
                :key="index + 2"
              >
                {{ item.label }}
              </th>
            </tr>
          </thead>
          <tr v-for="(item, index) in tableData" :key="index">
            <td align="center" v-for="(value, key) in item" :key="key">
              {{ value }}
            </td>
          </tr>
        </table>
        <div
          class="detail"
          style="
            display: flex;
            flex-direction: row;
            font-size: 14px;
            justify-content: space-between;
            flex-wrap: nowrap;
            width: 40%;
            color: #ffffff;
          "
        >
          <div>操作员: {{ this.userName }}</div>
          <div class="print-date">日期： {{ this.operationDate }}</div>
        </div>
      </div>
      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
        <el-col :span="2">
          <el-button type="info" @click="dialogPrintVisible = false"
            >取消</el-button
          >
        </el-col>
        <el-col :span="2" style="margin-left: 60px">
          <el-button type="success" @click="surePrint">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getDay, format2 } from "@/utils/datetime";
import * as echarts from "echarts";
import {
  deviceAnalyze,
  deviceAnalyzeExport,
} from "@/api/centerairC/energyManage";
import { cpmList } from "@/api/device/gather";
import { listData } from "@/api/system/dict/data";
export default {
  data() {
    return {
      listLoading: false,
      dateType: "hour", //默认选择小时
      timeDate: [], //小时值
      dayDate: [], //日值
      monthDate: [], //月值
      startYear: "", //开始年份
      endYear: "", //结束年份
      startTime: "", //开始日期
      endTime: "", //结束日期
      // 图例数据
      timeData: [],
      dataArr: [],
      //表格数据
      curValue2: [],
      lastValue2: [],
      mom2: [],
      unitValue: "", //单位
      electType: [],
      electTypes: [],
      selectElect: [],
      // 动态表头
      headers: [
        // { key: 'name', label: 'Name' },
        // { key: 'age', label: 'Age' },
        // { key: 'gender', label: 'Gender' }
      ],
      tableData: [
        // { name: 'Alice', age: 26, gender: 'Female' },
        // { name: 'Bob', age: 30, gender: 'Male' },
        // { name: 'Charlie', age: 25, gender: 'Male' }
      ],
      pageParm: {
        page: 1, //开始页面页数，初始页
        pageSize: 10, //每页的数据条数
        total: null, //页数总数
      },
      dialogPrintVisible: false,
      userName: "", //操作员
      operationDate: getDay(0), //操作日期
      systemType: "", //系统类型
      systemTypes: [],
      electType: "",
      electTypes: [],
    };
  },
  mounted() {
    this.initData();
    this.initializeTimeDate();
    this.initChart1();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    this.userName = sessionStorage.getItem("userName");
  },
  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 = {
          pageNum: 1,
          pageSize: 100,
          mtType: "5", // 标准ModBus电表
          isUse: "0",
        };
        cpmList(data)
          .then((response) => {
            // 过滤数据，只保留 system_type = 0 且 grade = 40 的对象
            this.electTypes = response.rows.filter(
              (item) => item.systemType === "0" && item.grade === 40
            );
            this.electType = [];
            if (this.electTypes.length > 3) {
              this.electType = [
                this.electTypes[0].mtNum,
                this.electTypes[1].mtNum,
                this.electTypes[2].mtNum,
              ];
            } else if (this.electTypes.length > 0) {
              this.electType = [this.electTypes[0].mtNum];
            }
            console.log("this.electTypes", this.electTypes);
            console.log("this.electType", this.electType);
            this.handleSelectChange();
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    /** 初始化数据 */
    initData() {
      Promise.all([
        // this.getDictList(),
        this.getList(),
      ])
        .then(() => {
          this.getTableData();
          this.getChartsData();
        })
        .catch((error) => {
          console.error("数据获取失败:", error);
        });
    },

    //分页组件切换每页数量
    handleSizeChange(val) {
      this.pageParm.pageSize = val;
      this.pageParm.page = 1;
      // 更新表格
      this.getTableData();
    },
    //分页组件转页
    handleCurrentChange(val) {
      this.pageParm.page = val;
      // 更新表格
      this.getTableData();
    },
    // 选择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);
    },
    // 初始化时间
    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)]; // 更新
    },
    // 选择时间类型
    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() {
      this.pageParm.page = 1;
      console.log("this.dateType", this.dateType);
      console.log("this.timeDate", this.timeDate);
      switch (this.dateType) {
        case "hour":
          if (!this.timeDate) {
            this.showMessage("请选择时间！", "warning");
          } else {
            this.getTableData();
            this.getChartsData();
          }
          break;
        case "day":
          if (this.dayDate.length === 0) {
            this.showMessage("请选择时间！", "warning");
          } else {
            this.getTableData();
            this.getChartsData();
          }
          break;
        case "month":
          if (this.monthDate.length === 0) {
            this.showMessage("请选择时间！", "warning");
          } else {
            this.getTableData();
            this.getChartsData();
          }
          break;
        case "year":
          if (!this.startYear || !this.endYear) {
            this.showMessage("请选择全年份区间！", "warning");
          } else if (this.startYear > this.endYear) {
            this.showMessage("结束年份要大于开始年份！", "warning");
          } else {
            this.getTableData();
            this.getChartsData();
          }
          break;
        default:
          break;
      }
    },
    // 显示消息的函数
    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,
        pageNum: this.pageParm.page,
        pageSize: this.pageParm.pageSize,
        searchParams: this.selectElect,
        systemType: "0",
      };
      console.log("查询数据参数", data);
      this.listLoading = true;
      deviceAnalyze(data).then((res) => {
        console.log("查询返回", res);
        if (res.code == 200 && res.data.length > 0) {
          // 格式化 data 填充 this.tableData
          this.tableData = res.data[1].timeStr.map((date, index) => {
            const rowData = { date };
            res.data[2].dataList.forEach((data, dataIndex) => {
              rowData[`data${dataIndex + 1}`] = data.value[index];
            });
            return rowData;
          });
          console.log("tableData", this.tableData);
          console.log("res.data[2].dataList", res.data[2].dataList);
          console.log("this.electTypes", this.electTypes);
          // 格式化 data 填充 header
          this.headers = [
            { key: "date", label: "时间" },
            ...res.data[2].dataList.map((data, index) => {
              const matched = this.electTypes.find(
                (item) => item.mtNum === data.name
              );
              const label = matched ? matched.otherName : "";
              return {
                key: `data${index + 1}`,
                label: label,
              };
            }),
          ];
          this.pageParm.total = res.data.totalSize;
          console.log("header", this.headers);
        } else {
          this.tableData = [];
          this.headers = [];
        }
      });
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false;
      }, 1.0 * 1000);
    },
    //请求图表数据
    getChartsData() {
      console.log("???????????????");
      debugger;
      this.timeData = [];
      this.dataArr = [];
      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,
        pageNum: 0,
        pageSize: 10,
        searchParams: this.selectElect,
        systemType: "0",
      };
      console.log("查询数据参数", data);
      deviceAnalyze(data).then((res) => {
        console.log("查询返回", res);
        if (res.code == 200 && res.data.length > 0) {
          this.timeData = res.data[1].timeStr;
          // 具体看看怎么拿到x组数据   得到一个数组，对象{name：需要匹配select数据源,data}
          console.log("res.data[2].dataList", res.data[2].dataList);
          this.dataArr = [];
          this.dataArr = res.data[2].dataList;
          this.dataArr.forEach((obj) => {
            const match = this.electTypes.find((s) => s.mtNum === obj.name);
            if (match) {
              obj.name = match.otherName;
            }
            obj.type = "line";
            obj.smooth = true;
            (obj.sampling = "lttb"),
              (obj.showSymbol = false),
              (obj.data = obj.value);
            delete obj.value;
          });
          console.log("图表数据", this.dataArr);
          this.option1.series = this.dataArr;
          this.option1.xAxis.data = this.timeData;
          this.option1.yAxis.name = "kwh";
          this.option1.yAxis.nameTextStyle = {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12,
          };
          // 清空图表
          this.chartInstance1.clear();
          this.screenAdapter();
          this.chartInstance1.setOption(this.option1);
        } else {
          this.timeData = [];
          this.curValue2 = [];
          this.lastValue2 = [];
          this.mom2 = [];
          this.option1.series = [];
          this.option1.xAxis.data = [];
          // 清空图表
          this.chartInstance1.clear();
          this.screenAdapter();
          this.chartInstance1.setOption(this.option1);
        }
      });
    },
    initChart1() {
      this.chartInstance1 = echarts.init(this.$refs.details_ref);
      this.option1 = {
        tooltip: {
          trigger: "axis",
          // 以下为鼠标hover时的背景颜色
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(30, 69, 113, 0.15)",
              width: "",
            },
          },
          valueFormatter: function (value) {
            return value + " " + "kwh";
          },
        },
        legend: {
          show: true,
          top: "0%",
          textStyle: {
            fontSize: 14, // 设置图例文字的大小为 14 像素
            color: "#ffffff",
          },
        },

        grid: {
          top: "15%",
          left: "3%",
          right: "2%",
          bottom: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          //设置为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",
            },
          },
        },
        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", // 设置分割线为虚线
            },
          },
        },
        // 拖拽X轴
        dataZoom: [
          {
            type: "slider", //inside鼠标缩放
            show: true,
            height: 15, // 设置控制区域的高度为 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%
            textStyle: {
              fontSize: 12, // 设置字体大小为 12px
            },
          },
        ],
        series: [],
      };
      //把配置项给实例对象
      this.chartInstance1.setOption(this.option1, true);
    },
    // 折线图自适应
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {
        //比如fontSize
        textStyle: {
          fontSize: titleFontSize,
        },
      };
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance1.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance1.resize();
    },
    // 导出
    exportData() {
      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,
        pageNum: 0,
        pageSize: 10,
        searchParams: this.selectElect,
        systemType: "0",
      };
      console.log("导出数据参数", data);
      deviceAnalyzeExport(data).then((res) => {
        console.log("导出返回", res);
        if (res) {
          // 请求的结果就是文件
          // 创建一个blob URL，用于生成下载链接
          const url = window.URL.createObjectURL(new Blob([res]));
          // 创建一个<a>元素，并设置其href和download属性
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "设备能耗报表.xls"); // 设置下载的文件名
          // 模拟点击下载链接
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          // 释放blob URL资源
          window.URL.revokeObjectURL(url);
          this.$message({
            type: "success",
            message: "导出成功!",
          });
        } else {
          this.$message.error("导出失败!");
        }
      });
      // .catch((err) => {
      //     this.$message.error('导出失败!');
      // })
    },
    // 打印
    leadingPrint() {
      this.dialogPrintVisible = true;
      console.log("头部数据", this.headers);
      console.log("表格数据", this.tableData);
    },
    // 打印
    surePrint() {
      const printHTML = document.querySelector("#report").innerHTML;
      // 将打印的区域赋值，进行打印
      window.document.body.innerHTML = printHTML;
      window.print(); // 调用window打印方法
      window.location.reload(); // 打印完成后重新加载页面
    },
  },
};
</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;
    }
  }
}
.main-content {
  min-height: 6.6rem;
}
.charts-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.elSelectDiv {
  margin-left: 15px;
  width: 250px;
}
.details_ref {
  width: 16.5rem;
  height: 3.55rem;
  margin-bottom: 0.39rem;
  margin-left: -0.3rem;
}
// 媒体查询，适配大于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;
      }
    }
  }
  .elSelectDiv {
    margin-left: 0.15rem !important;
    width: 2.5rem !important;
  }
}
</style>
