<template>
  <div class="app-container">
    <div class="special-div">
      <div class="special-top">
        <div class="special-title">项目简介</div>
      </div>
      <div class="project-all">
        <img
          class="project-img"
          :src="imgUrl + projectObj.logo"
          @click="showDialog"
          alt="Base64 Image"
        />
        <div class="project-li">
          <div class="list-con">
            <div class="project-left">
              <img
                class="left-icon"
                src="../assets/images/project-icon1.png"
                alt=""
              />
              <div class="project-name">项目名称</div>
            </div>
            <div class="project-right">{{ projectObj.proName }}</div>
          </div>
          <div class="list-con">
            <div class="project-left">
              <img
                class="left-icon"
                src="../assets/images/project-icon2.png"
                alt=""
              />
              <div class="project-name">建筑面积</div>
            </div>
            <div class="project-right">{{ projectObj.buildingArea }}m³</div>
          </div>
          <div class="list-con">
            <div class="project-left">
              <img
                class="left-icon"
                src="../assets/images/project-icon3.png"
                alt=""
              />
              <div class="project-name">运营地址</div>
            </div>
            <div class="project-right">{{ projectObj.proAddr }}</div>
          </div>
        </div>
        <div class="project-li">
          <div class="list-con">
            <div class="project-left">
              <img
                class="left-icon"
                src="../assets/images/project-icon3.png"
                alt=""
              />
              <div class="project-name">项目运行开始时间</div>
            </div>
            <div class="project-right">{{ projectObj.operateStartTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="project-data">
      <div class="special-div" style="width: 60%">
        <div class="special-top">
          <div class="special-title">项目概况</div>
        </div>
        <div class="overview">
          <div class="overview-li" @click="goEnergy">
            <div>总耗电量(kwh)</div>
            <div class="overview-details">{{ projectView.totalEle }}</div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>总热水补水(吨)</div>
            <div class="overview-details">
              {{ projectView.totalWater }}
            </div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>总蒸汽流量(吨)</div>
            <div class="overview-details">
              {{ projectView.totalGas }}
            </div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>总产冷量(kw)</div>
            <div class="overview-details">
              {{ projectView.totalCold }}
            </div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>今年耗电量(kwh)</div>
            <div class="overview-details">
              {{ projectView.yearEle }}
            </div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>今年热水补水(吨)</div>
            <div class="overview-details">
              {{ projectView.yearWater }}
            </div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>今年蒸汽流量(吨)</div>
            <div class="overview-details">
              {{ projectView.yearGas }}
            </div>
          </div>
          <div class="overview-li" @click="goEnergy">
            <div>今年产冷量(kw)</div>
            <div class="overview-details">
              {{ projectView.yearCold }}
            </div>
          </div>
        </div>
      </div>
      <div class="special-div" style="width: 39%">
        <div class="special-top">
          <div class="special-title">冷源系统</div>
        </div>
        <view-energy></view-energy>
      </div>
    </div>
    <div class="project-bie">
      <div class="special-div">
        <div class="special-top">
          <div class="special-title">冷源能耗</div>
        </div>
        <view-cold-sys :subData="coldSys"></view-cold-sys>
      </div>
      <div class="special-div">
        <div class="special-top">
          <div class="special-title">热水系统</div>
        </div>
        <hot-water :subData="hotWaterSys"></hot-water>
      </div>
      <div class="special-div">
        <div class="special-top">
          <div class="special-title">风柜系统</div>
        </div>
        <airc-and-windc-meter :subData="airAndWindSys"></airc-and-windc-meter>
      </div>
      <div class="special-div">
        <div class="special-top">
          <div class="special-title">温度系统</div>
        </div>
        <tem-meter :subData="temSys"></tem-meter>
      </div>
    </div>
    <div class="special-div" style="margin-top: 16px">
      <div class="special-top">
        <div class="special-title">实时EER系数</div>
      </div>
      <sys-energy></sys-energy>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="上传图片"
      width="500px"
      @close="addExpenseClose"
    >
      <!-- 使用 el-upload 组件 -->
      <el-upload
        class="upload-demo"
        ref="uploadComponent"
        action="#"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
        :limit="1"
        :on-exceed="handleExceed"
        :on-change="handleFileChange"
        accept="image/png, image/jpeg"
        :http-request="customHttpRequest"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button @click="dialogVisible = false">取消</el-button>
        <!-- 确定按钮 -->
        <el-button type="primary" @click="uploadFile">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { imgUrl } from "@/utils/global";
import {
  introduction,
  changeLogo,
  viewProfile,
  viewMainParams,
} from "@/api/index";
import viewEnergy from "./components/viewEnergy.vue";
import ViewColdSys from "./components/viewColdSys.vue";
import HotWater from "./components/hotWater.vue";
import AircAndWindcMeter from "./components/aircAndWindcMeter.vue";
import TemMeter from "./components/temMeter.vue";
import SysEnergy from './components/sysEnergy.vue';

export default {
  components: {
    viewEnergy,
    ViewColdSys,
    HotWater,
    AircAndWindcMeter,
    TemMeter,
    SysEnergy,
  },
  data() {
    return {
      imgUrl: "",
      projectObj: {
        proName: "",
        logo: "",
        proAddr: "",
        buildingArea: "",
        operateStartTime: "",
      },
      projectView: {
        totalEle: "",
        totalWater: "",
        totalGas: "",
        totalCold: "",
        yearEle: "",
        yearWater: "",
        yearGas: "",
        yearCold: "",
      },
      dialogVisible: false,
      selectedFile: null,
      viewImageUrl: "",

      chartInstance: null,
      data1: [],
      data2: [],
      xTable: [],
      chartsData1: null,
      chartsData2: null,
      isShowHome: true,

      //传给子组件的数据
      coldSys: [],
      hotWaterSys: [],
      airAndWindSys: [],
      temSys: [],
    };
  },
  mounted() {
    this.getProject();
    this.getHomeData();
    this.getSubData();
    // // 在组件挂载后尝试进入全屏
    // setTimeout(() => {
    //   this.requestFullscreen();
    // }, 100); // 延迟 100 毫秒执行全屏操作
    // this.initChart();
    // window.addEventListener("resize", this.screenAdapter);
    // this.screenAdapter();
    // this.getChartsData();
  },
  destroyed() {
    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
    // window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏了吗");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    },
    // 获取项目简介数据
    getProject() {
      this.imgUrl = imgUrl;
      introduction().then((res) => {
        console.log("项目资料", res);
        if (res.code == 200) {
          this.projectObj = res.rows[0];
        }
      });
    },
    // 显示上传图片弹框
    showDialog() {
      this.dialogVisible = true;
    },
    // 处理文件选择事件
    handleFileChange(file, fileList) {
      this.selectedFile = file.raw;
    },
    // 关闭弹框
    addExpenseClose() {
      // 清除上传文件
      this.$refs.uploadComponent.clearFiles();
      this.viewImageUrl = "";
    },
    // 重置
    reset() {
      this.dialogData = {};
      // 清除上传文件
      this.$refs.uploadComponent.clearFiles();
      this.viewImageUrl = "";
    },
    // 图片移除
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.selectedFile = {};
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
      this.viewImageUrl = file.url;
    },
    // 上传成功
    handleUploadSuccess(response, file, fileList) {},
    // 处理文件
    handleFileChange(file, fileList) {
      console.log("file", file);
      this.selectedFile = file.raw;
    },
    processFile(file) {
      // 在这里你可以对 file.raw 进行任何本地处理
      console.log("处理的文件", file);
      // 例如：读取文件内容
      const reader = new FileReader();
      reader.onload = (event) => {
        console.log("文件内容", event.target.result);
      };
      reader.readAsDataURL(file);
    },
    customHttpRequest(options) {
      // 自定义上传逻辑，不进行实际的网络请求
      const file = options.file;
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`上传文件数量超过限制, 当前限制为 1 张`);
    },
    // 上传
    uploadFile() {
      console.log("这里进行请求");
      let data = {
        proId: 0,
        logo: this.selectedFile,
      };
      changeLogo(data).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("上传成功");
          this.getProject();
          this.dialogVisible = false;
        } else {
          this.$message.error("上传失败");
          this.dialogVisible = false;
        }
      });
    },
    // 项目概况
    getHomeData() {
      viewProfile().then((res) => {
        if (res.code == 200) {
          this.projectView = res.rows[0];
        }
      });
    },
    goEnergy() {
      this.$router.push("/comprehensiveEnergy/systemEnergy");
    },
    //初始化chartInstance对象
    initChart() {
      this.chartInstance = echarts.init(this.$refs.charts_ref);
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          data: ["消费总金额(元)", "消费总次数（次）"],
          icon: "cricle", //图例样式，可以自行查看样式选择
          // //图例文字颜色
          textStyle: {
            color: "#ffff",
            fontSize: 12, //这里改字体大小
          },
          left: "center",
          top: "10",
          //图例距离饼图的距离
          itemGap: 5,
          itemWidth: 10,
          itemHeight: 5,
        },
        xAxis: {
          type: "category",
          //设置为true代表离零刻度间隔一段距离
          boundaryGap: true,
          // data: [
          //   "1栋",
          //   "2栋",
          //   "3栋",
          //   "4栋",
          //   "5栋",
          //   "6栋",
          //   "7栋",
          //   "8栋",
          //   "9栋",
          //   "10栋",
          //   "11栋",
          //   "12栋",
          //   "13栋",
          //   "14栋",
          //   "15栋",
          //   "16栋",
          //   "17栋",
          //   "18栋",
          //   "19栋",
          //   "20栋",
          //   "21栋",
          //   "22栋",
          //   "23栋",
          //   "24栋",
          // ],
          data: this.xTable,
          // 修饰刻度标签的颜色即x坐标数据
          axisLabel: {
            // interval: 0, //强制显示所有x轴数据
            // rotate: 30, //x轴坐标字体倾斜30度
            color: "rgba(255, 255, 255, 1)",
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          // x坐标轴的颜色
          axisLine: {
            show: true,
            lineStyle: {
              // X 轴颜色配置
              color: "#365576",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#e2e6f0",
            },
          }, //x轴分割线
        },
        yAxis: {
          miniInterval: 5,
          type: "value",
          // name: "单位（吨）",
          // 设置 name 的样式
          nameTextStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12,
          },
          // 修饰刻度标签的颜色即y坐标数据
          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
          },
          // 显示y坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576", // 设置 y 轴线的颜色
            },
          },
          //y轴分割线段数
          // splitNumber: 10,
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#1a3d62", // 设置分割线的颜色
              type: "dashed", // 设置分割线为虚线
            },
          },
        },
        series: [
          {
            name: "消费总金额(元)",
            type: "line",
            // data: [
            //   20, 42, 12, 43, 22, 56, 22, 7, 88, 34, 62, 12, 23, 41, 23, 22, 87,
            //   56, 54, 34, 33, 10, 32, 54, 39, 27,
            // ],
            data: this.data1,
            itemStyle: {
              color: " #08c8ff",
            },
          },
          {
            name: "消费总次数（次）",
            type: "line",
            // data: [
            //   40, 42, 2, 45, 32, 16, 92, 7, 88, 34, 62, 12, 23, 41, 23, 22, 43,
            //   56, 524, 32, 3, 11, 32, 54, 39, 27,
            // ],
            data: this.data2,
            itemStyle: {
              color: "#277dff",
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
    // 图表自适应 + 折线图数据
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = (this.$refs.charts_ref.offsetWidth / 100) * 0.8;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {};
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance.resize();
    },
    //
    getChartsData() {
      const now = new Date();
      const startDate = new Date(
        Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 30)
      );
      const endDate = new Date(
        Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 1)
      );

      const startDateStr = startDate.toISOString().slice(0, 10);
      const endDateStr = endDate.toISOString().slice(0, 10);
      let params = {
        page: 0,
        limit: 10,
        startDate: startDateStr,
        endDate: endDateStr,
        type: "projectDay",
        buildingName: "",
      };
      // console.log("近30天楼栋用水参数", params)
      findTableData(params).then((res) => {
        // console.log("近30天楼栋用水返回", res)
        if (res) {
          (this.data1 = []),
            (this.data2 = []),
            (this.xTable = []),
            res.data.forEach((item) => {
              this.data1.push(item.AmountConsu);
              this.data2.push(item.PersonTime);
              this.xTable.push(item.DATE);
            });
          // console.log("xTable------------", this.xTable);
          // console.log("data1--------------", this.data1);
          // console.log("data2--------------", this.data2);
          const adapterOption = {
            xAxis: {
              data: this.xTable,
            },
            series: [
              {
                data: this.data1,
              },
              {
                data: this.data2,
              },
            ],
          };
          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
          this.chartInstance.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance.resize();
        } else {
          const adapterOption = {
            xAxis: {
              data: [],
            },
            series: [
              {
                data: [],
              },
              {
                data: [],
              },
            ],
          };
          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
          this.chartInstance.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance.resize();
        }
      });
    },
    // 请求的数据
    getSubData() {
      viewMainParams().then((res) => {
        console.log("系统参数返回", res);
        console.log("冷源监控返回", res.rows[0]);
        this.coldSys = [];
        this.hotWaterSys = [];
        this.airAndWindSys = [];
        this.temSys = [];
        if (res.code == 200 && res.rows) {
          res.rows.forEach((val) => {
            if (val.name.includes("冷源")) {
              this.coldSys = val.values;
              console.log("this.coldSys111111111111", this.coldSys);
            }
            if (val.name.includes("热水")) {
              this.hotWaterSys = val.values;
            }
            if (val.name.includes("风柜")) {
              this.airAndWindSys = val.values;
            }
            if (val.name.includes("温度")) {
              this.temSys = val.values;
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.project-all {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0.35rem;
  .project-img {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.1rem;
    border: solid 1px #0163a8;
    margin-right: 0.4rem;
    cursor: pointer;
  }
  .project-li {
    width: calc((100% - 0.7rem) / 2);
    display: flex;
    flex-direction: column;
    .list-con {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .project-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        .left-icon {
          width: 0.2rem;
          height: 0.2rem;
        }
        .project-name {
          font-family: SourceHanSansCN-Regular;
          font-size: 0.18rem;
          line-height: 0.4rem;
          color: #ffffff;
          opacity: 0.8;
          margin-left: 0.15rem;
        }
      }
      .project-right {
        font-family: SourceHanSansCN-Regular;
        font-size: 0.18rem;
        line-height: 0.4rem;
        color: #ffffff;
      }
    }
  }
  .project-li:nth-last-child(1) {
    margin-left: 1.5rem;
  }
}
.project-data {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  margin: 16px 0;
  .overview {
    width: 100%;
    padding-top: 0.32rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    .overview-li {
      cursor: pointer;
      width: calc(25%);
      height: 1.65rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image: url(../assets/images/overview-img.png);
      background-repeat: no-repeat;
      background-size: 1.65rem 1.65rem;
      background-position: center center;
      margin-bottom: 0.3rem;
      font-family: SourceHanSansCN-Regular;
      font-size: 0.15rem;
      color: #ffffff;
      .overview-details {
        font-family: DIN-Bold;
        font-size: 0.2rem;
        color: #15e1fd;
        margin-top: 0.05rem;
      }
    }
  }
}
.chartsDiv {
  width: 100%;
  height: 4rem;
}
.project-bie {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  .special-div {
    width: 24.5%;
  }
}
@media (max-width: 1485px) {
  .overview-li {
    width: calc(33.33%) !important;
    height: 2.5rem !important;
    background-size: 2.5rem 2.5rem !important;
    margin-bottom: 0.3rem;
    font-size: 0.22rem !important;
    .overview-details {
      font-size: 0.27rem !important;
    }
  }
  .project-bie {
    flex-wrap: wrap !important;
    .special-div {
      width: 49.5% !important;
      margin-bottom: 0.25rem;
    }
  }
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
}
</style>
