<template>
  <div style="width: 100%; height: 100%;">
    <el-table
        :header-cell-style="{background:'#f9fbfe',padding: '3px 0', color: '#0b4db0'}"
        :data="batchTable"
        style="width: 100%; height: 100%;border-radius: 5px;"
        height="300px"
        tooltip-effect="dark"
    >
      <el-table-column align="center" label="#" width="70px">
        <template #default="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="物料号" width="120px">
        <template #default="scope">
          {{ scope.row.物料号 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="物料名称" min-width="120px">
        <template #default="scope">
          {{ scope.row.零件名称 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="批次号" min-width="120px">
        <template #default="scope">
          {{ scope.row.批次号 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="上次更换" width="150px">
        <template #default="scope">
          {{ scope.row.更换时间 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100px">
        <template #default="scope">
         <el-button type="primary" size="mini" icon="el-icon-bangzhu" @click="changeBatchShow(scope.row)" >更换</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :append-to-body="true" :visible.sync="dialogFormVisible_batch" center style="text-align: center" title="物料批次更换" width="450px" @before-close="changeBatchClose">
      <el-form ref="form1" :model="form" :rules="rules" label-width="80px" style="width: 100%;">
        <el-form-item label="物料号" prop="materialCode">
          <el-input v-model="form.materialCode" style="width:300px;" readonly />
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="form.materialName" style="width:300px;" readonly />
        </el-form-item>
        <el-form-item label="原批次号" prop="batchCode">
          <el-input v-model="form.batchCode" style="width:300px;" readonly />
        </el-form-item>
        <div style="border: 1px solid #13227a; width: 100%;margin-bottom: 22px" />
        <el-form-item label="新批次号" prop="batchCodeNew">
          <el-input v-model="form.batchCodeNew" style="width:300px;" placeholder="请扫描物料批次码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="el-icon-check" @click="changeBatchSure('form1')">确认更换</el-button>
        <el-button class="el-icon-close" @click="changeBatchClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setOpBarcodeStatus } from '@/utils/EventBus'

export default {
  name: 'BatchManager',
  data() {
    return {
      batchTable: [],
      dialogFormVisible_batch: false,
      form: {
        materialCode: '',
        batchCode: '',
        materialName: '',
        batchCodeNew: ''
      },
      rules: {
        batchCodeNew: [{ required: true, message: '请扫描新批次码！', trigger: 'change' }, { validator: this.validatorRegion, trigger: 'change' }]
      }
    }
  },
  watch: {
  },
  created() {
    this.getTable()
  },
  mounted() {

  },
  destroyed() {
  },
  methods: {
    validatorRegion(rule, value, callback) {
      if (this.form.batchCode === value) {
        callback(new Error('重复的批次码！'))
      } else {
        callback()
      }
    },
    changeBatchShow(row) {
      setOpBarcodeStatus(this, {
        stationNumber: this.$store.state.station.stationNumber,
        status: 2
      })
      this.form.materialCode = row['物料号']
      this.form.materialName = row['零件名称']
      this.form.batchCode = row['批次号']
      this.form.batchCodeNew = ''
      this.dialogFormVisible_batch = true
    },
    changeBatchSure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['工位号', this.$store.state.station.stationNumber]
          param[1] = ['批次号', this.form.batchCodeNew]
          param[2] = ['物料号', this.form.materialCode]
          param[3] = ['操作人员', this.$store.state.user.account]
          var Data = this.CreateData('12', '电子看板_装配零件_批次信息_修改', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('修改成功')
              this.getTable()
              this.dialogFormVisible_batch = false
            } else {
              this.$message.error('修改失败')
            }
          })
        } else {
          return false
        }
      })
    },
    changeBatchClose() {
      setOpBarcodeStatus(this, {
        stationNumber: this.$store.state.station.stationNumber,
        status: 1
      })
      this.dialogFormVisible_batch = false
    },
    getTable() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      const Data = this.CreateData('11', '电子看板_装配零件_批次信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.batchTable = response.data
      })
    }
  }
}
</script>

<style scoped>
::v-deep.el-table--mini .el-table__cell {
  padding: 0;
}
::v-deep.el-table .cell {
  padding: 0;
}
</style>
