<template>
  <div class="app-container">
    <div style="margin-top: 2px;margin-bottom: 2px">
      <el-input v-model="pickingListNumber" placeholder="名称或图号或型号或规格" clearable size="small" style="width:200px" />
      <el-button size="small" type="primary" icon="el-icon-search" style="margin: 0 0 0 10px" plain @click="searchList()">查询</el-button>
      <el-button size="small" style="margin-left: 100px" type="distribution" @click="inputPassword()">领料确认</el-button>
    </div>
    <el-table v-loading="loading1" :data="pickListTable2" :row-class-name="tableRowClassName1" highlight-current-row border style="width: 1015px" size="mini" height="600" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="50"/>
      <el-table-column label="机床图号" prop="机床图号" align="center" width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.机床图号 }}
        </template>
      </el-table-column>
      <el-table-column label="组号" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.row.组号 }}
        </template>
      </el-table-column>
      <el-table-column label="名称" show-overflow-tooltip prop="名称" align="center" width="110">
        <template slot-scope="scope">
          {{ scope.row.名称 }}
        </template>
      </el-table-column>
      <el-table-column label="图号或型号" prop="图号或型号" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.图号或型号 || '—' }}
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="规格" align="center" width="110" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.规格 || '—' }}
        </template>
      </el-table-column>
      <el-table-column label="领用" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.row.领用数量 }}
        </template>
      </el-table-column>
      <el-table-column label="出库" align="center" width="130">
        <template slot-scope="scope">
          <el-input-number :disabled="Number(scope.row.领用数量) <= Number(scope.row.出库数量1) || Number(scope.row.货位存量1) === 0" :max="Number(scope.row.货位存量1)" :min="1" v-model="scope.row.出库数量" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center" width="70">
        <template slot-scope="scope">
          {{ scope.row.货位存量1 }}
        </template>
      </el-table-column>
      <el-table-column label="已领" align="center" width="70">
        <template slot-scope="scope">
          {{ scope.row.出库数量1 }}
        </template>
      </el-table-column>
      <el-table-column label="领料单编号" show-overflow-tooltip prop="名称" align="center" width="130">
        <template slot-scope="scope">
          {{ scope.row.领料单编号 }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 10px;">
      <el-pagination
        :current-page="pageCurrent1"
        :page-sizes="[50, 100, 150, 200]"
        :page-size="pageSize1"
        :total="total1"
        style="display:inline-block;width:50%"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"/>
    </div>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible3" title="领料确认" center width="380px">
      <el-form ref="form3" :model="form3" :rules="rules3" label-position="right">
        <el-form-item label="出库类别" prop="outTypeValue" label-width="100px" size="small">
          <el-select v-model="form3.outTypeValue" size="small" placeholder="出库类别" style="width: 200px;margin-right:10px">
            <el-option
              v-for="item in outType"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="领料部门" label-width="100px" size="small">
          <el-select v-model="form3.department" placeholder="请选择部门" size="small" clearable style="width: 200px;" @change="selectLeaders">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="领料人" prop="领料人" label-width="100px" size="small">
          <el-select v-model="form3.DirectNote" placeholder="请选择领料人" size="small" clearable style="width: 200px;" filterable>
            <el-option
              v-for="item in DirectNotes"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="人员编号" prop="password" label-width="100px" size="small">-->
        <!--<el-input v-model="form3.password" size="small" placeholder="人员编号" style="width: 200px"/>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3=false">取消</el-button>
        <el-button :disabled="buttonDisable" type="primary" @click="pickConfirm1()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { initPickPerson, initMachineProject, initOutType, searchList222, selectdepartment, submitOutStore, selectleaders } from '@/api/Inventory/MaterialOut'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      pickingListNumber: '',
      pickListTable2: [],
      departments: [],
      DirectNotes: [],
      outType: [],
      total1: 0,
      pickList: [],
      pageCurrent1: 1,
      pageSize1: 50,
      loading1: false,
      dialogFormVisible3: false,
      buttonDisable: false,
      form3: {
        outTypeValue: '',
        department: '',
        // password: '',
        DirectNote: ''
      },
      rules3: {
        // password: [{ required: true, message: '请输入' }],
        outTypeValue: [{ required: true, message: '请选择' }]
      },
      multipleSelection1: [],
      StockNumberTable: []
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    fetchData() {
      this.person = []
      initPickPerson().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.person.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
      this.machine = []
      initMachineProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machine.push({
            label: response.data[i].机床图号,
            name: response.data[i].项目名称,
            value: response.data[i].机床流水号
          })
        }
      })
      initOutType().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.outType.push({
            label: response.data[i].出库类别名称,
            value: response.data[i].出库类别流水号
          })
        }
      })
    },
    selectLeaders() {
      this.DirectNotes = []
      selectleaders(this.form3.department).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.DirectNotes.push({
            label: response.data[i].姓名,
            value: response.data[i].考勤编号
          })
        }
      })
    },
    searchList() {
      this.loading1 = true
      var check
      this.pickingListNumber ? check = 1 : check = 0
      searchList222(check, this.pickingListNumber, this.pageCurrent1, this.pageSize1).then(response => {
        this.loading1 = false
        this.total1 = response.data.total
        this.pickListTable2 = response.data.rows
      })
    },
    tableRowClassName1({ row }) {
      if (parseInt(row.出库数量1) === 0) {
        return 'weilingliao-row'
      } else if (parseInt(row.领用数量) > parseInt(row.出库数量1) && parseInt(row.出库数量1)) {
        return 'weilingwan-row'
      } else {
        return ''
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.StockNumberTable = val
      this.multipleSelection = []
      this.basePartNum = []
      this.materialNum = []
      this.parchasePartNum = []
      this.purchaseBillNum = []
      this.groupNumValue = []
      this.machineValue = []
      this.offlineNum = []
      this.outNumber = []
      this.pickList = []
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].领料单明细流水号)
        this.basePartNum.push(val[i].基本件流水号)
        this.materialNum.push(val[i].物料流水号)
        this.parchasePartNum.push(val[i].标准件和外购件流水号)
        this.purchaseBillNum.push(val[i].请购单明细流水号)
        this.groupNumValue.push(val[i].组件流水号)
        this.machineValue.push(val[i].机床流水号)
        this.offlineNum.push(val[i].离线采购件流水号)
        this.outNumber.push(val[i].出库数量)
        this.pickList.push(val[i].领料单流水号)
      }
    },
    // 领料确认
    inputPassword() {
      this.form3.outTypeValue = 21
      // this.form3.password = ''
      this.selectDepartment()
      this.departments = []
      this.buttonDisable = false
      this.dialogFormVisible3 = true
    },
    selectDepartment() {
      this.departments = []
      selectdepartment().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.departments.push({
            label: response.data[i].部门名称,
            value: response.data[i].考核部门编号
          })
        }
      })
    },
    // 提交领料确认
    pickConfirm1() {
      this.buttonDisable = true
      this.multipleSelection = []
      this.basePartNum = []
      this.materialNum = []
      this.parchasePartNum = []
      this.purchaseBillNum = []
      this.groupNumValue = []
      this.machineValue = []
      this.offlineNum = []
      this.outNumber = []
      this.pickList = []
      for (let i = 0; i < this.StockNumberTable.length; i++) {
        console.log(this.pickListTable2[i].出库数量, 1233)
        if (this.StockNumberTable[i].出库数量 !== 0) {
          this.multipleSelection.push(this.StockNumberTable[i].领料单明细流水号)
          this.basePartNum.push(this.StockNumberTable[i].基本件流水号)
          this.materialNum.push(this.StockNumberTable[i].物料流水号)
          this.parchasePartNum.push(this.StockNumberTable[i].标准件和外购件流水号)
          this.purchaseBillNum.push(this.StockNumberTable[i].请购单明细流水号)
          this.groupNumValue.push(this.StockNumberTable[i].组件流水号)
          this.machineValue.push(this.StockNumberTable[i].机床流水号)
          this.offlineNum.push(this.StockNumberTable[i].离线采购件流水号)
          this.outNumber.push(this.StockNumberTable[i].出库数量)
          this.pickList.push(this.StockNumberTable[i].领料单流水号)
        }
      }
      if (this.form3.DirectNote) {
        for (let i = 0; i < this.departments.length; i++) {
          if (this.form3.department === this.departments[i].value) {
            this.department111 = this.departments[i].label
          }
        }
        submitOutStore(this.multipleSelection, this.basePartNum, this.materialNum, this.parchasePartNum, this.purchaseBillNum, this.groupNumValue, this.machineValue, this.outNumber, this.id, this.form3.DirectNote, this.form3.outTypeValue, this.pickList, this.offlineNum, this.department111).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('出库成功')
            this.dialogFormVisible3 = false
            this.searchList()
          } else {
            this.buttonDisable = false
            this.$message.error('操作失败')
          }
        })
      } else {
        this.buttonDisable = false
        this.$message.error('请选择领料人')
      }
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.searchList()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchList()
    }
  }
}
</script>
