<template>
  <div style="height: 100%; width: 100%;border: 1px solid #9e9b9b">
    <el-col :span="20" class="infoPanel">
      <div class="infoColumn infoColumn-main">
        <div class="eleBlock">
          <span class="textcss">工位名称：</span>
          <span class="block"> {{ stationName }}</span>
        </div>
        <div class="eleBlock">
          <span class="textcss">产品型号：</span>
          <div class="block textValue" :title="EngineValue.EngineType">
            {{ EngineValue.EngineType }}
          </div>
        </div>
      </div>
      <div class="infoColumn infoColumn-wide">
        <div class="eleBlock">
          <span class="textcss">产品编号：</span>
          <div class="block">
            {{ EngineValue.EngineID }}
          </div>
        </div>
        <div class="eleBlock">
          <span class="textcss">项目名称：</span>
          <div class="block textValue" :title="EngineValue.projectName">
            {{ EngineValue.projectName }}
          </div>
        </div>
      </div>
      <div class="infoColumn infoColumn-small">
        <div class="eleBlock">
          <span class="textcss">工位编号：</span>
          <span class="block"> {{ stationNumber }}</span>
        </div>
        <div class="eleBlock">
          <span class="textcss operatorText">操作者：</span>
          <span class="block"> {{ operator }}</span>
        </div>
      </div>
      <div class="infoColumn infoColumn-small">
        <div class="eleBlock">
          <span class="textcss">托盘编号：</span>
          <div class="block">
            {{ EngineValue.PartPalletCode }}{{ EngineValue.EngineTypeString }}
          </div>
        </div>
        <div class="eleBlock">
          <span class="textcss">进站时间：</span>
          <div class="block">
            {{ EngineValue.startPlanTime ? EngineValue.startPlanTime.substr(11, 8) : '' }}
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="4" class="logoPanel">
      <img :src="leftPic" class="logoImg" @click="handleFullScreen">
    </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 {
          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, // 产品型号字符串北汽专用
          workCode: null, // 制造编号
          projectName: null, // 项目名称
          splitCode: null, // 间隔号
          unidCode: null, // 单元号
          engineType2: null, // 本体类型
          engineTypeModel: null, // 附件类型
          startPlanTime: null // 开始时间
        }
      }
    }
  },
  data() {
    return {
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      EngineIDList: [],
      config: {},
      leftPic: '',
      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), ''))
    })
    this.getStationName()
    console.log(this.publication)
    // this.getOperator2()
    // setTimeout(() => {
    //   this.getEngineIDList()
    // }, 1000)
    // setInterval(() => {
    //   this.getEngineIDList()
    // }, 5000)
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('Login', this.loginForm).then(() => {
            const param = []
            param[0] = ['工位号', this.$store.state.station.stationName]
            param[1] = ['工号2', this.loginForm.username]
            const Data = this.CreateData('12', '北汽福田工位状态监控MOBY_增加操作者2', 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')
      }
    },
    // 判断是否要显示工位列表  只给思源分线开放
    checkIsShowOrderList() {
      if (this.stationNumber === 'A20' || this.stationNumber === 'A30') {
        return false
      } else {
        return true
      }
    },

    // 修改工号
    UpdateJobNumber() {
      if (this.operator2) {
        // 存在工号则出现关闭框
        this.$confirm('是否退出登陆?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除监控系统中该工位的数据
          const param = []
          param[0] = ['工位号', this.$store.state.station.stationName]
          const Data = this.CreateData('12', '北汽福田工位状态监控MOBY_删除操作者2', 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
      }
    },
    // 获取今日订单数量
    getEngineIDList() {
      this.EngineIDList = []
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', '生产计划_派工订单_提前上料_选择订单_查询', param)
      this.ExecDatabase(Data).then((response) => {
        if (response.data.length) {
          for (let i = 0; i < response.data.length; i++) {
            this.EngineIDList.push({
              label: response.data[i].工件编号,
              value: response.data[i].工件编号
            })
          }
        }
      })
    },
    // 获取当前工位的操作者2
    getOperator2() {
      this.EngineIDList = []
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', '北汽福田工位状态监控MOBY_查询操作者2', 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 {
  display: flex;
  align-items: center;
  font-size: 16px;
  min-width: 0;
}

.infoPanel {
  height: 100%;
  background-color: #d7dee6;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  box-sizing: border-box;
}

.infoColumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.infoColumn-main {
  flex: 1.45;
}

.infoColumn-small {
  flex: 1.05;
}

.infoColumn-wide {
  flex: 1.55;
}

.logoPanel {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  box-sizing: border-box;
}

.logoImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

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

.block {
  font-size: 20px;
  border-radius: 3px;
  display: block;
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid #bfbfbf;
  text-align: center;
  background-color: white;
  padding: 2px;
  line-height: 30px;
  font-weight: bolder;
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.textcss {
  flex: 0 0 auto;
  color: black;
  font-size: 22px;
  line-height: 34px;
}

.operatorText {
  letter-spacing: 5px;
}

.textValue {
  padding-left: 8px;
  padding-right: 8px;
}

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