<template>
  <div class="big-machine" v-loading="listLoading">
    <div class="condition">
      <div class="condition-left">
        <el-select
          style="margin-right: 0.1rem"
          v-model="building"
          placeholder="请选择楼栋"
          clearable
        >
          <el-option
            v-for="(item, index) in builds"
            :key="index"
            :label="item.building_name"
            :value="item.id"
          />
        </el-select>
        <el-date-picker
          v-model="dayDate"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
        >
        </el-date-picker>
        <div class="success-btn" style="margin: 0 0.12rem">
          <el-button type="success" @click="findData">查询</el-button>
        </div>
        <div class="warning-btn">
          <el-button type="warning" @click="exportData">导出</el-button>
        </div>
      </div>
    </div>
    <el-table
      :data="postList"
      stripe
      :cell-style="tableRowStyle"
      highlight-current-row
      height="500"
    >
      <el-table-column
        type="index"
        :index="indexAdd"
        prop="number"
        label="序号"
        width="90"
      ></el-table-column>
      <el-table-column label="所属楼栋" align="center" prop="buildingName" />
      <el-table-column label="设备编号" align="center" prop="deviceNum" />
      <el-table-column label="设备名称" align="center" prop="deviceName" />
      <el-table-column label="抄表时间" align="center" prop="curTime" />
      <el-table-column label="采集读数" align="center" prop="curValue" />
      <el-table-column label="用量(度)" align="center" prop="usedValue" />
      <el-table-column label="倍率" align="center" prop="ratio" />
      <el-table-column label="计算量(度)" align="center" prop="calcValue" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { formatDay } from "@/utils/datetime";
import { hotBuildList } from "@/api/hotWater/energyAnalysis";
import { queryDeviceDatas } from "@/api/hotWater/energyQuery";
export default {
  data() {
    return {
      listLoading: false,
      dayDate: [], //日值
      dialogVisible: false,
      building: "", //选中的楼栋
      builds: [], //楼栋列表
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 表格数据
      postList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
      },
    };
  },
  created() {
    // 在组件创建完成后，设置默认值
  },
  mounted() {
    this.initializeTimeDate();
    this.getBuildList();
    this.getList();
  },
  methods: {
    // 选中日期事件
    dateChange() {
      // console.log("打印时间", this.timeform.time1);
      if (!this.dayDate) {
        this.$nextTick(() => {
          this.dayDate = [];
        });
      }
    },
    /** 查询楼栋 */
    getBuildList() {
      let data = {
        systemType: "1",
      };
      hotBuildList(data).then((res) => {
        if (res.code == 200) {
          // 只需要保留热水的系统
          console.log("楼栋返回值", res);
          this.builds = res.rows;
          //   console.log("筛选后的新结果", this.builds);
          this.building = res.rows[0].id;
          this.getList();
        }
      });
    },
    // 初始化时间
    initializeTimeDate() {
      let date = new Date(); //获取新的时间
      //获取当前年份,并且转为字符串
      let year = date.getFullYear().toString();
      //获取当前月份，因为月份是要从0开始，此处要加1，
      //使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      //获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
      let day =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      //字符串拼接，将开始时间和结束时间进行拼接
      let start1 = year + "-" + month + "-01"; //当月第一天
      let end1 = year + "-" + month + "-" + day; //当天
      this.dayDate = [start1, end1]; // 更新
    },
    // 查询
    findData() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 序号
    indexAdd(index) {
      return (
        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      );
    },
    //请求数据
    getList() {
      if (this.dayDate.length == 0) {
        this.initializeTimeDate();
      }
      let data = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        startDate: this.dayDate[0],
        endDate: this.dayDate[1],
        buildingId: this.building,
        deviceType: "16",
      };
      console.log("查询数据参数", data);
      this.listLoading = true;
      queryDeviceDatas(data).then((res) => {
        console.log("返回", res);
        if (res.code == 200) {
          this.postList = res.rows;
          this.total = res.total;
        } else {
          this.postList = [];
          this.total = 0;
        }
      });
      //   请求数据
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false;
      }, 1.0 * 1000);
    },
    // 导出
    exportData() {
      if (this.dayDate.length == 0) {
        this.initializeTimeDate();
      }
      let data = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.total,
        startDate: this.dayDate[0],
        endDate: this.dayDate[1],
        buildingId: this.building,
        deviceType: "16",
      };
      console.log("查询数据参数", data);
      queryDeviceDatas(data).then((res) => {
        console.log("返回", res);
        if (res.code == 200) {
          import("@/assets/excel/Export2Excel").then((excel) => {
            var tHeader = [
              "所属楼栋",
              "设备编号",
              "设备名称",
              "抄表时间",
              "采集读数",
              "用量(度)",
              "倍率",
              "计算量(度)",
            ]; // 导出的excel表头名信息 改参数
            var filterVal = [
              "buildingName",
              "deviceNum",
              "deviceName",
              "curTime",
              "curValue",
              "usedValue",
              "ratio",
              "calcValue",
            ];
            const data = this.formatJson(filterVal, res.rows);
            const autoWidth = true;
            excel.export_json_to_excel({
              header: tHeader, //表头
              data, //数据
              filename: "电表读数报表", //名称
              autoWidth: true, //宽度自适应
            });
            this.$message({
              type: "success",
              message: "导出成功!",
            });
          });
        } else {
          this.$message.error("导出失败!");
        }
      });
    },
    //格式转换,不需要改动
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "installDate") {
            return format(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 6 || columnIndex === 8) {
        return "color: #75d148;!important;text-align:center";
      }
      // return "text-align:center";
    },
  },
};
</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;
    }
  }
}
.data-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 23px;
  .data-li {
    background-color: transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3rem;
    width: 31%;
    justify-content: space-between;
    margin-bottom: 0.24rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.16rem;
    position: relative;
    overflow: hidden;
    .use-icon {
      width: 0.6rem;
      height: 0.6rem;
    }
    .use-text {
      width: 33%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #dbdbdb;
      .data-text {
        z-index: 11 !important;
        font-family: DIN-Bold;
        font-size: 0.24rem;
        margin-top: 0.05rem;
        color: #ffffff;
      }
      .downText {
        color: #ff4027;
        z-index: 11 !important;
        font-family: DIN-Bold;
        font-size: 0.24rem;
        margin-top: 0.05rem;
        .el-icon-bottom {
          margin-right: 0.08rem;
        }
      }
      .upText {
        color: #2ff016;
        z-index: 11 !important;
        font-family: DIN-Bold;
        font-size: 0.24rem;
        margin-top: 0.05rem;
        .el-icon-bottom,
        .el-icon-top {
          margin-right: 0.08rem;
        }
      }
    }
  }
  .type-img {
    position: absolute;
    bottom: 0;
    width: 3.17rem;
    height: 0.52rem;
    z-index: 10;
  }
  .type1 {
    border: 1px solid #e8aa13;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
  }
  .type1::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
  .type2 {
    border: 1px solid #27a0f2;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
  }
  .type2::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
  .type3 {
    border: 1px solid #1ad3ef;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
  }
  .type3::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
  .type4 {
    border: 1px solid #11d47b;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
  }
  .type4::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
}
.choice {
  margin: 20px;
  .mr20 {
    padding: 0.05rem 0.2rem;
    white-space: nowrap;
    width: auto;
  }
}
.charts {
  width: 100%;
  height: 300px;
  margin-bottom: 0.1rem;
}
// 媒体查询，适配大于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>
