<!--设备维护-->
<template>
  <div style="width: 99%; height: 100%; background-color: #d7dee6;border: 2px solid #9e9b9b; margin-left: 4px">
    <el-col :span="14" style="padding: 10px">
      <el-card style=" height: 800px;border: 1px solid #000">
        <el-tabs v-model="activeName" @tab-click="Refresh" style="font-size: 18px">
          <el-tab-pane :label="tabName[0].name+'('+tabName[0].num+')'" name="0" style="font-size: 18px"><EquipmentDayMaintenance ref="fresh0"/></el-tab-pane>
          <el-tab-pane :label="tabName[1].name+'('+tabName[1].num+')'" name="1" style="font-size: 18px"><EquipmentWeekMaintenance ref="fresh1"/></el-tab-pane>
          <el-tab-pane :label="tabName[2].name+'('+tabName[2].num+')'" name="2" style="font-size: 18px"><EquipmentMonthMaintenance ref="fresh2"/></el-tab-pane>
          <el-tab-pane :label="tabName[3].name+'('+tabName[3].num+')'" name="3" style="font-size: 18px"><EquipmentQuarterMaintenance ref="fresh3"/></el-tab-pane>
          <el-tab-pane :label="tabName[4].name+'('+tabName[4].num+')'" name="4" style="font-size: 18px"><EquipmentYearMaintenance ref="fresh4"/></el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="10" style="padding: 10px">
      <div id="ww" style="width: 100%; height: 100%; position: relative">
        <img :src="pic" style="height: 800px; width: 635px" @click="showPic"/>
      </div>
    </el-col>
  </div>
</template>
<script>
import EquipmentDayMaintenance from './EquipmentDayMaintenance.vue'
import EquipmentWeekMaintenance from './EquipmentWeekMaintenance.vue'
import EquipmentMonthMaintenance from './EquipmentMonthMaintenance.vue'
import EquipmentQuarterMaintenance from './EquipmentQuarterMaintenance.vue'
import EquipmentYearMaintenance from './EquipmentYearMaintenance.vue'
export default {
  components: {
    'EquipmentDayMaintenance': EquipmentDayMaintenance,
    'EquipmentWeekMaintenance': EquipmentWeekMaintenance,
    'EquipmentMonthMaintenance': EquipmentMonthMaintenance,
    'EquipmentQuarterMaintenance': EquipmentQuarterMaintenance,
    'EquipmentYearMaintenance': EquipmentYearMaintenance
  },
  data() {
    return {
      pic: '',
      PersonNumber: this.$store.state.user.id, // 人员ID
      opName: this.$store.state.station.stationName,
      tabName: [{ name: '日常点检', num: '0' }, { name: '周点检', num: '0' }, { name: '月点检', num: '0' }, { name: '季点检', num: '0' }, { name: '年点检', num: '0' }],
      isFirst: true,
      isSecond: false,
      isThird: false,
      isFourth: false,
      isFifth: false,
      activeName: '0',
      machineName: '',
      machineSerialNumber: ''
    }
  },
  created() {
    this.getCheckPic()
  },
  mounted() {
    this.searchTaskNum(this.opName, this.PersonNumber)
    this.pic = this.checkPic
    this.picList = [this.checkPic]
  },
  methods: {
    // 点击标签进行刷新
    Refresh() {
      switch (this.activeName) {
        case '0': {
          this.$refs.fresh0.fetchData(this.opName, this.PersonNumber)
          break
        }
        case '1': {
          this.$refs.fresh1.fetchData(this.opName, this.PersonNumber)
          break
        }
        case '2': {
          this.$refs.fresh2.fetchData(this.opName, this.PersonNumber)
          break
        }
        case '3': {
          this.$refs.fresh3.fetchData(this.opName, this.PersonNumber)
          break
        }
        case '4': {
          this.$refs.fresh4.fetchData(this.opName, this.PersonNumber)
          break
        }
      }
    },
    // 查询工位设备名称和编号
    searchMachineName() {
      this.machineSerialNumber = ''
      this.machineName = ''
      var Data = this.CreateData('3', `select * from [dbo].[基础数据_设备工位点检表] where 工位号 ='${this.opName}'`)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.machineSerialNumber = response.data[0].设备编号
          this.machineName = response.data[0].设备名称
        }
      })
    },
    // 查询任务数量
    searchTaskNum(num, num2) {
      this.$refs.fresh0.fetchData(num, num2)
      this.opName = num
      this.PersonNumber = num2
      this.tabName[0].num = 0
      this.tabName[1].num = 0
      this.tabName[2].num = 0
      this.tabName[3].num = 0
      this.tabName[4].num = 0
      var param = []
      param[0] = ['工位号', this.opName]
      var Data = this.CreateData('11', 'MES_机加工MES_工位点检任务每日_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tabName[0].num = response.data.length
      })
      var Data1 = this.CreateData('11', 'MES_机加工MES_工位点检任务每周_查询', param)
      this.ExecDatabase(Data1).then(response => {
        this.tabName[1].num = response.data.length
      })
      var Data2 = this.CreateData('11', 'MES_机加工MES_工位点检任务每月_查询', param)
      this.ExecDatabase(Data2).then(response => {
        this.tabName[2].num = response.data.length
      })
      var Data3 = this.CreateData('11', 'MES_机加工MES_工位点检任务每季_查询', param)
      this.ExecDatabase(Data3).then(response => {
        this.tabName[3].num = response.data.length
      })
      var Data4 = this.CreateData('11', 'MES_机加工MES_工位点检任务每年_查询', param)
      this.ExecDatabase(Data4).then(response => {
        this.tabName[4].num = response.data.length
      })
      this.searchMachineName()
    },
    getCheckPic() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', '设备管理_设备维护图片_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.pic = 'data:image/png;base64,' + response.data[0]['点检图片']
          this.$store.commit('set_checkPic', 'data:image/png;base64,' + response.data[0]['点检图片'])
        }
      })
    },
    showPic() {
      const container = document.createElement('div')
      container.classList.add('preview-container')
      container.onclick = function() {
        container.remove()
      }
      // 创建预览图片
      const innerImg = document.createElement('img')
      innerImg.src = this.pic
      innerImg.classList.add('pic')
      // 绑定滚动事件
      container.onwheel = function(event) {
        const width = getComputedStyle(innerImg).width.slice(0, -2)
        const height = getComputedStyle(innerImg).height.slice(0, -2)
        if (event.deltaY > 0) {
          // 向上滚动放大
          innerImg.style.width = parseInt(width) * 1.1 + 'px'
          innerImg.style.height = parseInt(height) * 1.1 + 'px'
        } else if (event.deltaY < 0) {
          // 向下滚动缩小
          innerImg.style.width = parseInt(width) * 0.9 + 'px'
          innerImg.style.height = parseInt(height) * 0.9 + 'px'
        }
      }
      // 将图片添加到预览器
      container.append(innerImg)
      // 将预览器添加到 body 中
      document.body.append(container)
    }
  }
}
</script>

<style>
.el-tabs__item.is-active {
  color: #409EFF !important;
}
.el-tabs__item {
  color: #050505 !important;
  font-size: 18px;
}
.preview111 {
  cursor: pointer;
}
.preview-container {
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.preview-container .pic {
  max-width: 90%;
  max-height: 90%;
  min-width: 5%;
  min-height: 5%;
  object-fit: contain;
}
.v-modal{
  display: none;
}
</style>
<style scoped>

</style>
