<template>
  <div class="app-container">
    <div class="btn-condition">
      <div class="condition-left" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="日期" prop="msgCode">
            <el-date-picker
              style="width: auto"
              v-model="dayValue"
              type="date"
              placeholder="选择日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="primary-btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
        <div class="warning-btn">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </div>
    </div>
    <div class="meter-Context">
      <div class="meter-li">最低气温:{{ lowValue }}℃</div>
      <div class="meter-li">最高气温:{{ heightValue }}℃</div>
      <!-- <div class="meter-li">住房量:108间</div> -->
    </div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      :cell-style="tableRowStyle"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="mtType" label="名称" width="180">
        <template #default="{ row, $index }">
          <!-- 当是第 xx 行时，显示 位置 的值 -->
          <span
            v-if="
              $index === 15 || $index === 20 || $index === 23 || $index === 24
            "
            >{{ row.location }}</span
          >
          <!-- 否则显示名称的值 -->
          <span v-else>{{ row.mtType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="位置"> </el-table-column>
      <el-table-column prop="mtNum" sortable label="编号"> </el-table-column>
      <el-table-column prop="yesterdayReading" sortable label="昨日读数">
      </el-table-column>
      <el-table-column prop="todayReading" sortable label="今日读数">
      </el-table-column>
      <el-table-column prop="mtRatio" sortable label="倍率"> </el-table-column>
      <el-table-column prop="total" sortable label="合计">
        <template #default="{ row, $index }">
          <!-- 当是第 27 行时，显示 amount7费用 的值 -->
          <span v-if="$index === 26">{{ row.cost }}</span>
          <!-- 否则显示合计的值 -->
          <span v-else>{{ row.total }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unitPrice" sortable label="单价">
      </el-table-column>
      <el-table-column prop="cost" sortable label="费用"> </el-table-column>
    </el-table>

    <el-table
      :data="tableData2"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="mtType" label="" width="180"> </el-table-column>
      <el-table-column prop="location" label="分项"> </el-table-column>
      <el-table-column prop="yesterdayReading" label="昨日流量">
      </el-table-column>
      <el-table-column prop="todayReading" label="今日流量"> </el-table-column>
      <el-table-column prop="total" label="用量"> </el-table-column>
      <el-table-column prop="remake" label="备注"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { weatherTempData } from "@/api/centerairC/temHistory";
import {
  meterReadingsList,
  meterReadingsExport,
} from "@/api/comprehensiveEnergy/meterRecord";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 0,
        pageSize: 10,
        startTime: "",
        endTime: "",
      },
      dayValue: "",
      monthValue: "",
      lowValue: "", //最低温度
      heightValue: "", // 最高温度
      tableData: [],
      tableData2: [],
    };
  },
  created() {
    // 获取当前日期
    const currentDate = new Date();
    // 获取前一天的日期
    const previousDate = new Date(currentDate);
    previousDate.setDate(currentDate.getDate() - 1);

    // 获取前一天的年份
    const year = previousDate.getFullYear();
    // 获取前一天的月份，注意月份是从 0 开始的，所以要加 1
    const month = String(previousDate.getMonth() + 1).padStart(2, "0");
    // 获取前一天日期中的“天”，并进行补零处理
    const day = String(previousDate.getDate()).padStart(2, "0");

    // 格式化前一天的日期为 yyyy-MM-dd 格式
    this.dayValue = `${year}-${month}-${day}`;
    // 格式化当前月份为 yyyy-MM 格式
    const currentYear = currentDate.getFullYear();
    const currentMonth = String(currentDate.getMonth() + 1).padStart(2, "0");
    this.monthValue = `${currentYear}-${currentMonth}`;
  },
  mounted() {
    this.getList();
  },
  methods: {
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      // 修改颜色
      //   if (columnIndex === 1) {
      //     return "color: #fd1e00;!important;text-align:center";
      //   }
      //   if (columnIndex === 2) {
      //     return "color: #3390ff;!important;text-align:center";
      //   }
      if (
        rowIndex === 15 ||
        rowIndex === 20 ||
        rowIndex === 23 ||
        rowIndex === 24
      ) {
        return "color: #75d148;!important;font-weight: bold;background-color: rgba(0, 71, 125, 0.4)";
      }
    },
    // 表格1合计内容
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //   console.log("打印", row, column, rowIndex, columnIndex);
      //   //   rowIndex表示→方向相当于x轴     columnIndex表示↓方向相当于y轴
      //   //   rowIndex % 2 === 0表示偶数行
      //   if (rowIndex % 2 === 0) {
      //     // 如果偶数行的列为0，则
      //     if (columnIndex === 0) {
      //       // 第一列和第二列合并
      //       return [1, 2];
      //     } else if (columnIndex === 1) {
      //       // 返回 [0, 0] 表示当前单元格不显示，不合并
      //       return [0, 0];
      //     }
      //   }
      if (
        rowIndex === 15 ||
        rowIndex === 20 ||
        rowIndex === 23 ||
        rowIndex === 24
      ) {
        if (columnIndex === 0) {
          // 当 rowIndex 为 15 且 columnIndex 为 0 时，合并 1 行 6 列
          return [1, 6];
        } else if (columnIndex < 6) {
          // 当 rowIndex 为 15 且 columnIndex 小于 6 时，隐藏该单元格
          return [0, 0];
        }
      }
      if (rowIndex === 26) {
        if (columnIndex < 6) {
          if (columnIndex === 0) {
            // 前六列合并，第一列设置合并规则
            return [1, 6];
          } else {
            // 除第一列外的前六列其他列隐藏
            return [0, 0];
          }
        } else if (columnIndex >= 6) {
          if (columnIndex === 6) {
            // 后三列合并，第七列设置合并规则
            return [1, 3];
          } else {
            // 除第七列外的后三列其他列隐藏
            return [0, 0];
          }
        }
      }
      // 其他情况不做处理
      return [1, 1];
    },
    // 表格2合计内容
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    /** 查询表格数据 */
    getList() {
      this.loading = true;
      if (!this.dayValue) {
        this.$modal.msgWarning("请选择日期!");
        return;
      }
      let data = {
        todayTimestamp: `${this.dayValue} 00:00:00`,
      };
      meterReadingsList(data).then((res) => {
        console.log("列表返回", res);
        if (res.code == 200 && res.rows) {
          this.tableData = res.rows.slice(0, 25);
          this.tableData2 = res.rows.slice(25, 27);
          this.loading = false;
        } else {
          this.tableData = [];
          this.tableData2 = [];
          this.loading = false;
        }
      });
      //查询温度
      this.getTemValue();
    },
    getTemValue() {
      if (this.dayValue) {
        // 处理月参数
        const parts = this.dayValue.split("-");
        this.monthValue = `${parts[0]}-${parts[1]}`;
      }
      this.queryParams.startTime = this.queryParams.endTime = this.monthValue;
      console.log("参数", this.queryParams);
      weatherTempData(this.queryParams).then((response) => {
        let data = response.rows;
          console.log("response.rows", response.rows);
        console.log("this.dayValue", this.dayValue);
        if (data && data.length > 0) {
          data.forEach((item) => {
            if (item.dateAndWeek) {
              let objectDate = item.dateAndWeek.split(" ")[0];
                console.log(" objectDate", item.dateAndWeek);
              if (objectDate == this.dayValue) {
                this.lowValue = item.minTemp;
                this.heightValue = item.maxTemp;
                console.log("最低气温", this.lowValue);
                console.log("最高气温", this.heightValue);
              }
            }
          });
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      let data = {
        todayTimestamp: `${this.dayValue} 00:00:00`,
      };
      console.log("导出数据参数", data);
      meterReadingsExport(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('导出失败!');
      // })
    },
  },
};
</script>
<style scoped>
.app-container >>> .el-table th.el-table__cell.is-leaf,
.app-container >>> .el-table td.el-table__cell {
  border-bottom: 1px solid #000000 !important;
}
.app-container >>> .el-table--border .el-table__cell {
  border-right: 1px solid #000000 !important;
}
</style>
<style lang="scss" scoped>
.meter-Context {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #000000 !important;
  padding: 0 30px;
  .meter-li {
    line-height: 23px;
    padding: 10px 0;
    height: 45px;
    color: #ffffff;
    font-size: 14px;
    margin-right: 30px;
  }
}
</style>
