<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 :dateData="dateData" size="psi" @timeRangeChange="handleTimeChange" 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;
          ">
          <changeBase :factory="factory" @baseChange="selectChange" />
        </div>
      </div>
      <div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
        <div class="left-three" style="
            display: grid;
            gap: 12px;
            grid-template-columns: 804px 804px;
          ">
          <monthlyOverview :month="month" :monthData="monthData" :title="'月度概览'" />
          <totalOverview :ytdData="ytdData" :title="'累计概览'" />

        </div>
      </div>
      <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">
        <div class="left-three" style="
            display: grid;
            gap: 12px;
            grid-template-columns: 804px 804px;
          ">
          <monthlyRelatedMetrics :monthAnalysis="monthAnalysis" :title="'月度·相关指标分析'" />
          <yearRelatedMetrics :ytdAnalysis="ytdAnalysis" :title="'累计·相关指标分析'" />

        </div>
      </div>
      <div class="bottom" style="display: flex; gap: 16px;margin-top: 6px;">
        <div class="left-three" style="
            display: grid;
            gap: 12px;
            grid-template-columns: 1624px;
          ">
          <dataTrend @handleChange="handleChange" :trend="trend" :title="'数据趋势'" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ReportHeader from "../components/noRouterHeader.vue";
import { Sidebar } from "../../../layout/components";
import screenfull from "screenfull";
import changeBase from "../components/changeBase.vue";
import monthlyOverview from "../inputOutputRatioComponents/monthlyOverview.vue";
import totalOverview from "../inputOutputRatioComponents/totalOverview.vue";
import monthlyRelatedMetrics from "../inputOutputRatioComponents/monthlyRelatedMetrics.vue";
import yearRelatedMetrics from "../inputOutputRatioComponents/yearRelatedMetrics.vue";
import dataTrend from "../inputOutputRatioComponents/dataTrend.vue";
import { mapState } from "vuex";
import { getInputOutputRateFactoryData } from '@/api/cockpit'
import moment from "moment";
import navigationStateMixin from "@/utils/mixins/navigationStateMixin";
export default {
  name: "DayReport",
  mixins: [navigationStateMixin],
  components: {
    ReportHeader,
    changeBase,
    monthlyOverview,
    Sidebar,
    totalOverview,
    monthlyRelatedMetrics,
    yearRelatedMetrics,
    dataTrend
    // psiLineChart
  },
  data() {
    return {
      isFullScreen: false,
      timer: null,
      beilv: 1,
      month: '',
      value: 100,
      // factory 和 dateData 由 mixin 提供
      index: '投入产出率',
      monthData: undefined,
      ytdData: undefined,
      monthAnalysis: [],
      ytdAnalysis: [],
      trend: [],
    };
  },

  created() {
    this.init();
    this.windowWidth(document.documentElement.clientWidth);
    // 使用 mixin 初始化导航状态恢复
    this._initNavigationStateMixin(({ factory, dateData }) => {
      if (factory != null && dateData && dateData.startTime != null) {
        this.getData();
      }
    });
  },
  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 _this = this;
    _this.beilv = document.documentElement.clientWidth / 1920;
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`;
        this.beilv = _this.clientWidth / 1920;
      })();
    };
  },
  methods: {
    handleChange(value) {
      this.index = value
      this.getData()
    },
    getData() {
      const requestParams = {
        startTime: this.dateData.startTime,
        endTime: this.dateData.endTime,
        index: this.index,
        sort: 1,
        factory: Number(this.factory)
      };
      // 调用接口
      getInputOutputRateFactoryData(requestParams).then((res) => {
        this.monthData = res.data.month
        this.ytdData = res.data.ytd
        this.monthAnalysis = res.data.monthAnalysis
        this.ytdAnalysis = res.data.ytdAnalysis
        this.trend = res.data.trend
      });
    },

    handleTimeChange(obj) {
      this.month = obj.targetMonth
      this.dateData = {
        startTime: obj.startTime,
        endTime: obj.endTime
      }

      this.getData()
    },
    selectChange(data) {
      console.log('选中的数据：', data);
      this.factory = data
      if (this.dateData.startTime && this.dateData.endTime) {
        this.getData();
      }
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    windowWidth(value) {
      this.clientWidth = value;
      this.beilv2 = this.clientWidth / 1920;
    },
    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);
      }
    }
  },
};
</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>
