<template>
  <div class="app-container">
    <el-card>
      <span>采购合同编号:</span>
      <el-select v-model="ContractValue" filterable clearable size="small" placeholder="采购合同" style="width: 200px">
        <el-option
          v-for="item in Contract"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span class="demonstration">入库日期</span>
      <el-date-picker
        v-model="InboundDate"
        type="date"
        size="small"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <span>仓库:</span>
      <el-select v-model="InventoryValue" filterable clearable size="small" placeholder="仓库" style="width: 200px">
        <el-option
          v-for="item in Inventory"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchPartinfo()">查询</el-button><br>
    </el-card>
    <el-card>
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%;"
        height="400">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <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-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.单价 * scope.row.实际到货数量 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="120">
          <template slot-scope="scope" align="center">
            <el-button size="small" type="warning" icon="el-icon-sort-up" style="margin: 0 0 0 0px" @click="selecting(scope.row)">选入</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { searchContract, searchInventory, searchInbound } from '@/api/Inventory/InboundCard'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      Contract: [],
      ContractValue: '',
      Inventory: [],
      InventoryValue: '',
      InboundDate: '',
      listLoading: '',
      tableData: []
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.searchContractData()
    this.searchInventoryData()
  },
  methods: {
    searchContractData() { // 查询合同
      searchContract().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Contract.push({
            label: response.data[i].采购合同编号,
            value: response.data[i].采购合同流水号
          })
        }
      })
    },
    searchInventoryData() { // 查询仓库
      searchInventory().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Inventory.push({
            label: response.data[i].仓库名称,
            value: response.data[i].仓库流水号
          })
        }
      })
    },
    searchPartinfo() {
      this.tableData = []
      this.listLoading = true
      searchInbound(this.ContractValue, this.InboundDate, this.InventoryValue).then(response => {
        this.tableData = response.data
        this.total = response.data.total
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
