<template>
  <div id="screen" class="allShow" :style="{ 'width': `${style.width}px`, 'height': `${style.height}px`, 'transform': `${style.transform}` }">
    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);">
      <div style="height: 80px; width: 1918px;">
        <el-col :span="5">
          <div style="font-size: 1.5rem;margin-top: 10px;margin-left: 10px">
            <el-col :span="12">
              <img style="height: 60px;cursor: pointer" :src="titlePng"/>
            </el-col>
            <el-col :span="12">
              <div style="font-weight: bolder;line-height: 50px"></div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="13">
          <div style="font-size: 3rem;color: white;text-align: center;margin-top: 15px">
            <span style="letter-spacing: 5px;font-weight: bolder">基于虚拟调试的智能机器人清洗工厂平台</span>
          </div>
        </el-col>
        <el-col :span="6">
          <el-col :span="13">
            <div style="color: white;font-size: 3.2rem;margin-top: 10px;float: right">
            </div>
          </el-col>
          <el-col :span="11">
            <div style="color: white;font-size: 1.7rem;margin-top: 10px;margin-right: 2%;float: right">
              <img style="height: 60px;" :src="titlePng1"/>
            </div>
          </el-col>
        </el-col>
      </div>
    </el-row>
    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);height: 1000px;padding: 10px 20px">
      <el-col :span="2" style="height: 960px;background-color: rgb(219 219 219)">
        <div style="display: flex;flex-direction: column">
          <div id="menu_1" class="show-label-title" @click="selectPage(1)">设备信息</div>
          <div id="menu_2" class="show-label-title" @click="selectPage(2)">维护设定</div>
          <div id="menu_999" class="show-label-title-out" @click="selectPage(999)">退出</div>
        </div>
      </el-col>
      <el-col :span="22" style="height: 960px;background-color: rgb(179 179 179)">
        <div style="background-color: #fff;margin: 0;">
          <q-x_part ref="q-x_partPage" v-if="pageIndexShow === 1"/>
          <q-x_-e-m-s ref="q-x_-e-m-sPage" v-if="pageIndexShow === 2"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import QX_part from '@/views/page/QX_part.vue'
import QX_EMS from '@/views/page/QX_EMS.vue'
import axios from 'axios'
import $ from 'jquery'
export default {
  components: {
    'QX_part': QX_part,
    'QX_EMS': QX_EMS
  },
  data() {
    return {
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      titlePng: '',
      titlePng1: '',
      activeName: 'first1',
      title: '',
      loading: false,
      tableData: [],
      tableData1: [],
      ID: '',
      station: '',
      stationOutput: '',
      stationNumberID: '',
      partID: '',
      titleEdit: '',
      date: new Date(),
      month: '',
      day: '',
      minute: '',
      hour: '',
      year: '',
      second: '',
      week: '',
      timer: null,
      timerInit: null,
      notifyPromise: Promise.resolve(),
      pageIndexShow: 1,
      pageIndexShow_Last: 1
    }
  },
  // 通过路由把index3中 点击的工位号 和 是否存在订单 值传进本页
  watch: {
  },
  computed: {},
  mounted() {
    document.getElementById(`menu_1`).style.backgroundColor = '#fff'
    document.getElementById(`menu_1`).style.color = '#000000'
    this.setScale()
    /* 窗口改变事件*/
    $(window).resize(() => {
      this.setScale()
    })
  },
  created() {
    this.getLogo()
  },
  beforeDestroy() {
  },
  methods: {
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    selectPage(pageIndex) {
      if (pageIndex === 999) {
        window.location.href = 'about:blank'
        window.close()
        return
      }
      document.getElementById(`menu_${pageIndex}`).style.backgroundColor = '#fff'
      document.getElementById(`menu_${pageIndex}`).style.color = '#000000'
      if (this.pageIndexShow_Last !== pageIndex) {
        document.getElementById(`menu_${this.pageIndexShow_Last}`).style.backgroundColor = '#ffaa13'
        document.getElementById(`menu_${this.pageIndexShow_Last}`).style.color = '#fff'
      }
      this.pageIndexShow = pageIndex
      this.pageIndexShow_Last = pageIndex
    },
    closePage() {
      window.location.href = 'about:blank'
      window.close()
    },
    getLogo() {
      axios.get('../../JFDL_logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../DAMLOGO.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  }
}
</script>
<style>
  HTML{
    overflow: hidden;
  }
  body{
    margin:0;
    padding:0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    position: relative;
    font-family: MiSans Bold, serif;
  }
  /*css主要部分的样式*/
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 5px; /*对垂直流动条有效*/
    height: 5px; /*对水平流动条有效*/
  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgb(14, 50, 97);
    /*background-color: #ffffff;*/
    border-radius: 2px;
  }

  /*定义滑块颜色、内阴影及圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgb(10, 35, 82);
  }

  /*定义两端按钮的样式*/
  ::-webkit-scrollbar-button {
    display: none;
  }

  /*定义右下角汇合处的样式*/
  ::-webkit-scrollbar-corner {
    background: #dedede;
  }
</style>
<style scoped="scoped">
  .allShow {
    overflow-y: hidden;
    z-index: 100;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    background-color: rgb(8, 31, 72);
    color: white;
  }
  .show-label-title{
    cursor: pointer;
    border-radius: 5px;
    font-size: 28px;
    margin: 10px 5px;
    background-color: #ffad1b;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #00893d;
  }
  .show-label-title-out{
    cursor: pointer;
    border-radius: 5px;
    font-size: 28px;
    margin: 10px 5px;
    background-color: #ff4444;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #00893d;
  }
  .allShow {
    overflow-y: hidden;
    z-index: 100;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    background-color: rgb(8, 31, 72);
    color: white;
  }
  .title-date>p {
    color: #fff;
    /* background: linear-gradient(to bottom, #043768, #000c3b,#043768); */
    box-shadow: inset 0 0 30px #07417a;
    border: solid 2px #032d60;
    border-radius: 10px;
    /* box-shadow: 4px 2px 6px #033579, -4px -2px 6px #033579, 0px 0px 12px 5px #033579 inset; */
    font-size: 1.5rem;
    margin: 0px 390px;
    padding: 5px 10px;
  }
</style>
