<template>
  <div id="dayReport" class="dayReport" :style="styles">
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
    <ReportHeader size="psi" top-title="单项燃料分析" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange" />
    <div class="main-body" style="
        margin-top: -20px;
        flex: 1;
        display: flex;
        padding: 0px 16px 0 272px;
        flex-direction: column;
      ">
      <div class="top" style="display: flex; gap: 16px">
        <div class="top-three" style="
            display: grid;
            gap: 12px;
            grid-template-columns: 1624px;
          ">
          <singleTopSelect typeName="燃料" />
        </div>
      </div>
      <div class="top" style="display: flex; gap: 16px;margin-top: 8px;">
        <div class="left-three" style="
            display: grid;
            gap: 12px;
            grid-template-columns: 804px 804px;
          ">
          <topLeftChart :name=" '采购单价·元/m³' " />
          <topRightChart :name="'消耗量·m³'" />

        </div>
      </div>
      <div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
        <div class="left-three" style="
            display: grid;
            gap: 12px;
               grid-template-columns: 804px 804px;
          ">
          <bottomLeftChart :name="'单耗趋势·m³/㎡'" />
          <bottomLeftChart :name="'产量·㎡'" />
        </div>
      </div>
    </div>
    <!-- <div class="centerImg" style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* 确保在 backp 之上、内容之下 */
      "></div> -->
  </div>
</template>
<script>
import ReportHeader from "./costComponents/single/noRouterHeader.vue";
import { Sidebar } from "../../layout/components";
import screenfull from "screenfull";
import singleTopSelect from "./costComponents/singleTopSelect.vue";
import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
import profitLineChart from "./costComponents/profitLineChart.vue";
import { mapState } from "vuex";
import topLeftChart from "./costComponents/single/topLeftChart.vue";
import topRightChart from "./costComponents/single/topRightChart.vue";
import bottomLeftChart from "./costComponents/single/bottomLeftChart.vue";
import bottomRightChart from "./costComponents/single/bottomRightChart.vue";
// import PSDO from "./components/PSDO.vue";
// import psiLineChart from "./components/psiLineChart.vue";

// import coreBottomLeft from "./components/coreBottomLeft.vue";
// import orderProgress from "./components/orderProgress.vue";
// import keyWork from "./components/keyWork.vue";
import moment from "moment";
// import html2canvas from 'html2canvas'
// import JsPDF from 'jspdf'
export default {
  name: "DayReport",
  components: {
    ReportHeader,
    singleTopSelect,
    topLeftChart,
    profitLineChart,
    costItemOverviewItem,
    Sidebar,
    topRightChart,
    bottomRightChart,
    bottomLeftChart
    // psiLineChart
  },
  data() {
    return {
      weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      isFullScreen: false,
      timer: null,
      beilv: 1,
      value: 100,
      coreProductVisualAlarmVO: [],
      defect: {},
      centerEqInfo: [
        { title: "工单数量", num: 0 },
        { title: "总产量/吨", num: 0 },
        { title: "生产合格率", num: "0%" },
        { title: "设备运行数量", num: 0 },
        { title: "累计能耗/kwh", num: 0 },
      ],
      outputTrend: {},
      coreProductVisualProcessVO: [],
      coreProductVisualWorkOrderVO: {},
      date: "",
      weekDay: "", // 导出报表用
      productNum: "",
      coreProductVisualLineVO: [],
      lineYieldVo: {}, // 产线良率
      productionOverviewVo: [], // 生产状况
      qualityDistributionVo: {}, // 本日不良分布
      equipmentUtilizationVo: {}, // 设备性能稼动率
      chipPowerDistributionVo: {}, // 芯片功率分布
      modulePowerDistributionVo: {}, // 组件功率分布
      chipPowerTrendVo: {},
      modulePowerTrendVo: {},
      equipmentProVo: [], // 表格
      equipmentStateVo: [], // 设备状态分布
    };
  },

  created() {
    this.init();
    this.windowWidth(document.documentElement.clientWidth);
  },
  computed: {
    ...mapState({
      theme: (state) => state.settings.theme,
      sideTheme: (state) => state.settings.sideTheme,
      sidebar: (state) => state.app.sidebar,
      device: (state) => state.app.device,
      needTagsView: (state) => state.settings.tagsView,
      fixedHeader: (state) => state.settings.fixedHeader,
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
    variables() {
      return variables;
    },
    // ...mapGetters(['sidebar']),
    styles() {
      const v = Math.floor(this.value * this.beilv * 100) / 10000;
      return {
        transform: `scale(${v})`,
        transformOrigin: "left top",
        // overflow: hidden;
      };
    },
  },
  watch: {
    clientWidth(val) {
      if (!this.timer) {
        this.clientWidth = val;
        this.beilv2 = this.clientWidth / 1920;
        this.timer = true;
        let _this = this;
        setTimeout(function () {
          _this.timer = false;
        }, 500);
      }
      // 这里可以添加修改时的方法
      this.windowWidth(val);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.destroy();
  },
  mounted() {
    const startTime = moment().startOf("week").format("YYYY-MM-DD");
    const endTime = moment().format("YYYY-MM-DD");
    console.log(this.date, "date");
    this.date = [startTime, endTime];
    // this.weekDay = this.weekArr[moment(this.date).format('e')]
    // this.getData()
    this.loopTime();
    console.log(1111);
    const _this = this;
    _this.beilv = document.documentElement.clientWidth / 1920;
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`;
        this.beilv = _this.clientWidth / 1920;
      })();
    };
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    windowWidth(value) {
      this.clientWidth = value;
      this.beilv2 = this.clientWidth / 1920;
    },
    getToday8StartTimestamp() {
      const date = new Date(); // 获取当前时间
      // 将时设为8、分0、秒0、毫秒0
      date.setHours(8, 0, 0, 0);
      return date.getTime(); // 转换为时间戳（毫秒）
    },

    // 获取第二天早上八点的时间戳
    getTomorrow8EndTimestamp() {
      const date = new Date(); // 获取当前时间
      // 先加一天，再设置为早上八点
      date.setDate(date.getDate() + 1);
      date.setHours(8, 0, 0, 0);
      return date.getTime(); // 转换为时间戳（毫秒）
    },

    loopTime() {
      const _this = this;
      _this.timer = setInterval(function () {
        // _this.getData()
      }, 60000);
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen;
    },
    init() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.on("change", this.change);
    },
    destroy() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.off("change", this.change);
    },
    // 全屏
    screenfullChange() {
      console.log("screenfull.enabled", screenfull.isEnabled);

      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle(this.$refs.dayReportB);
    },
    changeDate(val) {
      this.date = val;
      // this.weekDay = this.weekArr[moment(this.date).format('e')]
      // this.getData()
      if (this.date === moment().format("yyyy-MM-DD")) {
        this.loopTime();
      } else {
        clearInterval(this.timer);
      }
    },
    // 导出
    // exportPDF() {
    //   this.$message.success('正在导出，请稍等！')
    //   const element = document.getElementById('dayRepDom')
    //   element.style.display = 'block'
    //   const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
    //   html2canvas(element, {
    //     dpi: 300, // Set to 300 DPI
    //     scale: 3 // Adjusts your resolution
    //   }).then(function(canvas) {
    //     const imgWidth = 595.28
    //     const imgHeight = 841.89
    //     const pageData = canvas.toDataURL('image/jpeg', 1.0)
    //     const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
    //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    //     setTimeout(() => {
    //       PDF.save(fileName) // 导出文件名
    //     }, 1000)
    //   })
    //   element.style.display = 'none'
    // }
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.dayReport {
  width: 1920px;
  height: 1080px;
  background: url("../../assets/img/backp.png") no-repeat;
  background-size: cover;
}
.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
  width: calc(100%);
}

.mobile .fixed-header {
  width: 100%;
}
</style>
