<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-row style="margin-bottom:-10px!important;">
          <el-col style="width: 250px">
            <span>物料名称:</span>
            <el-input v-model="materialName" placeholder="物料名称" size="small" clearable style="margin-bottom: 10px;"/>
          </el-col>
          <el-col style="width: 250px">
            <span>物料规格:</span>
            <el-input v-model="materialSpec" placeholder="物料规格" size="small" style="margin-bottom: 10px;" clearable/>
          </el-col>
          <el-col style="width: 250px">
            <span>物料型号:</span>
            <el-input v-model="materialModel" placeholder="物料型号" size="small" style="margin-bottom: 10px;" clearable/>
          </el-col>
          <el-col style="width: 250px">
            <span>仓库名称:</span>
            <el-select v-model="inventoryNameValue" style="margin-bottom: 10px;" size="small" clearable @change="getLocate">
              <el-option
                v-for="item in inventoryName"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col style="width: 250px">
            <span>货位名称:</span>
            <el-select v-model="locateNameValue" style="margin-bottom: 10px;" size="small" clearable>
              <el-option
                v-for="item in locateName"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col style="width: 170px">
            <el-button type="success" icon="el-icon-search" size="small" @click="pageCurrent=1;pageSize=10;searchMaterial()">查询</el-button>
            <el-button type="primary" icon="el-icon-edit" size="small" @click="addMaterial()">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData1" border style="max-height: 500px;" height="500px" size="mini" show-summary>
        <el-table-column label="名称" align="center" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column label="图号或型号" align="center" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" width="130" show-overflow-tooltip>
          <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" min-width="90">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="货位" align="center" min-width="90">
          <template slot-scope="scope">
            {{ scope.row.货位名称 }}
          </template>
        </el-table-column>
        <el-table-column label="货位存量" align="center" width="150" prop="货位存量">
          <template slot-scope="scope">
            <template v-if="scope.row.changeValue">
              <el-input-number v-model="scope.row.货位存量" :min="0" :precision="2" controls-position="right" size="mini" style="width: 90px"/>
              <el-button class="cancel-btn" size="mini" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
            </template>
            <span v-else>{{ scope.row.货位存量 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.changeValue" type="mini" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
            <el-button v-else type="primary" icon="el-icon-edit" size="mini" plain @click="scope.row.changeValue=!scope.row.changeValue">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <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="dialogVisible" title="新增" center style="min-height: 300px" width="880px">
      <el-row>
        <el-col style="width: 240px">
          <span>物料名称:</span>
          <el-input v-model="materialName" placeholder="物料名称" size="small" clearable style="margin-bottom: 10px;"/>
        </el-col>
        <el-col style="width: 240px">
          <span>物料规格:</span>
          <el-input v-model="materialSpec" placeholder="物料规格" size="small" style="margin-bottom: 10px;" clearable/>
        </el-col>
        <el-col style="width: 240px">
          <span>物料型号:</span>
          <el-input v-model="materialModel" placeholder="物料型号" size="small" style="margin-bottom: 10px;" clearable/>
        </el-col>
        <el-col style="width: 80px">
          <el-button type="success" icon="el-icon-search" size="small" @click="pageCurrent01=1;pageSize01=10;searchMaterial01()">查询</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData01" border highlight-current-row height="300" size="mini" style="margin-bottom: 10px" @row-click="selectMaterial">
        <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="200">
          <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>
      <div class="block" style="margin: 10px 0">
        <el-pagination
          :current-page="pageCurrent01"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize01"
          :total="total01"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange01"
          @current-change="handleCurrentChange01"/>
      </div><hr>
      <el-row>
        <el-col style="width: 210px">
          <span>仓库:</span>
          <el-select v-model="inventoryNameValue" style="margin-bottom: 10px;" size="small" clearable @change="getLocate">
            <el-option
              v-for="item in inventoryName"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-col>
        <el-col style="width: 210px">
          <span>货位:</span>
          <el-select v-model="locateNameValue" style="margin-bottom: 10px;" size="small" clearable>
            <el-option
              v-for="item in locateName"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-col>
        <el-col style="width: 210px">
          <span>货位存量:</span>
          <el-input-number v-model="localNumber" :min="0" :precision="2" placeholder="物料名称" size="small" clearable style="margin-bottom: 10px;"/>
        </el-col>
        <el-col style="width: 180px">
          <span>是否为滞货:</span>
          <el-checkbox v-model="isBacklog" size="small" label="滞货件" border style="border: 1px solid rgb(49,56,72)"/>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
export default {
  data() {
    return {
      materialName: '',
      materialSpec: '',
      materialModel: '',
      inventoryNameValue: '',
      inventoryName: [],
      locateNameValue: '',
      locateName: [],
      tableData1: [],
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      tableData01: [],
      pageCurrent01: 1,
      pageSize01: 10,
      total01: 0,
      localNumber: '',
      materialValue: '',
      isBacklog: false
    }
  },
  computed: {
    ...mapGetters([
      'id' // 人员编号
    ])
  },
  mounted() {
    this.initData()
    this.searchMaterial()
  },
  methods: {
    // 初始化数据
    initData() {
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_货位主文件_仓库查询'
        }
      }
      request(param).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.inventoryName.push({
            label: res.data[i].仓库名称,
            value: res.data[i].仓库流水号
          })
        }
      })
    },
    // 根据仓库查货位
    getLocate() {
      this.locateName = []
      this.locateNameValue = ''
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_货位主文件_查询数据',
          param: `仓库流水号=${this.inventoryNameValue}`
        }
      }
      request(param).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.locateName.push({
            label: res.data[i].货位名称,
            value: res.data[i].货位流水号
          })
        }
      })
    },
    // 根据条件查物料货位数量
    searchMaterial() {
      let check1, check2, check3, check4, check5
      this.materialName ? check1 = 1 : check1 = 0
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      this.inventoryNameValue ? check4 = 1 : check4 = 0
      this.locateNameValue ? check5 = 1 : check5 = 0
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `库存管理_库存盘点_物料货位数量_查询数据`,
          param: `物料名称_check=${check1}&物料名称=${this.materialName}&物料规格_check=${check2}&物料规格=${this.materialSpec}&物料型号_check=${check3}&物料型号=${this.materialModel}&仓库流水号_check=${check4}&仓库流水号=${this.inventoryNameValue}&货位流水号_check=${check5}&货位流水号=${this.locateNameValue}`,
          Pagination: this.pageCurrent + '&' + this.pageSize
        }
      }
      request(param).then(res => {
        this.tableData1 = res.data.rows
        this.tableData1.map(v => {
          this.$set(v, 'changeValue', false)
          v.原货位存量 = v.货位存量
          return v
        })
        this.total = res.data.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchMaterial()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchMaterial()
    },
    // 取消设置
    cancelEdit(row) {
      row.货位存量 = row.原货位存量
      row.changeValue = false
      this.$message('取消修改')
    },
    // 确认设置
    confirmEdit(row) {
      Number(row.货位存量) ? row.货位存量 = Number(row.货位存量) : row.货位存量 = 0
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '2',
          name: `库存管理_库存盘点_物料货位数量_修改数据`,
          param: `货位存量=${row.货位存量}&物料流水号=${row.物料流水号}&货位流水号=${row.货位流水号}&物料来源=${row.物料来源}`
        }
      }
      request(param).then(res => {
        if (res.data[0].result === '1') {
          this.$message.success('操作成功')
          row.changeValue = false
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 新增物料货位数量
    addMaterial() {
      this.dialogVisible = true
    },
    // 选择物料
    selectMaterial(row) {
      this.materialValue = row.物料流水号
    },
    // 确认新增物料货位数量
    submitAdd() {
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '2',
          name: `库存管理_库存盘点_物料货位数量_增加数据`,
          param: `物料流水号=${this.materialValue}&货位流水号=${this.locateNameValue}&货位存量=${this.localNumber}&是否为滞货=${Number(this.isBacklog)}`
        }
      }
      request(param).then(res => {
        if (res.data[0].result === '1') {
          this.$message.success('操作成功')
          this.dialogVisible = false
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 查物料
    searchMaterial01() {
      let check1, check2, check3
      this.materialName ? check1 = 1 : check1 = 0
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `库存管理_物料主文件_基本_查询数据_分页`,
          param: `物料名称_check=${check1}&物料名称=${this.materialName}&物料规格_check=${check2}&物料规格=${this.materialSpec}&物料型号_check=${check3}&物料型号=${this.materialModel}&PageCurrent=${this.pageCurrent01}=int&PageSize=${this.pageSize01}=int&PageCount=1=int=output&ItemCount=1=int=output`
        }
      }
      request(param).then(res => {
        this.tableData01 = res.data.result
        this.total01 = Number(res.data.output[0].ItemCount)
      })
    },
    // 分页
    handleSizeChange01(val) {
      this.pageSize01 = val
      this.pageCurrent01 = 1
      this.searchMaterial01()
    },
    handleCurrentChange01(val) {
      this.pageCurrent01 = val
      this.searchMaterial01()
    }
  }
}
</script>

<style scoped>
  .el-select{
    width:165px
  }
  .el-input{
    width:165px
  }
</style>
