<template>
  <div style="width: 99.3%; height: 99.5%; background-color: white;position: relative;border: 2px solid #9e9b9b; margin-left: 2px">
    <el-row style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-col :span="12" style="height: 100%;">
        <el-row style="height: 50%;margin-left: 4px">
          <el-table
            :header-cell-style="{background:'#F5F5F5'}"
            :data="processList_table"
            style="margin-top: 10px; width: 100%; height: 100%; border: 1px solid #9e9b9b; font-weight: lighter;color: #000;"
            stripe
            height="99%"
            tooltip-effect="dark"
          >
            <el-table-column align="center" label="序号" width="70px" >
              <template #default="scope">
                <div style="white-space: pre-line !important;">{{ scope.row.序号 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="工序内容" min-width="60px">
              <template #default="scope">
                <div style="white-space: pre-line !important;">{{ scope.row.操作内容 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="作业" min-width="120px">
              <template #default="scope">
                <div style="white-space: pre-line !important;">{{ scope.row.作业 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="要领" min-width="120px">
              <template #default="scope">
                <div style="white-space: pre-line !important;">{{ scope.row.要领 }}</div>
              </template>
            </el-table-column>
          <!--          <el-table-column align="center" width="145px"  label="工步属性">-->
          <!--            <template v-slot="scope">-->
          <!--              {{ scope.row.工步属性名称 }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          </el-table>
        </el-row>
        <el-row style="margin-top: 5px;margin-left: 4px; height: 48%">
          <el-table
            :data="materialList_table"
            :header-cell-style="{background:'#F5F5F5'}"
            style="margin-top: 10px; width: 100%; height: 95%; border: 1px solid #9e9b9b"
            stripe
            height="99%"
            :cell-class-name="cellClassName"
            tooltip-effect="dark"
          >
            <el-table-column align="center" label=" " type="index" show-overflow-tooltip width="30px" />
            <el-table-column align="center" label="零件图号" width="150px">
              <template #default="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件名称">
              <template #default="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="用量" width="80px">
              <template #default="scope">
                {{ scope.row.零件数量 }}
              </template>
            </el-table-column>
            <!--            <el-table-column align="center" label="批次号" width="120">-->
            <!--              <template #default="scope">-->
            <!--                {{ scope.row.零件批号 }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column align="center" label="物料条码" min-width="130px">
              <template #default="scope">
                {{ scope.row.物料条码 }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
      <el-col :span="12" style="padding: 10px; height: 100%">
        <div id="ww" style="width: 100%; height: 100%; position: relative">
          <img :src="pic" style="height: 640px; width: 770px">
          <div v-for="(item, index) in tighteningPosition" :key="index" :class="changBP(item)" :style="{left:item.测量位置X + 'px', top: item.测量位置Y + 'px', height: item.控件高度 + 'px', width: item.控件宽度 + 'px'}" />
          <mes-web-fun04 v-if="MesWebCode === 4" />
          <mes-web-fun08 v-if="MesWebCode === 8" />
          <mes-web-fun08 v-if="MesWebCode === 28" />
          <mes-web-fun08 v-if="MesWebCode === 29" />
          <mes-web-fun22 v-if="MesWebCode === 3" />
          <el-button type="warning" @click="getImgCheckDirectFileList" style="height: 80px;width: 200px;font-size: 26px;position: absolute;right: 20px;bottom: 0px" >QC指导文件</el-button>
        </div>
      </el-col>
    </el-row>
    <div id="smile" style="width: 100px; height: 100px; top: 180px; left: 1080px;position: absolute">
      <img v-if="smile === 1" style="width: 220px; height: 220px" src="../../assets/image/greenFace.png">
      <img v-else-if="smile === 2" style="width: 220px; height: 220px" src="../../assets/image/redFace.png">
      <img v-else-if="smile === 3" style="width: 196px; height: 220px" src="../../assets/image/MatchSuccess.png">
      <img v-else-if="smile === 4" style="width: 196px; height: 220px" src="../../assets/image/MatchFail.png">
      <img v-else src="../../assets/image/nothing.png">
    </div>
    <el-dialog title="指导文件列表" :visible.sync="imgCheckDialogFormVisible" :append-to-body="true" center width="850px" style="text-align: center">
      <div style="text-align: center">
        <el-form
            label-position="left"
            label-width="130px"
            style="width: 100%;margin: auto"
        >
          <el-table
              :data="imgCheckDirectFileList"
              size="small"
              max-height="365px"
              style="width: 100%; height: 280px; font-size: 20px; color: #000; border: 1px solid #9e9b9b"
          >
            <el-table-column
                label="排序"
                type="index"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column prop="文件名称" label="文件名称" align="center" />
            <el-table-column prop="操作时间" label="导入时间" align="center" />
            <el-table-column label="查看文件" align="center" width="150">
              <template slot-scope="scope2">
                <el-button type="warning" @click="imgCheckDirectFile(scope2.row)" >打开指导文件</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-close" @click="imgCheckDialogFormVisible = false">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import MesWebFun04 from './LowerRight/MesWebFun04.vue'
import MesWebFun08 from './LowerRight/MesWebFun08.vue'
import MesWebFun22 from './LowerRight/MesWebFun22.vue'

export default {
  components: {
    MesWebFun04,
    MesWebFun08,
    MesWebFun22
  },
  data() {
    return {
      MesWebCode: Number(this.$store.state.station.MesWebCode),
      file_is_show: true,
      subscription: {
        topic: '',
        qos: 0
      },
      imgCheckDialogFormVisible: false,
      imgCheckDirectFileList:[],
      // processList_table:[{序号:0,操作内容:'安装右制动器\n',作业:'拆开制动器拉锁捆扎带，将制动器放在桥壳右端，将拉锁松开缠绕在托盘上，目视检查螺孔涂胶量，先对称预紧2个定位螺栓（螺栓要打到底），再对称垂直旋入其余非定位6个螺栓（至少旋入2-3牙），用记号笔在制动器定位螺栓（对称二处）、自调卡口位置做检查确认标识，桥壳骨架油封内孔要刷油润滑\n',要领:'1、预紧螺栓时，制动器与桥壳孔口要对正，避免歪斜导致丝牙损坏\n' +
      //       '2、定位螺栓和非定位螺栓要区分开，避免错装\n' +
      //       '3、禁止对自调齿轮进行调整'}]
    }
  },
  created() {
    // console.log('this.$store.state.station.MesWebCode', this.$store.state.station.MesWebCode)
  },
  computed: {
    // ...mapState({
    //   processList_table: state => this.$store.state.operationGuide.processList_table
    // })
    ...mapGetters([
      'processList_table',
      'materialList_table',
      'pic',
      'tighteningPosition',
      'smile'
    ])
  },
  methods: {
    changBP(item) {
      if (item.nowStateCode === 1) {
        return 'green'
      } else if (item.nowStateCode === 2) {
        return 'blue'
      } else if (item.nowStateCode === 0) {
        return 'red'
      } else if (item.nowStateCode === 10) {
        return 'redRectangle'
      } else if (item.nowStateCode === 11) {
        return 'greenRectangle'
      } else if (item.nowStateCode === 12) {
        return 'blueRectangle'
      } else if (item.nowStateCode === 4) {
        return 'StartWorkCircle'
      } else if (item.nowStateCode === 14) {
        return 'blinkRectangle'
      }
    },
    cellClassName({ row, column }) {
      //
      if (row.是否完成扫描物料条码 === '0' && column.label === '物料条码') {
        return 'materialList-row'
      } else {
        return ''
      }
    },
    // 查询指导文件列表
    getImgCheckDirectFileList(row) {
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      var Data = this.CreateData('11', '基础数据_操作指南指导文件_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data.length > 0) {
          this.imgCheckDirectFileList = response.data
          this.imgCheckDialogFormVisible = true
        } else {
          this.$message.error('该工位无操作指南指导文件，请添加后查看')
        }
      })
    },
    // 预览指导文件按钮
    imgCheckDirectFile(row) {
      var param = []
      param[0] = ['ID', row.ID]
      var Data = this.CreateData('11', '基础数据_操作指南指导文件_查看文件', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data.length > 0) {
          this.pdfSrc = this.solvePdfUr1(response.data[0].指导文件)
          window.open(this.pdfSrc, '_blank')
          // this.imgCheckDialogFormVisible = true // 查看点检文件
          console.log(this.pdfSrc)
        } else {
          this.$message.error('该工位此点检项目无指导文件，请设置后查看')
        }
      })
    },
    // 处理pdf 二进制流
    solvePdfUr1(content, type, fileName) {
      const bstr = atob(content)
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) { u8arr[n] = bstr.charCodeAt(n) }
      // 确定解析格式，可能可以变成img，没有深入研究
      const blob = new Blob([u8arr], { type: 'application/pdf;chartset=UTF-8' })
      return window.URL.createObjectURL(blob)
    },
  }
}
</script>

<style scoped>
::v-deep.el-table .materialList-row{
  background: rgba(255, 255, 0, 0.5) !important;
}
.blue{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/bule.png");
  background-size: 100% 100%;
}
.blueRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/bluerectangle.png");
  background-size: 100% 100%;
}
.red{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/red.png");
  background-size: 100% 100%;
}
.redRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/redrectangle.png");
  background-size: 100% 100%;
}
.green{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/green.png");
  background-size: 100% 100%;
}
.greenRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/greenrectangle.png");
  background-size: 100% 100%;
}
.StartWorkCircle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-size: 100% 100%;
  background-image: url("../../assets/image/StartWorkCircle.gif");
}
.blinkRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/blinkrectangle.gif");
  background-size: 100% 100%;
  background-color: #81e2ff;
}
::v-deep.el-table .el-table__row .cell{
  line-height: 26px;
  font-size: 26px !important;
}

::v-deep.el-table th.el-table__cell>.cell{
  font-size: 22px;
  color: #2f2f2f;
}
</style>
