<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-select v-model="machineToolValue" placeholder="机床号" filterable size="small" clearable style="width: 150px;margin: 10px 10px 0px 10px" @change="searchGroupList">
          <el-option
            v-for="item in machineTool"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="groupNumberValue" placeholder="组号" size="small" clearable style="width: 100px;margin: 10px 10px 0px 10px">
          <el-option
            v-for="item in groupNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-input v-model="partNumber" placeholder="零件号" size="small" clearable style="width: 180px;margin-left: 0px"/>
        <el-date-picker
          v-model="InventoryTime"
          style="width:250px"
          size="small"
          type="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          start-placeholder="入库开始"
          end-placeholder="入库结束"/>
        <el-button type="primary" icon="el-icon-search" size="small" plain style="margin: 15px 0 0 10px" @click="pageCurrent=1;pageSize=20;total=0;searchData()">查询</el-button>
        <el-button type="warning" size="small" style="margin: 15px 0 0 10px" plain @click="wareHousing">出库</el-button>
      </el-row>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="tableData" style="width: 1020px" height="580" stripe size="mini" border @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="45"/>
        <el-table-column align="center" label="序号" type="index" width="55px"/>
        <el-table-column align="center" label="机床图号" width="130px">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="组号" width="80px">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件图号" min-width="180px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称" min-width="180px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="入库时间" width="100px">
          <template slot-scope="scope">
            {{ scope.row.入库时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="库存数量" width="90px">
          <template slot-scope="scope">
            {{ scope.row.出库数量1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="已出库数量" width="100px">
          <template slot-scope="scope">
            {{ scope.row.已出库数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="出库数量" width="140px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.出库数量" :max="scope.row.出库数量1" :min="0" size="mini" style="width: 100%"/>
          </template>
        </el-table-column>
      </el-table>
      <span style="font-size: 5px">共{{ totalnumber }}条信息，选择{{ gouxuan }}条</span>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="出库信息" center width="380px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right">
        <el-form-item label="部门" prop="部门" label-width="100px" size="small">
          <el-select v-model="form.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="form.name" placeholder="请选择领料人" size="small" filterable clearable style="width: 200px;">
            <el-option
              v-for="item in leaders"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="人员编号" prop="leader" label-width="100px" size="small">-->
        <!--          <el-input v-model="form.leader" size="small" placeholder="请输入人员编号" style="width: 200px"/>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取消</el-button>
        <el-button v-positive="'loading'" :disabled="false" type="primary" @click="CHUKU()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { initProject, searchmachine, searchgroup, searchdata, warehousing, selectdepartment, selectleaders } from '@/api/Inventory/SelfMadePartsWarehouseOut'
export default {
  data() {
    return {
      loading: false,
      InventoryTime: '',
      wareHousing_disable: false,
      entryNameValue: '', // 项目名称
      entryName: [],
      machineToolValue: '', // 机床号
      machineTool: [],
      groupNumberValue: '', // 组号
      groupNumber: [],
      partNumber: '',
      pageCurrent: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      processPlanSerialNumber: '', // 工艺计划流水号
      remarks: '',
      form: {
        leader: '',
        name: ''
      },
      rules: {
        leader: [{ required: true, message: '请输入' }]
      },
      shuzu: [],
      keyichuku: 1,
      outgoingQuantity: [],
      departments: [], // 部门
      leaders: [], // 领料人
      gouxuan: 0,
      totalnumber: 0
    }
  },
  created() {
    this.initProject()
    this.searchData()
  },
  methods: {
    searchData() {
      this.loading = true
      this.tableData = []
      const entryNameValue_check = this.entryNameValue === '' || this.entryNameValue === null ? 0 : 1
      const machineToolValue_check = this.machineToolValue === '' || this.machineToolValue === null ? 0 : 1
      const groupNumberValue_check = this.groupNumberValue === '' ? 0 : 1
      const partNumber_check = this.partNumber === '' || this.partNumber === null ? 0 : 1
      var InventoryTime_check
      if (this.InventoryTime === '' || this.InventoryTime === null || this.InventoryTime[0] === '' || this.InventoryTime[1] === '') {
        InventoryTime_check = 0
        this.InventoryTime = ''
      } else { InventoryTime_check = 1 }
      searchdata(entryNameValue_check, this.entryNameValue, machineToolValue_check, this.machineToolValue, groupNumberValue_check, this.groupNumberValue, partNumber_check, this.partNumber, InventoryTime_check, this.InventoryTime[0], this.InventoryTime[1], this.pageCurrent, this.pageSize).then(response => {
        this.totalnumber = response.data.rows.length
        if (response.data.rows.length !== 0) {
          for (let i = 0; i < response.data.rows.length; i++) {
            this.tableData.push({
              机床图号: response.data.rows[i].机床图号,
              组号: response.data.rows[i].组号,
              零件图号: response.data.rows[i].零件图号,
              零件名称: response.data.rows[i].零件名称,
              已出库数量: Number(response.data.rows[i].出库数量),
              入库时间: response.data.rows[i].入库时间,
              入库数量: Number(response.data.rows[i].入库数量),
              工艺计划流水号: response.data.rows[i].工艺计划流水号,
              出库数量: Number(response.data.rows[i].入库数量) - Number(response.data.rows[i].出库数量),
              出库数量1: Number(response.data.rows[i].入库数量) - Number(response.data.rows[i].出库数量)
            })
          }
        }
        this.loading = false
        this.total = response.data.total
      })
    },
    selectDepartment() {
      selectdepartment().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.departments.push({
            label: response.data[i].部门名称,
            value: response.data[i].考核部门编号
          })
        }
      })
    },
    selectLeaders() {
      selectleaders(this.form.department).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.leaders.push({
            label: response.data[i].姓名,
            value: response.data[i].考勤编号
          })
        }
      })
    },
    initProject() {
      initProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machineTool.push({
            label: response.data[i].机床图号,
            name: response.data[i].项目名称,
            value: response.data[i].机床流水号
          })
        }
      })
    },
    // 查询机床
    SearchMachine() {
      this.machineToolValue = ''
      this.machineTool = []
      this.groupNumberValue = ''
      this.groupNumber = []
      if (this.entryNameValue) {
        searchmachine(this.entryNameValue, 1).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.machineTool.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号
            })
          }
        })
      }
    },
    // 查询组号
    searchGroupList() {
      this.groupNumberValue = ''
      this.groupNumber = []
      if (this.machineToolValue) {
        searchgroup(this.machineToolValue).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.groupNumber.push({
              label: response.data[i].组号,
              value: response.data[i].组件流水号
            })
          }
        })
      }
    }, // 入库
    wareHousing() {
      if (this.shuzu.length === 0) {
        this.$message.warning('请勾选出库物料')
      } else {
        this.selectDepartment()
        this.form.leader = ''
        this.wareHousing_disable = false
        this.dialogFormVisible = true
      }
    }, // 多选
    handleSelectionChange(val) {
      this.shuzu = []
      this.shuzu = val
      this.gouxuan = val.length
    },
    CHUKU() {
      this.keyichuku = 1
      this.multipleSelection = []
      this.outgoingQuantity = []
      this.shuzu.map(v => {
        if (v.出库数量 !== 0) {
          this.multipleSelection.push(v.工艺计划流水号)
          this.outgoingQuantity.push(v.出库数量)
        } else {
          this.keyichuku = 0
        }
      })
      if (this.keyichuku === 1) {
        if (this.form.name === '') {
          this.$message.error('请选择领料人')
        } else {
          this.wareHousing_disable = true
          warehousing(this.multipleSelection, this.outgoingQuantity, this.form.name, this.remarks).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('出库成功')
              this.dialogFormVisible = false
              this.searchData()
            } else {
              this.$message.error('出库失败')
              this.dialogFormVisible = false
            }
          })
        }
      } else {
        this.$message.error('请选择正确的出库数量')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData()
    }
  }
}
</script>

<style>
  .el-checkbox__inner {
  border: 1px solid black !important;
}
</style>
