<template>
  <div id="v3d-outter" ref="v3d-outter">
    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
    <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
    <div v-if="showPage" id="v3d-main-content">
      <!-- <div v-if="true" id="v3d-main-content"> -->
      <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />

      <section id="techy-body-part">
        <div class="upper-part">
          <div class="techy-body-part__left">
            <div class="order">
              <techy-container title="订单完成情况" icon="default" style="display: flex; flex-direction: column;">
                <LeftContentOrder style="height: 1px; flex: 1;" />
              </techy-container>
            </div>
            <div class="public">
              <techy-container title="公用工程消耗" icon="菱形叠加">
                <LeftContentPublicConsume />
              </techy-container>
            </div>

            <div class="techy-body-part__middle" v-if="currentEquipment">
              <TechyBox>
                <div class="techy-body-part__middle__inner">
                  <p>
                    <b>产线名称 :</b>
                    <span>{{ currentEquipment.pl }}</span>
                  </p>
                  <p>
                    <b>设备名称 :</b>
                    <span>{{ currentEquipment.name }}</span>
                  </p>
                  <p>
                    <b>累计加工 :</b>
                    <span>{{ currentEquipment.amount }}</span>
                  </p>
                  <p>
                    <b>通信状态 :</b>
                    <span class="round-dot">
                      <span
                        class="dot-icon"
                        :class="{
                          'green-dot': currentEquipment.status === '生产中',
                          'red-dot': currentEquipment.status === '故障',
                          'yellow-dot': currentEquipment.status === '调试中'
                        }"
                      ></span>
                      {{ currentEquipment.status }}
                    </span>
                  </p>
                </div>
              </TechyBox>
            </div>
          </div>

          <div class="techy-body-part__right">
            <div class="realtime">
              <techy-container title="实时产量和能耗" icon="折角的菜单图标">
                <RightContentRealtimeProduction />
              </techy-container>
            </div>

            <div class="ws-quality">
              <techy-container title="工序质量分析" icon="趋势放大镜图标">
                <RightContentQualityAnalysis />
              </techy-container>
            </div>

            <div class="production">
              <techy-container title="产线成品率" icon="default">
                <RightContentProductRate />
              </techy-container>
            </div>
          </div>
        </div>

        <!-- 底部 -->
        <div class="bottom-part">
          <div class="eq-check">
            <techy-container title="设备巡检提示" icon="电脑警告菜单图标" style="flex: 0; align-self: stretch;">
              <LeftContentEquipmentCheck />
            </techy-container>
          </div>
          <div class="ft-monitor" style="flex: 1;">
            <techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
              <LeftContentMonitor />
            </techy-container>
          </div>
          <div class="fault-analysis">
            <techy-container title="缺陷分类分析" icon="菜单放大镜图标">
              <RightContentFaultAnalysis />
            </techy-container>
          </div>
          <div class="eq-alert">
            <techy-container title="设备报警提示" icon="电脑警告图标">
              <RightContentAlert />
            </techy-container>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import V3DApp from './components/V3DApp.vue'
import TechyHeader from './components/TechyHeader.vue'
import TechyContainer from './components/TechyContainer.vue'
import LeftContentMonitor from './components/LeftContentMonitor.vue'
import LeftContentEquipmentCheck from './components/LeftContentEquipmentCheck.vue'
import LeftContentOrder from './components/LeftContentOrder.vue'
import LeftContentPublicConsume from './components/LeftContentPublicConsume.vue'
import RightContentAlert from './components/RightContentAlert.vue'
import RightContentRealtimeProduction from './components/RightContentRealtimeProduction.vue'
import RightContentProductRate from './components/RightContentProductRate.vue'
import RightContentQualityAnalysis from './components/RightContentQualityAnalysis.vue'
import RightContentFaultAnalysis from './components/RightContentFaultAnalysis.vue'
import TechyBox from './components/TechyBox.vue'

import screenfull from 'screenfull'

import eqList from './v3dApp/data'

export default {
  name: '',
  components: {
    V3DApp,
    TechyHeader,
    TechyContainer,
    LeftContentMonitor,
    LeftContentEquipmentCheck,
    LeftContentOrder,
    LeftContentPublicConsume,
    RightContentAlert,
    RightContentRealtimeProduction,
    RightContentProductRate,
    RightContentQualityAnalysis,
    RightContentFaultAnalysis,
    TechyBox
  },
  data() {
    return {
      eqId: null,
      currentEquipment: null,
      showPage: false,
      toggleResize: 'toggle-1' // <=== no need to worry this
    }
  },
  provide() {
    return { resizeStatus: () => this.toggleResize }
  },
  created() {},
  mounted() {},
  methods: {
    /** 全屏切换 */
    toggleFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs['v3d-outter'])
      this.toggleResize = this.toggleResize === 'toggle-1' ? 'toggle-2' : 'toggle-1'
    },
    handle3DLoaded() {
      this.showPage = true
    },
    handle3DClick() {
      this.eqId = document.getElementById('V3DData').rel
      if (this.eqId) {
        this.currentEquipment = eqList.find(item => item.id === this.eqId)
      }
    }
  }
}
</script>

<style>
#v3d-outter {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/img/cockpit/cockpit-back.png');
  background-size: cover;
  background-position: center;
  font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  color: #4d4d4d;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  position: relative;
  /* overflow: auto; */
}

#v3d-outter *::-webkit-scrollbar {
  width: calc(8px * var(--beilv));
}

#v3d-outter *::-webkit-scrollbar-track {
  background-color: #14243f;
  /* background-color: white; */
  border-radius: 0;
}

#v3d-outter *::-webkit-scrollbar-button {
  width: calc(8px * var(--beilv));
  height: calc(8px * var(--beilv));
  background: #5bc4bf9f;
  position: relative;
}

#v3d-outter *::-webkit-scrollbar-thumb {
  border-radius: calc(8px * var(--beilv));
  background: #5bc4bf9f;
}

#v3d-main-content {
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 3;
  display: flex;
  flex-direction: column;
  font: initial;
}

#techy-body-part {
  height: 20vh;
  flex: 1 1;
  display: flex;
  gap: calc(16px * var(--beilv));
  flex-direction: column;
}

.upper-part {
  flex: 1 1;
  height: 20vh;
  padding: calc(24px * var(--beilv));
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(16px * var(--beilv));
}

/* 订单完成情况 */
.order {
  height: calc(232px * var(--beilv));
  flex: 0;
}
/* 公用工程消耗 */
.public {
  height: calc(472px * var(--beilv));
  flex: 1;
  overflow: hidden;
}

/* 实时产量和能耗 */
.realtime {
  height: calc(256px * var(--beilv));
}
/* 工序质量分析 */
.ws-quality {
  /* height: calc(228px * var(--beilv)); */
  min-height: calc(136px * var(--beilv));
  flex: 1;
}
/* 产线成品率 */
.production {
  height: calc(256px * var(--beilv));
  position: relative;
}

.bottom-part {
  height: calc(224px * var(--beilv));
  padding: 0 calc(24px * var(--beilv)) calc(24px * var(--beilv));
  display: flex;
  gap: calc(16px * var(--beilv));
}

/* 设备巡检提示 */
.eq-check,
.eq-alert {
  width: calc(472px * var(--beilv));
}

/* 现场实时监控 */
.ft-monitor {
}

/* 缺陷分类分析  */
.fault-analysis {
  width: calc(290px * var(--beilv));
}

/* 设备报警提示 */
.eq-alert {
}

.techy-body-part__left,
.techy-body-part__right {
  /* height: 100%; */
  /* height: calc(512px * var(--beilv));
  flex: 1; */
  width: calc(472px * var(--beilv));
  overflow: unset;

  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--beilv));
  position: relative;
}

.techy-body-part__right-col-2 {
  flex: 1;
  display: flex;
  gap: calc(100vmin / 1920 * 36);
}

/* .techy-body-part__middle {
  flex: 1;
  position: relative;
} */

.techy-body-part__middle {
  position: absolute;
  top: 0;
  right: calc(-16px * var(--beilv));
}

.techy-body-part__middle .techy-box {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(128px * var(--beilv));
  width: calc(188px * var(--beilv));
}

.techy-body-part__middle__inner {
  height: 100%;
  padding: calc(16px * var(--beilv));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* gap: calc(6px * var(--beilv)); */
}

.techy-body-part__middle__inner p {
  margin: 0;
  padding: 0;
  font-size: calc(12px * var(--beilv));
  line-height: 1.5;
  color: #fff;
  display: flex;
}

.techy-body-part__middle__inner p > span {
  position: relative;
  padding-left: calc(16px * var(--beilv));
}

.techy-body-part__middle__inner p > span.round-dot {
  /* padding-left: calc(28px * var(--beilv)); */
  display: flex;
  align-items: center;
  gap: calc(4px * var(--beilv));
}

.dot-icon {
  height: calc(16px * var(--beilv));
  width: calc(16px * var(--beilv));
}

.red-dot {
  background: url(./components/assets/red.png) 20% center / 100% no-repeat;
}
.green-dot {
  background: url(./components/assets/green.png) 20% center / 100% no-repeat;
}
.yellow-dot {
  background: url(./components/assets/orange.png) 20% center / 100% no-repeat;
}
.blue-dot {
  background: url(./components/assets/blue.png) 20% center / 100% no-repeat;
}

/* .round-dot::before {
  content: ''; */
/* position: absolute;
  top: calc(4px * var(--beilv));
  left: calc(16px * var(--beilv)); */
/* width: calc(8px * var(--beilv));
  height: calc(8px * var(--beilv));
  background-color: rgb(82, 231, 82);
  border-radius: calc(4px * var(--beilv));
} */

.danger-dot::before {
  background-color: #e71837;
}

.warning-dot::before {
  background-color: #d6961f;
}
</style>
