<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>物料名称：</span>
        <el-input v-model="materialName" placeholder="物料名称" clearable size="small"/>
        <span>物料规格：</span>
        <el-input v-model="materialSpec" placeholder="物料规格" clearable size="small"/>
        <span>物料型号：</span>
        <el-input v-model="materialModel" placeholder="物料型号" clearable size="small"/>
        <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="pageCurrent1=1;pageSize1=10;total1=0;searchTable1();pageCurrent2=1;pageSize2=10;total2=0;searchTable2()">查询</el-button>
      </div>
      <h4 style="margin-top: 0">采购件列表</h4>
      <el-table :data="tableData1" size="mini" border style="width: 100%;" height="440">
        <el-table-column label="名称" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column label="图号或型号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column props="仓库名称" label="仓库名称" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="货位名称" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.货位名称 }}
          </template>
        </el-table-column>
        <el-table-column label="货位存量" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.货位存量 }}
          </template>
        </el-table-column>
        <el-table-column label="待出库数量" align="center" width="90">
          <template slot-scope="scope">
            {{ scope.row.待出库数量 }}
          </template>
        </el-table-column>
        <el-table-column label="可转滞货数量" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.可转滞货数量 = scope.row.货位存量 - scope.row.待出库数量 }}
          </template>
        </el-table-column>
        <el-table-column label="所属机床" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column label="所属分组" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope" align="center">
            <el-button size="mini" type="primary" @click="turnToBacklogGoods(scope.row)">转为滞货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent1"
          :page-sizes="[10, 20, 30, 40]"
          :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>
      <h4>滞货件列表</h4>
      <el-table :data="tableData2" size="mini" border style="width: 100%;" height="440">
        <el-table-column label="名称" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column label="图号或型号" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="货位名称" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.货位名称 }}
          </template>
        </el-table-column>
        <el-table-column label="滞货货位存量" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.货位存量 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent2"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize2"
          :total="total2"
          style="display:inline-block;width:50%"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"/>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" title="转为滞货" center width="380px">
      <span>转为滞货数量：</span>
      <el-input-number :min="0" :max="maxNumber" v-model="number" controls-position="right"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取消</el-button>
        <el-button :disabled="Number(number)===0" type="primary" @click="submitTurn()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchMaterialNum, searchBacklogNum, submitTurn } from '@/api/PurchasingCenter/BacklogGoodsAnalysis'
import { mapGetters } from 'vuex'
export default {
  name: 'BacklogGoodsAnalysis',
  data() {
    return {
      materialName: '',
      materialSpec: '',
      materialModel: '',
      pageCurrent1: 1,
      pageSize1: 10,
      total1: 0,
      tableData1: [],
      number: 0,
      maxNumber: 0,
      dialogFormVisible: false,
      pageCurrent2: 1,
      pageSize2: 10,
      total2: 0,
      tableData2: [],
      materialNum: '', // 物料流水号
      materialLocalNum: '', // 物料与货位对照流水号
      localNum: '' // 货位流水号
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'id' // 人员编号
    ])
  },
  mounted() {
    this.searchTable1()
    this.searchTable2()
  },
  methods: {
    searchTable1() {
      let check1, check2, check3
      this.materialName ? check1 = 1 : check1 = 0
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      searchMaterialNum(this.pageCurrent1, this.pageSize1, check1, this.materialName, check2, this.materialSpec, check3, this.materialModel).then(response => {
        this.tableData1 = response.data.rows
        this.total1 = response.data.total
      })
    },
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.pageCurrent1 = 1
      this.searchTable1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    },
    turnToBacklogGoods(row) {
      this.number = 0
      this.dialogFormVisible = true
      this.maxNumber = row.可转滞货数量
      this.materialNum = row.物料流水号
      this.materialLocalNum = row.物料与货位对照流水号
      this.localNum = row.货位流水号
    },
    submitTurn() {
      submitTurn(this.materialNum, this.number, this.materialLocalNum, this.localNum).then(response => {
        if (response.data[0].result === '1') {
          this.searchTable1()
          this.searchTable2()
          this.$message.success('操作成功')
          this.dialogFormVisible = false
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    searchTable2() {
      let check1, check2, check3
      this.materialName ? check1 = 1 : check1 = 0
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      searchBacklogNum(this.pageCurrent2, this.pageSize2, check1, this.materialName, check2, this.materialSpec, check3, this.materialModel).then(response => {
        this.tableData2 = response.data.rows
        this.total2 = response.data.total
      })
    },
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.pageCurrent2 = 1
      this.searchTable2()
    },
    handleCurrentChange2(val) {
      this.pageCurrent2 = val
      this.searchTable2()
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 15px;
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
</style>
