<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" size="small" style="margin-left: 10px" plain @click="searchContractDetail">查询明细</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">
        <el-table-column label="合同编号" sortable prop="离线合同编号" width="120px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.离线合同编号 }}
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="物料名称" width="150px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号" prop="规格型号" width="180px" align="center" show-overflow-tooltip>
          <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="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>
      <span v-show="false">仓库名称：</span>
      <el-select v-show="false" v-model="inventoryNumber" style="width: 200px" filterable size="small" placeholder="仓库名称" @change="getLocate">
        <el-option
          v-for="item in inventoryName"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>货位名称：</span>
      <el-select v-model="locateNumber" style="width: 200px" filterable size="small" placeholder="货位名称">
        <el-option
          v-for="item in locateName"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button class="button111" style="margin-left: 5px" size="small" @click="submitInStorage">确认入库</el-button>
    </el-card>
  </div>
</template>

<script>
import { url } from '@/utils/request'
import axios from 'axios'
import Cookie from 'js-cookie'

export default {
  name: 'OfflineInStorage',
  data() {
    return {
      searchType: '2', // 查询合同方式
      inventoryPeople: '',
      oldVal1: '',
      oldVal2: '',
      qrCode: '',
      supplierValue: '',
      supplier: [],
      contractValue: '',
      contract: [],
      supplierName: '', // 供应商名称
      contractNumber: '', // 合同编号
      table1: [],
      multipleSelection: [],
      locateType: '2', // 查询货位方式
      inventoryNumber: '', // 仓库流水号
      inventoryName: [], // 仓库名称
      locateNumber: '',
      locateName: []
    }
  },
  mounted() {
    this.initSupplier()
    this.getLocate()
    this.getpeopleid()
  },
  methods: {
    // 获取仓库
    async getHouse() {
      const param = {
        url: url,
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_货位主文件_仓库查询'
        }
      }
      const res = await axios(param)
      this.inventoryName = []
      for (let i = 0; i < res.data.length; i++) {
        this.inventoryName.push({
          label: res.data[i].仓库名称,
          value: res.data[i].仓库流水号
        })
      }
    },
    // 获取货位
    async getLocate() {
      this.locateNumber = ''
      this.locateName = []
      const param = {
        url: url,
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_货位主文件_查询数据_查询全部'
        }
      }
      const res = await axios(param)
      for (let i = 0; i < res.data.length; i++) {
        this.locateName.push({
          label: res.data[i].货位名称,
          value: res.data[i].货位流水号
        })
      }
    },
    // 明细可选
    selectable(row) {
      return Number(row.数量) !== Number(row.到货数量)
    },
    // 初始化供应商
    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 采购管理_离线合同_视图
              where 离线合同状态 = 2
              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: `供应商流水号_check=1&供应商流水号=${this.supplierValue}&未全部到货=1`
        }
      }
      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].离线合同编号
        })
      }
    },
    // 单选框改变
    radioChange() {
      this.qrCode = ''
      this.supplierValue = ''
      this.contractValue = ''
      this.contract = []
      this.table1 = []
      if (this.searchType === '1') {
        this.ifocus1()
      }
    },
    radioChange2() {
      this.locateNumber = ''
      if (this.searchType === '1') {
        this.ifocus2()
      }
    },
    // 初始化时让input框聚焦，可以直接扫描出结果，而不用点一下输入框
    ifocus1() {
      const input = document.getElementById('code3')
      input.focus()
    },
    ifocus2() {
      const input = document.getElementById('locate')
      input.focus()
    },
    onfocus1() {
      this.qrCode = ''
    },
    onfocus2() {
      this.locateNumber = ''
    },
    // 获取人员编号
    getpeopleid() {
      this.inventoryPeople = Cookie.get('id')
    },
    // 查询离线合同明细
    async searchContractDetail() {
      this.table1 = []
      if (this.contractValue && this.searchType === '2') {
        this.qrCode = this.contractValue
      } else if (!this.supplierValue) {
        this.$message.error('请选择供货商')
      }
      if (this.contractValue) { this.contractValue_check = 1 } else { this.contractValue_check = 0 }
      const param = {
        url: url,
        method: 'post',
        data: {
          type: '1',
          name: '离线合同扫描合同打印物料_NEW',
          param: `供应商流水号=${this.supplierValue}&离线合同流水号_check=${this.contractValue_check}&离线合同流水号=${this.qrCode}`
        }
      }
      const res = await axios(param)
      res.data.map(v => {
        this.$set(v, '本次到货数量', v.数量 - v.到货数量)
        return v
      })
      if (res.data.length > 0) {
        this.supplierName = res.data[0].供应商名称
        this.contractNumber = res.data[0].离线合同编号
      } else {
        this.supplierName = ''
        this.contractNumber = ''
      }
      // this.table1 = res.data
      console.log(res.data)
      res.data.map(v => {
        this.table1.push({
          离线合同编号: v.离线合同编号,
          离线合同明细流水号: v.离线合同明细流水号,
          物料流水号: v.物料流水号,
          组件零件基本件流水号: v.组件零件基本件流水号,
          物料名称: v.物料名称 ? v.物料名称 : v.零件名称,
          规格型号: v.物料规格 + (v.零件图号 === null ? v.物料型号 : v.零件图号),
          数量: v.数量,
          到货数量: v.到货数量,
          本次到货数量: v.本次到货数量
        })
      })
      this.oldVal1 = ''
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val, 123)
    },
    // 提交入库
    submitInStorage() {
      if (!this.locateNumber) {
        this.$message.warning('请选择货位或者扫码货位二维码')
      } else {
        const materialGroup = []
        const BasicGroup = []
        const numberGroup = []
        const partGroup = []
        for (let i = 0; i < this.table1.length; i++) {
          if (this.table1[i].本次到货数量 !== 0) {
            materialGroup.push(this.table1[i].物料流水号)
            BasicGroup.push(this.table1[i].组件零件基本件流水号)
            numberGroup.push(this.table1[i].本次到货数量)
            partGroup.push(this.table1[i].离线合同明细流水号)
          }
        }
        this.$confirm('确认入库?', '提示', {
          confirmButtonText: '确定入库',
          cancelButtonText: '取消操作',
          center: 'true',
          type: 'warning'
        }).then(async() => {
          const param = {
            url: url,
            method: 'post',
            data: {
              type: '2',
              name: '采购管理_离线采购件入库_增加数据',
              param: `物料流水号组=${materialGroup}&组件零件基本件流水号组=${BasicGroup}&离线合同明细流水号组=${partGroup}&数量组=${numberGroup}&货位流水号=${this.locateNumber}&入库人员流水号=${this.inventoryPeople}`
            }
          }
          const res = await axios(param)
          if (res.data[0].result === '1') {
            this.$message.success('入库成功')
            this.searchContractDetail()
            this.searchType = '2'
            this.locateType = '2'
            this.qrCode = ''
            this.locateNumber = ''
          } else { this.$message.error('入库失败') }
        }).catch(() => {
          this.$message('已取消操作')
        })
      }
    },
    codeChange1() {
      const input = document.getElementById('code3')
      input.blur()
    },
    codeChange2() {
      const input = document.getElementById('locate')
      input.blur()
    }
  }
}
</script>
<style>
  .el-message-box{
    width: 300px!important;
  }
</style>
<style scoped>

</style>
<style lang="scss">
  .button111{
    background:rgb(253,246,236);
    border-color: #ff9759;
    color: #ff9759;
    &:hover{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
    &:focus{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
  }
</style>
