<template>
  <div style="height: 100%; width: 100%;border: 0px solid #797979;">
    <el-row style="display: flex;align-items: center;justify-content: center;background-color: #ffffff">
      <el-col :span="5" style="height: 100%;">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <img :src="leftPic" height="35px" style="padding: 5px 5px" @click="handleFullScreen">
        </div>
      </el-col>
      <el-col :span="14" style="height: 100%">
        <div style="display: flex;align-items: center;justify-content: center;font-size: 1.5rem;font-weight: bolder;letter-spacing: 5px;color: #13227a">
          {{ stationNumber }}-{{ stationName }}({{shiftNumber}})
        </div>
      </el-col>
      <el-col :span="5" style="height: 100%;text-align: center">
        <div style="display: flex;align-items: center;justify-content: flex-end;color: #13227a">
          <el-dropdown class="avatar-container" trigger="click">
            <div class="avatar-wrapper">
              <img :src="require('@/assets/image/top/user.png')" height="20px" class="avatar-icon">
              <div class="avatar-text">
                {{ operator }}【{{ operatorAccount }}】
              </div>
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item divided @click.native="loginOut">
                <span style="display:block;">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row style="color: #fff;display: flex;align-items: center;justify-content: center;background-color: #d7dee6;height: 28px;z-index: 10;">
      <el-col :span="9" class="part-info">
        <img :src="require('@/assets/image/top/EngineID.png')" height="20px" style="margin: 0 5px;">
<!--        <i class="el-icon-tickets" style="font-size: 1.5rem;margin-right: 5px;"></i>-->
        <span class="textcss">产品编号：</span>
        <span class="textcss" >{{ EngineValue.EngineID }}</span>
      </el-col>
      <el-col :span="4"  class="part-info">
        <img :src="require('@/assets/image/top/EngineType.png')" height="20px" style="margin: 0 5px;">
<!--        <i class="el-icon-cpu" style="font-size: 1.5rem;margin-right: 5px;"></i>-->
        <span class="textcss" >型号：</span>
        <span class="textcss" >{{ EngineValue.EngineType }}</span>
      </el-col>
      <el-col :span="5"  class="part-info">
        <img :src="require('@/assets/image/top/OrderForm.png')" height="20px" style="margin: 0 5px;">
<!--        <i class="el-icon-set-up" style="font-size: 1.5rem;margin-right: 5px;"></i>-->
        <span class="textcss" >工单：</span>
        <span class="textcss" >{{ EngineValue.OrderForm }}</span>
      </el-col>
      <el-col :span="3"  class="part-info">
        <img :src="require('@/assets/image/top/PartPalletCode.png')" height="20px" style="margin: 0 5px;">
<!--        <i class="el-icon-place" style="font-size: 1.5rem;margin-right: 5px;"></i>-->
        <span class="textcss" >托盘：</span>
        <span class="textcss" >{{ EngineValue.PartPalletCode }}</span>
      </el-col>
      <el-col :span="3" class="part-info" style="justify-content: center;">
        <div style="display: flex;align-items: center; background-color: #13227a; border-radius: 5px; padding: 4px; height: 24px;width: 100%;justify-content: center;">
          <div style="color: #ffffff;font-size: 0.6rem;margin-bottom: 1px;">生产计时</div>
          <div style="color: #ffffff;font-weight: bolder;font-size: 0.8rem;margin-left: 10px;">
            {{opBeatInfo.累计时间1}}
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { logAdd } from '@/utils/EventBus'
import { stationIsWorking } from '@/utils/tool'

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: '',
      rightPic: '',
      stationNumber: '',
      stationName: '',
      operator: '',
      operatorAccount: '',
      operator2: '',
      shiftNumber: '',
      operator2LoginVisible: false,
      loginForm: {
        username: '',
        password: ''
      },
      timer: null,
      // 累计时间相关数据
      opBeatInfo: {
        剩余时间1: '0:0',
        剩余时间: 0,
        标准时间1: '0:0',
        标准时间: 0,
        累计时间1: '0:0',
        累计时间: 0
      },
      cycleTimer: null,
      cycleTimerStop: false
    }
  },
  created() {
    axios.get('../leftPic.png', {
      responseType: 'arraybuffer'
    }).then(res => {
      this.leftPic = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data +
          String.fromCharCode(byte), ''))
    })
  },
  mounted() {
    console.log(this.$store.state)
    this.stationNumber = this.$store.state.station.stationNumber
    this.stationName = this.$store.state.station.stationName
    this.operator = this.$store.state.user.name
    this.operatorAccount = this.$store.state.user.account
    const scope = this
    this.getStationClasses()
    this.timer = setInterval(() => {
      scope.getStationClasses()
      // 累计时间更新
      if (!scope.cycleTimerStop) {
        if (stationIsWorking(scope.$store.state)) {
          scope.CorrectiveTiming(scope.$store.state.station.engineValue.EngineTypeID, scope.$store.state.station.engineValue.EngineID)
        }
      }
    }, 5000)
    // this.shiftNumber = this.$store.state.station.classes
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.clearCycleTimer()
  },
  methods: {
    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
    },
    loginOut() {
      logAdd(this, {
        stationNumber: this.stationNumber,
        msgType: 'INFO',
        operationType: 'LOGOUT',
        Content: `${this.operator}【${this.operatorAccount}】登出`
      })
      this.setStationLoginOut()
      this.$store.commit('set_processList_table', [])
      this.$store.commit('set_materialList_table', [])
      this.$store.commit('set_pic', '')
      this.$store.commit('set_smile', '0')
      this.$store.commit('set_tighteningPosition', [])
      this.$store.commit('set_greenBoltInformation', [])
      this.$store.commit('set_partAssemblyInformation', {})
      this.$store.commit('set_engineValue', {})
      this.$router.push('/')
    },
    setStationLoginOut() {
      const param = []
      param[0] = ['工位号', this.stationNumber]
      const Data = this.CreateData('11', '测量数据工位_监控系统_操作者工号_登出', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.shiftNumber = response.data[0]['班次描述']
        }
      })
    },
    getStationClasses() {
      const param = []
      const Data = this.CreateData('11', 'MES_操作着_生产班次_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.shiftNumber = response.data[0]['班次描述']
        }
      })
    },
    // 累计时间相关方法
    CorrectiveTiming(EngineTypeID, EngineID) {
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      param[1] = ['产品型号代码', EngineTypeID]
      param[2] = ['发动机号', EngineID]
      var Data = this.CreateData('11', '测量数据工位_监控系统_工位节拍_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.opBeatInfo.剩余时间 = response.data[0]['剩余时间']
          this.opBeatInfo.剩余时间1 = this.changeSecondToMinute(response.data[0]['剩余时间'], 0)
          this.opBeatInfo.标准时间 = response.data[0]['标准时间']
          this.opBeatInfo.标准时间1 = this.changeSecondToMinute(response.data[0]['标准时间'], 0)
          this.opBeatInfo.累计时间 = response.data[0]['累计时间']
          this.opBeatInfo.累计时间1 = this.changeSecondToMinute(response.data[0]['累计时间'], 0)
          this.judgeCycleTimer()
        }
      })
    },
    judgeCycleTimer() {
      const scope = this
      if (this.cycleTimer) clearInterval(this.cycleTimer)
      if (this.cycleTimerStop) return
      if (this.opBeatInfo.标准时间 === 0) return
      this.cycleTimer = setInterval(() => {
        if (scope.opBeatInfo.剩余时间 > 0) {
          scope.opBeatInfo.剩余时间 -= 1
          scope.opBeatInfo.累计时间 += 1
        } else {
          scope.opBeatInfo.剩余时间 = 0
          scope.opBeatInfo.累计时间 += 1
        }
        scope.opBeatInfo.剩余时间1 = scope.changeSecondToMinute(scope.opBeatInfo.剩余时间, 0)
        scope.opBeatInfo.累计时间1 = scope.changeSecondToMinute(scope.opBeatInfo.累计时间, 0)
        if (!stationIsWorking(this.$store.state)) {
          this.clearCycleTimer()
        }
      }, 1000)
    },
    clearCycleTimer() {
      if (this.cycleTimer) clearInterval(this.cycleTimer)
      this.opBeatInfo.剩余时间 = 0
      this.opBeatInfo.累计时间 = 0
      this.opBeatInfo.标准时间 = 0
      this.opBeatInfo.剩余时间1 = this.changeSecondToMinute(this.opBeatInfo.剩余时间, 0)
      this.opBeatInfo.累计时间1 = this.changeSecondToMinute(this.opBeatInfo.累计时间, 0)
      this.opBeatInfo.标准时间1 = this.changeSecondToMinute(this.opBeatInfo.标准时间, 0)
    },
    changeSecondToMinute(totalSeconds, addSecond) {
      totalSeconds = totalSeconds + addSecond
      const minutes = Math.floor(totalSeconds / 60)
      const seconds = totalSeconds % 60
      if (minutes === 0 && seconds === 0) {
        return `0`
      }
      return `${minutes}:${seconds}`
    }
  }
}
</script>

<style scoped>
.avatar-container {
  display: inline-block;
}
.avatar-container .avatar-wrapper {
  cursor: pointer;
  position: relative;
  height: 40px;
  display: flex;
  display: -webkit-flex; /* Safari 旧版兼容 */
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
}
.avatar-container .avatar-icon {
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
  margin-right: 4px;
}
.avatar-container .avatar-text {
  font-size: 0.9rem;
  color: #13227a;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
.part-info {
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  align-items: center;
  -webkit-align-items: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.part-info .textcss {
  font-size: 1rem;
  color: #13227a;
  white-space: nowrap;
}
</style>

