<template>
  <div style="height: 100%; width: 100%;border: 1px solid #9e9b9b">
    <el-col :span="3" style="height: 100%;text-align: center">
      <img :src="leftPic" height="65px" style="margin: 15px 0 0 0" width="210px" @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">操作者1：</span>
          </div>
          <span class="block"> {{ operator }}</span>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="line-height: 34px">
            <span class="textcss">操作者2：</span>
          </div>
          <span class="block" style="width: 230px" @click="UpdateJobNumber()"> {{
              operator2
            }}</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;">
            {{ $store.state.station.engineValue.workCode }}
          </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;">
            {{ $store.state.station.engineValue.projectName }}
          </div>
        </div>
        <div class="eleBlock eleBlock-SmallWidth">
          <div style="float: left;line-height: 34px;letter-spacing: 0px">
            <span class="textcss">工件编号:</span>
          </div>
          <div class="block" style="font-weight: bolder;letter-spacing: 1px;">
            {{ $store.state.station.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;">
            {{ $store.state.station.engineValue.EngineType }}
          </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;">
            {{$store.state.station.engineValue.startPlanTime ? $store.state.station.engineValue.startPlanTime.substring($store.state.station.engineValue.startPlanTime.length ,10) :'' }}
          </div>
        </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>
    <el-dialog title="操作者2登录" :visible.sync="operator2LoginVisible" center width="600px" style="text-align: center">
      <div style="text-align: center">
        <el-form ref="loginForm" :model="loginForm"  label-position="left" class="demo-ruleForm" label-width="100px" style="width: 90%;margin: auto">
          <div>
            <span style="font-size: large; color: black; line-height: 80px;text-align: right; width: 150px">请输入工号：</span>
            <el-input v-model="loginForm.username" style="width:250px; margin-top: 20px; border: 2px solid black; border-radius:6px;font-size: 20px" />
          </div>
          <div>
            <span style="font-size: large; color: black; line-height: 80px;text-align: right; width: 150px ">请输入密码：</span>
            <el-input v-model="loginForm.password" style="width:250px; margin-top: 20px; border: 2px solid black; border-radius:6px;font-size: 20px" />
          </div>
          <div style="margin-top: 30px">
            <el-button class="el-icon-check" type="success"  @click="login()">登录</el-button>
            <el-button class="el-icon-close" type="danger"  style="margin-left: 60px" @click="operator2LoginVisible = false">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    EngineValue: {
      type: Object,
      default: function() {
        return {
          OpName: null,
          EngineID: null, // 产品编号
          EngineType: null, // 产品型号
          workCode: null, // 制造编号
          projectName: null, // 项目名称
          startPlanTime: null // 开始时间
        }
      }
    }
  },
  data() {
    return {
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      config: {},
      leftPic: '',
      rightPic: '',
      stationNumber: '',
      stationName: '',
      operator: '',
      operator2: '',
      shiftNumber: '',
      operator2LoginVisible: false,
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  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()
    this.getOperator2()
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('Login', this.loginForm).then((res) => {
            console.log(res)
            const param = []
            param[0] = ['工位号', this.$store.state.station.stationName]
            param[1] = ['操作人', res.data[0].姓名]
            param[2] = ['type', 2]
            const Data = this.CreateData('12', 'MES_工位操作人_保存', param)
            this.ExecDatabase(Data).then((response) => {
              if (response.data[0].result === '1') {
                // 显示新数据
                this.getOperator2()
                this.operator2LoginVisible = false
                this.$message({
                  type: 'success',
                  message: '登陆成功,工号: ' + this.loginForm.username
                })
              } else {
                this.$message.error('登录信息未保存')
              }
            })
          }).catch(() => {
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getStationNumber() {
      if (this.$store.state.station.stationName) {
        this.stationNumber = this.$store.state.station.stationName
      } else {
        this.stationNumber = sessionStorage.getItem('stationNumber')
      }
    },

    // 修改工号
    UpdateJobNumber() {
      if (this.operator2) {
        // 存在工号则出现关闭框
        this.$confirm('是否退出登陆?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除监控系统中该工位的数据
          const param = []
          param[0] = ['工位号', this.$store.state.station.stationName]
          param[1] = ['操作人', '']
          param[2] = ['type', 2]
          const Data = this.CreateData('12', 'MES_工位操作人_保存', param)
          this.ExecDatabase(Data).then((response) => {
            if (response.data[0].result === '1') {
              this.getOperator2()
              this.$message({
                type: 'success',
                message: '退出成功!'
              })
            } else {
              this.$message.error('退出登陆失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消退出'
          })
        })
      } else {
        // 不存在工号则出现登陆框
        this.operator2LoginVisible = true
      }
    },
    // 获取当前工位的操作者2
    getOperator2() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', 'MES_工位操作人_查询', param)
      this.ExecDatabase(Data).then((response) => {
        if (response.data.length) {
          this.operator2 = response.data[0].操作人2
        }
      })
    },
    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: 23%;
}

.eleBlock-SmallWidth {
  width: 18%;
}

.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;
}

.el-select {
  width: 100%;
  height: 100%;
  font-size: 40px;
}

/deep/ .el-input--small {
  font-size: 17px;
  line-height: 30px;
}

/deep/ .el-input__inner {
  border: 0px;
  text-align: center;
}
</style>
<style>
.v-modal{
  display: none;
}
</style>
