<template>
  <div style="background-color: white;">
    <div style="text-align: center;margin: 20px 0 20px 0">
      <span style="font-size: 26px">设备日保养记录表</span>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      height="380"
      size="small"
      style="font-size: 20px"
      tooltip-effect="dark">
      <el-table-column :resizable="false" align="center" label="项次" type="index" width="70"/>
      <el-table-column :resizable="false" align="center" label="点检项目" width="400">npm
        <template slot-scope="scope">
          {{ scope.row.保养项目 }}
        </template>
      </el-table-column>
      <el-table-column :resizable="false" align="center" label="点检结果">
        <template slot-scope="scope">
          <div v-if="scope.row.点检任务编号 === 0">点 检 完 毕 √</div>
          <el-radio
            v-if="scope.row.点检任务编号 !== 0"
            v-model="scope.row.保养结果"
            border
            label="1"
            size="mini"
            @click.native.prevent="chooseEdit(scope.$index,scope.row,1)">良好 √
          </el-radio>
          <el-radio
            v-if="scope.row.点检任务编号 !== 0"
            v-model="scope.row.保养结果"
            border
            label="2"
            size="mini"
            @click.native.prevent="chooseEdit(scope.$index,scope.row,2)">维修 R
          </el-radio>
          <el-radio
            v-if="scope.row.点检任务编号 !== 0"
            v-model="scope.row.保养结果"
            border
            label="3"
            size="mini"
            @click.native.prevent="chooseEdit(scope.$index,scope.row,3)">异常 X
          </el-radio>
        </template>
      </el-table-column>
    </el-table>
    <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 icon="el-icon-check" size="large" style="font-size: 20px;" type="warning" @click="confirmEdit()">
            确认完成
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nameID: '',
      loading: false,
      MaintenanceTaskGroup: [],
      MaintenanceResultGroup: [],
      opName: '',
      tableData: [],
      confirm: false,
      tableIndex: 0
    }
  },
  methods: {
    fetchData(num, num2) {
      this.opName = num
      this.nameID = num2
      this.searchData()
    },
    // 查询需要点检的项目
    searchData() {
      var param = []
      param[0] = ['工位号', this.opName]
      var Data = this.CreateData('11', 'MES_机加工MES_工位点检任务每日_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = []
        if (response.data.length > 0) {
          this.tableIndex = 0
          for (let i = 0; i < response.data.length; i++) {
            this.tableData.push({
              点检任务编号: response.data[i].点检任务编号,
              保养项目: response.data[i].保养项目,
              保养结果: '1'
            })
            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.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('保养失败！')
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
