<template>
  <div>
    <el-card>
      <!--      <span>供应商：</span>-->
      <el-select v-model="supplierValue" placeholder="请选择供应商" filterable size="small" style="width: 180px;margin: 0px 10px;" @change="supplierChange();searchContractDetail()">
        <el-option
          v-for="item in supplier"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <!--      <span style="margin-left: 5px">合同：</span>-->
      <el-select v-model="contractValue" placeholder="请选择合同" filterable clearable size="small" style="width: 140px;margin: 0px 10px;" @change="searchContractDetail()">
        <el-option
          v-for="item in contract"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <!--<el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 10px" @click="searchContractDetail">查询明细</el-button>-->
      <el-button type="distribution" style="margin: 10px" size="small" icon="el-icon-circle-check" @click="submitInStorage">确认到货</el-button>
    </el-card>
    <el-card>
      <el-table ref="multipleTable" :data="table1" border stripe size="mini" highlight-current-row style="width: 100%;margin-bottom: 5px" @selection-change="handleSelectionChange">
        <el-table-column :selectable="selectable" type="selection" align="center" width="50px"/>
        <el-table-column label="名称" sortable prop="物料名称" width="150px" align="center" show-overflow-tooltip >
          <template slot-scope="scope">
            {{ scope.row.物料名称 ? scope.row.物料名称 : scope.row.组件名称 }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号" prop="规格型号" width="180px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料规格 ? scope.row.物料规格 : '-' + '&nbsp;' + scope.row.物料型号 ? scope.row.零件图号 : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="采购数量" align="center" width="100" show-overflow-tooltip prop="数量">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column label="已到数量" align="center" width="100" show-overflow-tooltip prop="到货数量">
          <template slot-scope="scope">
            {{ scope.row.到货数量 }}
          </template>
        </el-table-column>
        <el-table-column label="到货数量" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.本次到货数量" :min="0" :max="scope.row.数量-scope.row.到货数量" :precision="2" size="mini" style="margin: 0;width: 100%"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>import { url } from '@/utils/request'
import axios from 'axios'
import Cookie from 'js-cookie'
export default {
  data() {
    return {
      supplierValue: '', // 供应商
      supplier: [],
      contractValue: '', // 合同
      contract: [],
      inventoryNumber: '', // 仓库流水号
      inventoryName: [], // 仓库名称
      locateNumber: '',
      locateName: [],
      table1: []
    }
  },
  created() {
    this.initSupplier()
    this.getpeopleid()
  },
  methods: {
    // 获取人员编号
    getpeopleid() {
      this.inventoryPeople = Cookie.get('id')
    },
    // 初始化供应商
    async initSupplier() {
      this.supplierValue = ''
      this.supplier = []
      const param = {
        url: url,
        method: 'post',
        data: {
          type: '3',
          name: `select distinct 供应商流水号,供应商名称 from (
             select 供应商流水号,供应商名称,sum(数量) as 总采购数量,sum(已到货数量) as 总到货数量
             from 库存管理_车间采购_视图
             group by 采购合同流水号,供应商流水号,供应商名称
             having sum(数量) <> sum(已到货数量)
             union
             select 供应商流水号,供应商名称,sum(数量) as 总采购数量,sum(已到货数量) as 总到货数量
             from 库存管理_车间采购_成组采购_视图
             group by 采购合同流水号,供应商流水号,供应商名称
             having sum(数量) <> sum(已到货数量)
             ) as 已采购的离线合同`
        }
      }
      const res = await axios(param)
      for (let i = 0; i < res.data.length; i++) {
        this.supplier.push({
          value: res.data[i].供应商流水号,
          label: res.data[i].供应商名称
        })
      }
    },
    // 根据供应商查合同
    async supplierChange() {
      this.contractValue = ''
      this.contract = []
      const param = {
        url: url,
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_根据供应商查合同_车间采购',
          param: `供应商流水号=${this.supplierValue}`
        }
      }
      const res = await axios(param)
      for (let i = 0; i < res.data.length; i++) {
        this.contract.push({
          value: res.data[i].采购合同流水号,
          label: res.data[i].采购合同编号
        })
      }
    },
    // 查询
    async searchContractDetail() {
      if (this.contractValue) { this.contractValue_check = 1 } else { this.contractValue_check = 0 }
      const param = {
        url: url,
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_外购件入库_车间采购查询',
          param: `供应商流水号=${this.supplierValue}&采购合同流水号_check=${this.contractValue_check}&采购合同流水号=${this.contractValue}`
        }
      }
      const res = await axios(param)
      res.data.map(v => {
        this.$set(v, '本次到货数量', v.数量 - v.到货数量)
        return v
      })
      for (let i = 0; i < res.data.length; i++) {
        if (!res.data[i].物料规格) { res.data[i].物料规格 = '' }
        if (!res.data[i].物料型号) { res.data[i].物料型号 = '' }
      }
      this.table1 = res.data
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 明细可选
    selectable(row) {
      return Number(row.数量) !== Number(row.到货数量)
    },
    // 确认入库
    submitInStorage() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请勾选入库物料')
      } else {
        const materialGroup = []
        const numberGroup = []
        const partGroup = []
        const groupNumGroup = []
        this.$confirm('确认到货?', '提示', {
          confirmButtonText: '确定到货',
          cancelButtonText: '取消操作',
          center: 'true',
          type: 'warning'
        }).then(async() => {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            materialGroup.push(this.multipleSelection[i].物料流水号)
            numberGroup.push(this.multipleSelection[i].本次到货数量)
            partGroup.push(this.multipleSelection[i].请购单明细流水号)
            groupNumGroup.push(this.multipleSelection[i].组件流水号)
          }
          const param = {
            url: url,
            method: 'post',
            data: {
              type: '2',
              name: '采购件入库_车间采购入库_循环执行',
              param: `物料流水号组=${materialGroup}&实际到货数量组=${numberGroup}&组件流水号组=${groupNumGroup}&入库人员流水号=${this.inventoryPeople}&请购单明细流水号组=${partGroup}`
            }
          }
          const res = await axios(param)
          if (res.data[0].result === '1') {
            this.$message.success('到货成功')
            this.searchContractDetail()
          } else { this.$message.error('到货失败') }
        }).catch(() => {
          this.$message('已取消操作')
        })
      }
    }
  }
}
</script>

<style scoped>
  .el-input{
    margin-right: 2px;
  }
  .searchForm .el-form-item{
    margin-bottom: 5px;
  }
</style>
