<template>
  <div style="height: 100%; width: 100%;border: 1px solid #9e9b9b">
    <el-col :span="3" style="height: 100%;text-align: center">
      <img :src="leftPic" width="166.5px" height="53px" style="margin: 25px 0 0 0" @click="handleFullScreen">
    </el-col>
    <el-col :span="18" style="height: 100%;background-color: #d7dee6;">
      <el-row style="height: 50%;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: center;">
        <div class="eleBlock eleBlock-BigWidth">
          <div style="line-height: 34px">
            <span class="textcss">工位名称：</span>
          </div>
          <span class="block"> {{ stationName }}</span>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="line-height: 34px;">
            <span class="textcss">工位编号：</span>
          </div>
          <span class="block"> {{ stationNumber }}</span>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="line-height: 34px">
            <span class="textcss" style="letter-spacing: 4px">操作者：</span>
          </div>
          <span class="block"> {{ operator }}</span>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="line-height: 34px">
            <span class="textcss">生产班次：</span>
          </div>
          <div class="block">
            {{ shiftNumber }}
          </div>
        </div>
      </el-row>
      <el-row style="height: 50%;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: center;">
        <div class="eleBlock eleBlock-BigWidth">
          <div style="float: left;line-height: 34px">
            <span class="textcss">产品编号：</span>
          </div>
          <div class="block" style="font-weight: bolder;letter-spacing: 1px;">
            {{ EngineValue.EngineID }}
          </div>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="float: left;line-height: 34px">
            <span class="textcss">产品型号：</span>
          </div>
          <div class="block" style="font-weight: bolder;letter-spacing: 1px;">
            {{ EngineValue.EngineType }}
          </div>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="float: left;line-height: 34px">
            <span class="textcss" style="letter-spacing: 4px">订单号：</span>
          </div>
          <div id="spanOrderForm" class="block" style="font-weight: bolder;letter-spacing: 1px;">
            {{ EngineValue.OrderForm }}
          </div>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="float: left;line-height: 34px">
            <span class="textcss">托盘编号：</span>
          </div>
          <div class="block" style="font-weight: bolder;letter-spacing: 1px;">
            {{ EngineValue.PartPalletCode }}{{ EngineValue.EngineTypeString }}
          </div>
        </div>
      </el-row>
      <el-row style="display: flex">
        <div style="font-size: 30px;margin-left: 900px;width: 800px;line-height: 70px;">
          <span>上台完工机型：</span>
          <span style="font-weight: 800;word-break: break-all;color:coral;">{{ EngineValue.BeforeEngineType }}</span>
        </div>
      </el-row>
    </el-col>
    <el-col :span="3" style="height: 100%">
      <img :src="rightPic" style="width: 50%; height: 90%;margin: 5px 0 0 65px">
    </el-col>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    EngineValue: {
      type: Object,
      default: function () {
        return {
          fullscreen: false,
          isAppendToBodyOther: false,
          OpName: null,
          EngineID: null, // 产品编号
          EngineType: null, // 产品型号
          EngineTypeID: null, // 机型代码
          PalletCode: null,
          ProcessCode: null, // 程序号
          PartPalletCode: null, // 托盘号
          PalletInfo: null, // 托盘信息
          RepairPartStatusPLC: null,
          QualityMask: null,
          OrderForm: null, // 订单号,
          EngineTypeString: null, // 产品型号字符串北汽专用
          BeforeEngineType: null // 上一台机型号
        }
      }
    }
  },
  data() {
    return {
      config: {},
      leftPic: '',
      rightPic: '',
      stationNumber: '',
      stationName: '',
      operator: '',
      shiftNumber: ''
    }
  },
  created() {
    // this.getStationNumber()
    this.stationNumber = this.$store.state.station.stationName
    this.operator = this.$store.state.user.name
    this.shiftNumber = this.$store.state.station.classes
    axios.get('../leftPic.jpg', {
      responseType: 'arraybuffer'
    }).then(res => {
      this.leftPic = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data +
          String.fromCharCode(byte), ''))
    })
    axios.get('../rightPic.png', {
      responseType: 'arraybuffer'
    }).then(res => {
      // console.log(res.data.toString())
      this.rightPic = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data +
          String.fromCharCode(byte), ''))
    })
    this.getStationName()
  },
  methods: {
    getStationNumber() {
      if (this.$store.state.station.stationName) {
        this.stationNumber = this.$store.state.station.stationName
      } else {
        this.stationNumber = sessionStorage.getItem('stationNumber')
      }
    },
    getStationName() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询工位名称_根据工位号', param)
      this.ExecDatabase(Data).then(response => {
        this.stationName = response.data[0].工位名称
      })
    },
    handleFullScreen() {
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>

<style scoped>
.eleBlock {
  margin-top: 10px;
  display: flex;
  font-size: 16px;
}

.eleBlock-BigWidth {
  width: 35%;
}

.eleBlock-SmallWidth {
  width: 20%;
}

.eleBlock span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block {
  font-size: 20px;
  border-radius: 3px;
  display: inline-block;
  width: 80%;
  height: 30px;
  border: 1px solid #bfbfbf;
  text-align: center;
  background-color: white;
  padding: 2px;
  line-height: 30px;
}

.spacing-block {
  letter-spacing: 2px;
}

.textcss {
  color: black;
  font-size: 22px;
}
</style>
