<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <el-tabs v-model="PartType" type="border-card" style="height: 850px" @tab-click="getData()">
        <el-tab-pane label="动力头备货" name="动力头备货">
          <el-table v-loading="loading" ref="table" :data="tableData" highlight-current-row border show-summary stripe size="small" style="width: 781px">
            <el-table-column :width="setColumnWidth('序号')" type="index" label="序号" align="center"/>
            <el-table-column width="200px" label="动力头型号" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <template v-if="scope.row.是否完成 === 0">
                  <el-cascader ref="cascader" v-model="scope.row.产品位置" :options="product" :show-all-levels="false" style="width: 170px" clearable @change="getData1(scope.row, scope.$index)"/>
                </template>
                <template v-else>
                  {{ scope.row.产品名称 }}
                </template>
              </template>
            </el-table-column>
            <el-table-column :width="setColumnWidth('数量')" label="库存" align="center" prop="库存">
              <template slot-scope="scope">
                {{ scope.row.库存 }}
              </template>
            </el-table-column>
            <el-table-column width="90px" label="最低库存" align="center" prop="最低库存">
              <template slot-scope="scope">
                {{ scope.row.最低库存 }}
              </template>
            </el-table-column>
            <el-table-column width="130px" label="备货数量" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.是否完成 === 0">
                  <el-input-number v-model="scope.row.备货数量" :min="1" :step="1" size="mini" style="width: 100%"/>
                </template>
                <template v-else>
                  {{ scope.row.备货数量 }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.是否完成 === 0"
                  size="mini"
                  type="success"
                  plain
                  style="margin-right: 10px"
                  icon="el-icon-folder-add"
                  @click="StockUp(scope.row)">备货</el-button>
                <el-button
                  v-if="scope.row.是否完成 === 1"
                  size="mini"
                  type="primary"
                  plain
                  style="margin-right: 10px"
                  icon="el-icon-check"
                  @click="finish(scope.row)">完成</el-button>
                <el-button
                  :disabled="scope.row.是否完成 === 0"
                  size="mini"
                  type="text"
                  style="margin-right: 10px"
                  icon="el-icon-shopping-cart-2"
                  @click="searchTableMaterial(scope.row)">领料</el-button>
                <el-tooltip :open-delay="500" effect="dark" content="删除备货" placement="top">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-tooltip :open-delay="700" effect="dark" content="增加备货" placement="top">
            <el-button type="text" size="mini" @click="createProduct"><svg-icon icon-class="加号1" style="width: 30px;height: 30px"/></el-button>
          </el-tooltip>
        </el-tab-pane>
        <el-tab-pane label="备货查询" name="备货查询">
          <el-cascader ref="cascader" :options="product" :show-all-levels="false" size="small" style="width: 200px" clearable @change="getData2"/>
          <span style="font-size: 13px;color: black">入库时间</span>
          <el-date-picker
            v-model="dateRange"
            size="small"
            type="daterange"
            align="center"
            style="width: 240px;"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="pageCurrent1 = 1;pageSize1 = 30;searchTable1()"/>
          <el-button type="primary" size="small" icon="el-icon-search" @click="pageCurrent1 = 1;pageSize1 = 30;searchTable1()">查询</el-button>
          <el-table
            v-loading="loading"
            ref="table1"
            :data="tableData1"
            highlight-current-row
            show-summary
            border
            stripe
            size="small"
            style="width: 541px"
            height="700px">
            <el-table-column width="100px" label="备货日期" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.备货日期 }}
              </template>
            </el-table-column>
            <el-table-column label="动力头型号" align="center">
              <template slot-scope="scope">
                {{ scope.row.产品名称 }}
              </template>
            </el-table-column>
            <el-table-column width="100px" label="备货数量" align="center" prop="备货数量">
              <template slot-scope="scope">
                {{ scope.row.备货数量 }}
              </template>
            </el-table-column>
            <el-table-column width="100px" label="完成数量" align="center" prop="完成数量">
              <template slot-scope="scope">
                {{ scope.row.完成数量 }}
              </template>
            </el-table-column>
            <el-table-column width="100px" label="入库时间" align="center">
              <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="[10, 20, 30, 40, 100]"
              :page-size="pageSize1"
              :total="total1"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChanges1"
              @current-change="handleCurrentChanges1"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="完成数量" center width="320px">
      <el-form ref="form" :model="form" :rules="rules" label-position="center" label-width="80px" class="demo-ruleForm">
        <el-form-item label="完成数" prop="完成数">
          <el-input-number v-model="form.完成数" :min="1" :max="form.完成数" style="width:150px;" placeholder="完成数" size="small" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button :disabled="disabled" type="distribution" size="small" @click="submitOrder('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" center width="900px">
      <el-button style="float: right;margin-right: 10px;margin-bottom: 10px" icon="el-icon-check" type="primary" plain size="small" @click="createPickingList">
        领料单
      </el-button>
      <el-button style="float: right;margin-right: 10px;margin-bottom: 10px" icon="el-icon-plus" type="distribution" plain size="small" @click="createSpareParts">
        新增零件
      </el-button>
      <span style="font-size: 18px">领料单号：{{ DocumentNumber }}</span>
      <el-table :data="tableData2" highlight-current-row border stripe size="small" style="width: 841px" height="650px" @selection-change="handleSelectionChange">
        <el-table-column :selectable="selectable" type="selection" align="center" width="50px"/>
        <el-table-column label="序号" type="index" align="center" width="60px"/>
        <el-table-column width="170px" label="物料名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('图号或型号')" label="图号/型号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.图号或型号 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('数量')" label="库存数" align="center">
          <template slot-scope="scope">
            {{ scope.row.库存 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('应领数')" label="应领数" align="center">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column width="140px" label="实领数" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.实领数" :min="0" :max="scope.row.数量-scope.row.已领数量" size="mini" style="width: 100%"/>
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('已领数')" label="已领数" align="center">
          <template slot-scope="scope">
            {{ scope.row.已领数量 }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible8" title="新增零件" center style="min-height: 300px;" width="760px">
      <el-row style="margin-bottom: 10px">
        <span>名称：</span>
        <el-input v-model="materialName" placeholder="名称" style="width: 170px" size="small" clearable/>
        <span>图号/型号：</span>
        <el-input v-model="materialSpec" placeholder="图号/型号" style="width: 170px" size="small" clearable/>
        <el-button type="success" size="small" icon="el-icon-search" style="margin-left:10px" @click="pageCurrent10=1;pageSize10=10;total10=0;searchMaterial()">查询</el-button>
      </el-row>
      <el-table :data="tableData10" :header-cell-style="{background: '#383E4B',color: 'white'}" size="mini" style="width: 97%;max-height: 300px;margin-top:15px" height="400px" border highlight-current-row @row-click="selectNewMaterial">
        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            {{ scope.row.名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="图号/型号">
          <template slot-scope="scope">
            {{ scope.row.代号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="库存">
          <template slot-scope="scope">
            {{ scope.row.库存 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 10px 0;">
        <el-pagination
          :current-page="pageCurrent10"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize10"
          :total="total10"
          :pager-count="pagerCount"
          style="display:inline-block;width:50%"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"/>
      </div>
      <div>
        <span>领用数量：</span>
        <el-input-number v-model="CollectNumber" placeholder="领用数量" style="width: 170px" size="small" clearable/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible8=false">取消</el-button>
        <el-button type="primary" size="small" @click="submitMaterialChange">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      materialName: '',
      materialSpec: '',
      CollectNumber: '',
      addmaterial: '',
      NumberValue1: [],
      Number: [],
      type: [],
      pagerCount: 5,
      PartType: '动力头备货',
      productValue: '',
      product: [],
      NumberValue: '',
      DocumentNumber: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible8: false,
      form: {
        完成数: ''
      },
      rules: {
        完成数: [{ required: true, message: '请填写完成数量', trigger: 'blur' }]
      },
      dateRange: '',
      loading: false, // 数据加载
      total: 0, // 分页总数
      total1: 0, // 分页总数
      total10: 0, // 分页总数
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData10: [],
      tableData100: [],
      disabled: false,
      multipleSelection: [],
      multipleSelection_variable: [],
      pageCurrent: 1, // 分页当前页
      pageSize: 50, // 分页每页显示条数
      pageCurrent1: 1, // 分页当前页
      pageSize1: 50, // 分页每页显示条数
      pageCurrent10: 1, // 分页当前页
      pageSize10: 10, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
      this.$refs['table1'].doLayout()
    })
  },
  created() {
    this.searchTable()
    this.getTreeData()
  },
  methods: {
    getTreeData() {
      var param = []
      param[0] = ['子节点', 0]
      var Data = this.CreateData('11', '产品关系_动力头备货_查询节点', param)
      this.ExecDatabase(Data).then(response => {
        const data = response.data
        this.product = this.tree(data, 0)
      })
    },
    tree(data, pid) {
      const result = []
      let temp
      for (let i = 0; i < data.length; i++) {
        if (data[i].父节点 === pid) {
          const obj = { label: data[i].节点名称, value: data[i].子节点 }
          temp = this.tree(data, data[i].子节点)
          if (temp.length > 0) {
            obj.children = temp
          }
          result.push(obj)
        }
      }
      return result
    },
    getData1(row) {
      this.productValue = row.产品位置[row.产品位置.length - 1]
      var param = []
      param[0] = ['产品流水号', this.productValue]
      param[1] = ['产品位置', row.产品位置.join(',')]
      param[2] = ['动力头备货流水号', row.动力头备货流水号]
      var Data = this.CreateData('12', '装配管理_动力头备货_获取动力头库存', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.searchTable()
        }
      })
    },
    StockUp(row) {
      if (this.productValue && row.备货数量) {
        var param = []
        param[0] = ['产品流水号', this.productValue]
        param[1] = ['动力头备货流水号', row.动力头备货流水号]
        param[2] = ['备货数量', row.备货数量]
        var Data = this.CreateData('12', '装配管理_动力头备货_编辑数据', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.searchTable()
            this.$message.success('备货成功')
          } else {
            this.$message.error('备货失败')
          }
        })
      } else {
        this.$message.warning('数据不完整')
      }
    },
    finish(row) {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.NumberValue = row.动力头备货流水号
      this.form.完成数 = row.剩余数
      this.dialogFormVisible = true
    },
    submitOrder(formName) {
      this.disabled = true
      setTimeout(() => {
        if (this.form.完成数) {
          var param = []
          param[0] = ['动力头备货流水号', this.NumberValue]
          var Data = this.CreateData('11', '装配管理_动力头备货新_物料验证', param)
          this.ExecDatabase(Data).then(response => {
            if (Number(response.data[0].条数) === 0) {
              this.$message.error('该物料不存在，请通知技术增加相应物料')
              this.disabled = false
            } else {
              var param1 = []
              param1[0] = ['动力头备货流水号', this.NumberValue]
              param1[1] = ['完成数量', this.form.完成数]
              param1[2] = ['入库人员流水号', this.id]
              var Data1 = this.CreateData('12', '装配管理_动力头备货_完成备货', param1)
              this.ExecDatabase(Data1).then(response => {
                if (response.data[0].result === '1') {
                  this.searchTable()
                  this.dialogFormVisible = false
                  this.disabled = false
                } else {
                  this.$message.error('完成失败')
                  this.disabled = false
                }
              })
            }
          })
        } else {
          this.$message.error('数量不能为0或空')
          this.disabled = false
        }
      }, 500)
    },
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    selectable(row) {
      return Number(row.数量) > Number(row.已领数量) && Number(row.实领数) > 0
    },
    // 领料数据库
    searchTableMaterial(row) {
      this.NumberValue = row.动力头备货流水号
      var param1 = []
      var Data1 = this.CreateData('11', '车间装配管理_领料单_获取单号', param1)
      this.ExecDatabase(Data1).then(response => {
        this.DocumentNumber = response.data[0].领料单编号
      })
      var param = []
      param[0] = ['动力头备货流水号', row.动力头备货流水号]
      var Data = this.CreateData('11', '装配管理_备货三表_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData2 = response.data
        this.dialogFormVisible1 = true
      })
    },
    searchMaterial() {
      let materialName_check, materialSpec_check
      this.materialName ? materialName_check = 1 : materialName_check = 0
      this.materialSpec ? materialSpec_check = 1 : materialSpec_check = 0
      var param = []
      param[0] = ['名称_check', materialName_check]
      param[1] = ['名称', this.materialName]
      param[2] = ['代号_check', materialSpec_check]
      param[3] = ['代号', this.materialSpec]
      var Data = this.CreateData('11', '物料信息_查询', param, this.pageSize10, this.pageCurrent10)
      this.ExecDatabase(Data).then(response => {
        this.tableData10 = response.data.rows
        this.total10 = response.data.total
      })
    },
    submitMaterialChange() {
      if (this.CollectNumber && this.addmaterial) {
        var param1 = []
        param1[0] = ['动力头备货流水号', this.NumberValue]
        param1[1] = ['物料流水号', this.addmaterial]
        param1[2] = ['实领数', this.CollectNumber]
        var Data1 = this.CreateData('12', '车间装配管理_动力头备货_临时领料明细_增加', param1)
        this.ExecDatabase(Data1).then(response => {
          if (response.data[0].result === '1') {
            var param1 = []
            param1[0] = ['动力头备货流水号', this.NumberValue]
            var Data1 = this.CreateData('11', '装配管理_备货三表_查询', param1)
            this.ExecDatabase(Data1).then(response => {
              this.tableData2 = response.data
            })
            this.$message.success('新增成功')
          } else {
            this.$message.error('新增失败')
          }
        })
      } else {
        this.$message.warning('未选择物料或领用数量为0')
      }
    },
    createPickingList() {
      if (this.multipleSelection.length !== 0) {
        this.NumberValue1 = []
        this.Number = []
        this.type = []
        this.multipleSelection_variable = this.multipleSelection
        this.multipleSelection = []
        for (let i = 0; i < this.multipleSelection_variable.length; i++) {
          if (parseInt(this.multipleSelection_variable[i].实领数) > 0) {
            this.NumberValue1[i] = parseInt(this.multipleSelection_variable[i].流水号)
            this.Number[i] = parseInt(this.multipleSelection_variable[i].实领数)
            this.type[i] = parseInt(this.multipleSelection_variable[i].零件类型)
          }
        }
        var param = []
        param[0] = ['动力头备货流水号', this.NumberValue]
        param[1] = ['流水号数组', this.NumberValue1]
        param[2] = ['实领数数组', this.Number]
        param[3] = ['零件类型数组', this.type]
        param[4] = ['人员编号', this.id]
        var Data = this.CreateData('12', '装配执行_动力头备货_领料', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('执行成功')
            this.searchTable()
            var param1 = []
            param1[0] = ['动力头备货流水号', this.NumberValue]
            var Data1 = this.CreateData('11', '装配管理_备货三表_查询', param1)
            this.ExecDatabase(Data1).then(response => {
              this.tableData2 = response.data
            })
          } else {
            this.$message.error('执行失败')
          }
        })
      } else {
        this.$message.warning('请选择物料')
      }
    },
    selectNewMaterial(row) {
      this.addmaterial = row.物料流水号
    },
    handleSizeChange1(val) {
      this.pageCurrent10 = 1
      this.pageSize10 = val
      this.searchMaterial()
    },
    handleCurrentChange1(val) {
      this.pageCurrent10 = val
      this.searchMaterial()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    createSpareParts() {
      this.dialogFormVisible8 = true
    },
    getData() {
      if (this.PartType === '动力头备货') {
        this.searchTable()
      } else if (this.PartType === '备货查询') {
        this.NumberValue = ''
        this.searchTable1()
      }
    },
    searchTable() {
      this.tableData100 = []
      var param = []
      var Data = this.CreateData('11', '装配管理_动力头备货新_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.tableData100.push({
            动力头备货流水号: response.data[i].动力头备货流水号,
            库存: response.data[i].累计库存,
            产品名称: response.data[i].产品名称,
            最低库存: response.data[i].最低库存,
            备货数量: response.data[i].备货数量,
            剩余数: response.data[i].剩余数,
            完成数量: response.data[i].完成数量,
            产品位置: response.data[i].产品位置 ? response.data[i].产品位置.split(',').map(Number) : [],
            产品流水号: response.data[i].产品流水号,
            是否完成: response.data[i].是否完成
          })
        }
      }).then(() => {
        this.tableData = this.tableData100
      })
    },
    createProduct() {
      var param = []
      var Data = this.CreateData('12', '装配管理_动力头备货_增加数据', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('添加成功')
          this.searchTable()
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['动力头备货流水号', row.动力头备货流水号]
        var Data = this.CreateData('12', '装配管理_动力头备货_删除数据', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchTable()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getData2(val) {
      this.NumberValue = val[val.length - 1]
      this.searchTable1()
    },
    searchTable1() {
      let dateRange_check, NumberValue_check
      this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
      this.NumberValue ? NumberValue_check = 1 : NumberValue_check = 0
      var param = []
      param[0] = ['产品流水号', this.NumberValue]
      param[1] = ['产品流水号_check', NumberValue_check]
      param[2] = ['开始时间', this.dateRange[0]]
      param[3] = ['结束时间', this.dateRange[1]]
      param[4] = ['时间_check', dateRange_check]
      var Data = this.CreateData('11', '装配管理_动力头备货_查询数据新_全部', param, this.pageSize1, this.pageCurrent1)
      this.ExecDatabase(Data).then(response => {
        this.tableData1 = response.data.rows
        this.total1 = response.data.total
      })
    },
    handleSizeChanges1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.searchTable1()
    },
    handleCurrentChanges1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    }
  }
}
</script>
<style scoped lang="scss">
  /deep/ .el-card__body{
    padding: 0px!important;
  }
</style>
