<template>
  <div ref="cockpit-container-equipment" class="visual-container">
    <techy-header :head-title="'合肥新能源数字工厂设备管理驾驶舱'" @toggle-full-screen="changeFullScreen" />
    <!-- <section class="techy-body" :key="refreshKey"> -->
    <section class="techy-body">
      <div class="tech-body__col-1">
        <div class="row-1">
          <div class="equipment-exception">
            <!-- 设备报修/异常上报 -->
            <techy-container :title="'设备报修/异常上报'" icon="扳手螺丝刀">
              <div class="table-wrapper fix-table-exception-report">
                <techy-table
                  :page="1"
                  :limit="12"
                  :show-index="false"
                  :table-config="equipmentExceptionProps"
                  :table-data="equipmentExceptionDatalist"
                />
              </div>
            </techy-container>
          </div>
          <div class="equipment-alarm">
            <!-- 设备异常报警 -->
            <techy-container :title="'设备异常报警'" icon="安全帽">
              <div class="table-wrapper fix-table-eq-exception">
                <techy-table
                  :page="1"
                  :limit="12"
                  :show-index="false"
                  :table-config="equipmentAlarmProps"
                  :table-data="equipmentAlarmDatalist"
                />
              </div>
            </techy-container>
          </div>
        </div>
        <div class="row-2">
          <!-- 设备分析 -->
          <techy-container :title="'设备分析'" icon="趋势搜索">
            <select id="productLine" name="productLine" class="product-line-selection">
              <option value="1">产线一</option>
              <option value="2">产线二</option>
              <option value="3">产线三</option>
            </select>
            <div class="equipment-analysis__inner">
              <div>
                <TechyBox class="pl-jdl">
                  <!-- <h2
                    :style="{
                      margin: 0,
                      padding: 0,
                      fontWeight: 'normal',
                      color: '#01CFCC',
                      lineHeight: '18px',
                      fontSize: '0.85vw'
                    }"
                  >
                    各产线稼动率
                  </h2> -->
                  <span class="pl-jdl__title">各产线稼动率</span>
                  <pl-jdl-chart />
                </TechyBox>
              </div>
              <div class="eqs-oee-mtbr-btbf grid grid-2-3">
                <EquipmentAnalysisBox
                  v-for="(item, index) in equipmentAnalysisData"
                  :key="index"
                  :name="item.name"
                  :oee="item.oee"
                  :mtbf="item.mtbf"
                  :mtbr="item.mtbr"
                />
              </div>
            </div>
          </techy-container>
        </div>
        <div class="row-3">
          <!-- 设备备件管理 -->
          <techy-container :title="'设备备件管理'" icon="清单齿轮">
            <div class="table-wrapper fix-table-exception-report">
              <techy-table
                :page="1"
                :limit="12"
                :show-index="false"
                :table-config="sparepartsProps"
                :table-data="sparepartsDatalist"
              />
            </div>
          </techy-container>
        </div>
      </div>

      <div class="tech-body__col-2">
        <techy-container :title="'设备工单管理'" icon="清单齿轮">
          <!-- 设备工单管理 -->
          <div class="techy-container__inner">
            <div>
              <TechyAnalysisHeader>突发性维护</TechyAnalysisHeader>
              <TechyVerticalTable key="1" :table-props="suddenMaintainProps" :data-list="rightSideDatalist" />
            </div>
            <div>
              <TechyAnalysisHeader>计划内保养</TechyAnalysisHeader>
              <TechyVerticalTable key="2" :table-props="inPlanMaintainProps" :data-list="rightSideDatalist2" />
            </div>
            <div>
              <TechyAnalysisHeader>防御性维护</TechyAnalysisHeader>
              <TechyVerticalTable key="3" :table-props="defenceMaintainProps" :data-list="rightSideDatalist3" />
            </div>
            <div>
              <TechyAnalysisHeader>点检工单</TechyAnalysisHeader>
              <TechyVerticalTable key="4" :table-props="wwwOrderProps" :data-list="rightSideDatalist4" />
            </div>
          </div>
        </techy-container>
      </div>
    </section>
  </div>
</template>

<script>
import TechyContainer from './components/TechyContainer.vue'
import TechyHeader from './components/TechyHeader.vue'
import TechyBox from './components/TechyBox.vue'
import TechyTable from './components/TechyTable.vue'
import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
import EquipmentAnalysisBox from './components/EquipmentAnalysisBox.vue'
import TechyVerticalTable from './components/TechyVerticalTable.vue'
import plJdlChart from './components/charts/pl-JDL-Chart.vue'

import {
  equipmentExceptionProps,
  equipmentExceptionDatalist,
  equipmentAlarmProps,
  equipmentAlarmDatalist,
  OEE_PER_LINE,
  equipmentAnalysisData,
  sparepartsProps,
  sparepartsDatalist,
  suddenMaintainProps,
  inPlanMaintainProps,
  defenceMaintainProps,
  wwwOrderProps,
  rightSideDatalist,
  rightSideDatalist2,
  rightSideDatalist3,
  rightSideDatalist4
} from './mockData'

import { mapGetters } from 'vuex'
import screenfull from 'screenfull'

export default {
  name: 'EquipmentManageHome',
  components: {
    plJdlChart,
    TechyContainer,
    TechyHeader,
    TechyBox,
    TechyVerticalTable,
    TechyTable,
    TechyAnalysisHeader,
    EquipmentAnalysisBox
  },
  directives: {
    'auto-shrink-and-grow': function(el, binding) {
      console.log('el', el, binding)
    }
  },
  props: {},
  data() {
    return {
      equipmentExceptionProps,
      equipmentExceptionDatalist,
      equipmentAlarmProps,
      equipmentAlarmDatalist,
      OEE_PER_LINE,
      equipmentAnalysisData,
      sparepartsProps,
      sparepartsDatalist,
      suddenMaintainProps,
      inPlanMaintainProps,
      defenceMaintainProps,
      wwwOrderProps,
      rightSideDatalist,
      rightSideDatalist2,
      rightSideDatalist3,
      rightSideDatalist4
      // refreshKey: 0
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  mounted() {},

  methods: {
    changeFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs['cockpit-container-equipment'])
    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: calc(8px * var(--beilv));
}

::-webkit-scrollbar-track {
  background-color: #14243f;
  border-radius: 0;
}

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

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

.fix-table-eq-exception >>> .el-table td .cell {
  width: 80% !important;
  margin: auto;
  text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
  width: 70% !important;
  margin: auto;
  text-align: left;
}

.visual-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: url('./assets/bg.png') no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.techy-body {
  flex: 1 0;
  height: 65vh;
  width: 100%;
  padding: calc(24px * var(--beilv));
  display: flex;
  gap: calc(16px * var(--beilv));
}

.tech-body__col-1 {
  /* height: calc(100% - 28px); */
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--beilv));
  width: 70%;
}

.tech-body__col-2 {
  width: 25%;
  flex: 0;
  height: 100%;
}

.techy-container__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32px * var(--beilv));
  height: calc(100% - 3vh);
  /* overflow-y: scroll; */
  overflow-y: auto;
}
.techy-container__inner > div {
  flex: 0;
}

.row-1,
/* .row-2, */
.row-3 {
  height: 30%;
}

.row-1 {
  flex: 1;
  display: flex;
  gap: calc(16px * var(--beilv));
}

.row-2 {
  flex: 0;
}

.row-3 {
  flex: 1;
}

.equipment-exception {
  min-width: 20%;
  flex: 3;
}

.equipment-alarm {
  min-width: 20%;
  flex: 2;
}

.table-wrapper {
  height: calc(100% - 3vh);
  overflow: auto;
}

.grid {
  display: grid;
}

.equipment-analysis__inner {
  height: calc(100% - 32px);
  display: flex;
  gap: calc(8px * var(--beilv));
}

.pl-jdl {
  padding: calc(8px * var(--beilv)) calc(16px * var(--beilv));
  height: calc(191px * var(--beilv));
  width: calc(245px * var(--beilv));
  display: flex;
  flex-direction: column;
}

.pl-jdl__title {
  font-size: calc(15px * var(--beilv));
  line-height: calc(18px * var(--beilv));
  color: #01cfcc;
}

.eqs-oee-mtbr-btbf {
  flex: 1;
  height: calc(191px * var(--beilv));
  overflow: hidden;
  overflow-y: auto;
}

.grid-2-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: calc(8px * var(--beilv)) calc(8px * var(--beilv));
}

.product-line-selection {
  border: none;
  outline: none;
  border-radius: calc(4px * var(--beilv));
  background: #31878c45;
  /* opacity: 0.29; */
  color: white;
  position: absolute;
  padding: calc(4px * var(--beilv));
  width: calc(114px * var(--beilv));
  font-size: calc(12px * var(--beilv));
  line-height: calc(18px * var(--beilv));
  top: calc(24px * var(--beilv));
  left: calc(140px * var(--beilv));
}
</style>
