<template>
  <div>
    <div style="text-align: center;margin: 20px 0 20px 0">
      <span style="font-size: 26px">工位周点检记录表</span>
    </div>
    <div style="background-color: white">
      <el-table v-loading="loading" :data="tableData" tooltip-effect="dark" style="font-size: 20px" height="380" border
                size="small" :cell-class-name="cellClassName">
        <el-table-column :resizable="false" label="项次" type="index" width="70" align="center"/>
        <el-table-column :resizable="false" label="点检项目" width="250" align="center">
          <template slot-scope="scope">
            {{ scope.row.保养项目 }}
          </template>
        </el-table-column>
        <el-table-column :resizable="false" label="点检指导文件" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="warning" @click="getImgCheckDirectFileList(scope.row)">查看指导文件</el-button>
          </template>
        </el-table-column>
        <el-table-column :resizable="false" label="点检结果" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.点检任务编号 === 0">
              {{ scope.row.操作时间 }}
              {{ scope.row.点检结果 == 1 ? '良好 √' : scope.row.点检结果 == 2 ? '维修 R' : '异常 X' }}
            </div>
            <el-radio v-if="scope.row.点检任务编号 !== 0" v-model="scope.row.保养结果" label="1" size="medium" border
                      @click.native.prevent="chooseEdit(scope.$index,scope.row,1)">良好 √
            </el-radio>
            <!--<el-radio v-if="scope.row.点检任务编号 !== 0" v-model="scope.row.保养结果" label="2" size="medium" border-->
            <!--          @click.native.prevent="chooseEdit(scope.$index,scope.row,2)">维修 R-->
            <!--</el-radio>-->
            <el-radio v-if="scope.row.点检任务编号 !== 0" v-model="scope.row.保养结果" label="3" size="medium" border
                      @click.native.prevent="chooseEdit(scope.$index,scope.row,3)">异常 X
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="confirm">
      <div style="border: 1px solid #a6a6a6;height: 80px;">
        <div
            style="width: 69px;height: 80px;float: left;text-align: center;line-height: 80px;font-size: 20px;color: #606266">
          {{ tableIndex }}
        </div>
        <div
            style="width: 398px;height: 80px;float: left;text-align: center;line-height: 80px;font-size: 20px;color: #606266;border-left: 1px solid #a6a6a6;border-right: 1px solid #a6a6a6">
          点检人确认
        </div>
        <div
            style="width: 350px;height: 80px;float: left;text-align: center;line-height: 80px;font-size: 20px;color: #606266">
          <el-button size="large" type="warning" icon="el-icon-check" style="font-size: 20px;" @click="confirmEdit()">
            确认完成
          </el-button>
        </div>
      </div>
    </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>

export default {
  data() {
    return {
      nameID: '',
      loading: false,
      MaintenanceTaskGroup: [],
      MaintenanceResultGroup: [],
      opName: '',
      tableData: [],
      confirm: false,
      tableIndex: 0,
      pdfSrc: '',
      imgCheckDialogFormVisible: false,
      imgCheckDirectFileList: []
    }
  },
  created() {
  },
  methods: {
    fetchData(num, num2) {
      this.nameID = num2
      this.opName = num
      this.searchData()
    },
    // 查询需要点检的项目
    searchData() {
      this.tableData = []
      var param = []
      param[0] = ['工位号', this.opName]
      var Data = this.CreateData('11', 'MES_机加工MES_工位点检任务每周_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.tableIndex = 0
          for (var i = 0; i < response.data.length; i++) {
            this.tableData.push({
              点检任务编号: response.data[i].点检任务编号,
              保养项目: response.data[i].保养项目,
              保养结果: '0',
              操作时间: response.data[i].操作时间,
              点检类型: response.data[i].点检类型,
              点检结果: response.data[i].点检结果
            })
            if (response.data[i].点检任务编号 !== 0) {
              this.tableIndex += 1
            }
          }
          if (this.tableIndex !== 0) {
            this.tableIndex += 1
            this.confirm = true
          } else {
            this.confirm = false
          }
        } else {
          this.tableIndex = 0
          this.confirm = false
        }
      })
    },
    // 选择保养结果
    chooseEdit(index, row, res) {
      this.tableData[index].保养结果 === res.toString() ? this.tableData[index].保养结果 = '0' : this.tableData[index].保养结果 = res.toString()
    },
    // 确认保养
    confirmEdit() {
      this.MaintenanceTaskGroup = []
      this.MaintenanceResultGroup = []
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].保养结果 !== '0') {
          this.MaintenanceTaskGroup.push(this.tableData[i].点检任务编号)
          this.MaintenanceResultGroup.push(this.tableData[i].保养结果)
        }
        if (this.tableData[i].保养结果 == 3) {
          this.$message.error("点检项" + this.tableData[i].保养项目 + '异常，已上传至系统等待处理完成后再继续进行工作！')
          let param = []
          param[0] = ['工位号', this.opName]
          param[1] = ['点检周期', '周点检']
          param[2] = ['点检类型', this.tableData[i].点检类型]
          param[3] = ['点检项目', this.tableData[i].保养项目]
          param[4] = ['点检结果', this.tableData[i].保养结果]
          param[5] = ['点检任务编号组', this.tableData[i].点检任务编号]
          param[6] = ['点检操作人', this.nameID]
          param[7] = ['处理状态', 0]
          param[8] = ['处理结果', '']
          var Data = this.CreateData('12', 'MES_不合格点检记录_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.error("点检项" + this.tableData[i].保养项目 + '异常，已上传至系统等待处理完成后再继续进行工作！')
            } else {
              this.$message.error('异常处理失败！')
            }
          })

        }
      }
      if (this.MaintenanceTaskGroup.length === 0) {
        this.$message.error('请确认需要保养的项目')
        return
      }
      var param = []
      param[0] = ['工位号', this.opName]
      param[1] = ['点检人ID', this.nameID]
      param[2] = ['点检任务编号组', this.MaintenanceTaskGroup]
      param[3] = ['保养标准ID组', this.MaintenanceResultGroup]
      var Data = this.CreateData('12', 'MES_机加工MES_新增工位点检任务每周记录_循环执行_编辑', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('点检成功！')
          this.searchData()
        } else {
          this.$message.error('点检失败！')
        }
      })
    },
    // // 确认保养
    // confirmEdit() {
    //   this.MaintenanceTaskGroup = []
    //   this.MaintenanceResultGroup = []
    //   for (var i = 0; i < this.tableData.length; i++) {
    //     if (this.tableData[i].保养结果 !== '0') {
    //       this.MaintenanceTaskGroup.push(this.tableData[i].点检任务编号)
    //       this.MaintenanceResultGroup.push(this.tableData[i].保养结果)
    //     }
    //   }
    //   if (this.MaintenanceTaskGroup.length === 0) {
    //     this.$message.error('请确认需要保养的项目')
    //     return
    //   }
    //   var param = []
    //   param[0] = ['工位号', this.opName]
    //   param[1] = ['点检人ID', this.nameID]
    //   param[2] = ['点检任务编号组', this.MaintenanceTaskGroup]
    //   param[3] = ['保养标准ID组', this.MaintenanceResultGroup]
    //   var Data = this.CreateData('12', 'MES_机加工MES_新增工位点检任务每日记录_循环执行_编辑', param)
    //   this.ExecDatabase(Data).then(response => {
    //     if (response.data[0].result === '1') {
    //       this.$message.success('保养成功！')
    //       this.searchData()
    //     } else {
    //       this.$message.error('保养失败！')
    //     }
    //   })
    // },
    // 查询指导文件列表
    getImgCheckDirectFileList(row) {
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['点检内容ID', row.点检任务编号]
      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)
    },
    cellClassName({row, column}) {
      // console.log(row)
      if (row.点检类型 === 'PM点检') return 'PMCheck'
    }
  }
}
</script>

<style scoped>
::v-deep .el-radio--medium.is-bordered {
  padding: 10px 15px 0 10px;
}

::v-deep.el-table .el-table__body .PMCheck {
  background-color: #ffd69c !important;
  color: #000000 !important;
}
</style>
