<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="采购部采购" name="first">
        <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>
          <el-button size="small" type="primary" icon="el-icon-download" style="margin: 0 0 0 10px" @click="searchPartinfo()">导出</el-button>
        </el-card>
        <el-card>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            size="mini"
            border
            style="width: 100%;"
            height="400"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55"/>
            <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.单价 * 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>
      </el-tab-pane>
      <el-tab-pane label="车间采购" name="second">
        <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>
          <el-button size="small" type="primary" icon="el-icon-download" style="margin: 0 0 0 10px" @click="searchPartinfo()">导出</el-button>
        </el-card>
        <el-card>
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            size="mini"
            border
            style="width: 100%;"
            height="400"
            @selection-change="handleSelectionChange2">
            <el-table-column type="selection" align="center" width="55"/>
            <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.单价 * 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>
      </el-tab-pane>
    </el-tabs>
    <el-card>
      <span style="margin: 5px">入库单编号</span>
      <el-input v-model="inboundCardNumber" clearable size="small" style="width:200px" />
      <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchInboundCard1()">查询</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" style="margin: 0 0 0 10px" @click="addCard()">创建</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" style="margin: 0 0 0 10px" @click="InboundCardDetail()">选入</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" style="margin: 0 0 0 10px" @click="downLoadCjn()">导出</el-button>
      <el-table
        v-loading="listLoading3"
        :data="tableData3"
        border
        style="width: 100%;"
        size="mini"
        height="200"
        @row-click = "searchDetail()">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <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" value-format="yyyy-MM-dd">
            {{ 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="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="50">
          <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="70">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column label="业务类型" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.业务类型 }}
          </template>
        </el-table-column>
        <el-table-column label="采购类型" align="center" min-width="50">
          <template slot-scope="scope">
            {{ scope.row.采购类型 }}
          </template>
        </el-table-column>
        <el-table-column label="入库类别" align="center" min-width="50">
          <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="200px">
          <template slot-scope="scope" align="center">
            <el-button size="small" type="primary" icon="el-icon-edit" style="margin: 0 0 0 10px" @click="chooseListinfor(scope.row)">选择</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" style="margin: 0 0 0 10px" @click="dropListinfor(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="PageCurrent3"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :total="total3"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"/>
      </div>
      <el-table
        v-loading="listLoading4"
        :data="tableData4"
        border
        style="width: 100%;"
        size="mini"
        height="200">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <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="100">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column label="机床图号" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column label="组号" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column label="领用数量" align="center" min-width="50">
          <template slot-scope="scope">
            {{ scope.row.出库数量 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库" align="center" min-width="50">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="货位" align="center" min-width="50">
          <template slot-scope="scope">
            {{ scope.row.货位名称 }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.是否出库" size="small" type="primary" icon="el-icon-edit" style="margin: 0 0 10px 10px" @click="editListDetailx(scope.row)">编辑</el-button>
            <el-button :disabled="scope.row.是否出库" size="small" type="danger" icon="el-icon-delete" style="margin: 0 0 10px 10px" @click="dropListdetail(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible1" title="增加采购入库单" center style="min-height: 300px" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px">
        <el-form-item label="合同名称" prop="合同名称">
          <el-select v-model="form.contract" 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>
        </el-form-item>
        <el-form-item label="仓库名称" prop="仓库名称">
          <el-select v-model="form.house" 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-form-item>
        <el-form-item label="入库日期" prop="入库日期">
          <el-date-picker v-model="form.inboundDay" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="到货单号" prop="到货单号">
          <el-input v-model="form.arrive" placeholder="到货单号" size="small" clearable/>
        </el-form-item>
        <el-form-item label="业务号" prop="业务号">
          <el-input v-model="form.affair" placeholder="业务号" size="small" clearable/>
        </el-form-item>
        <el-form-item label="业务员" prop="业务员">
          <el-select v-model="form.affairPeople" filterable clearable size="small" placeholder="业务员" style="width: 200px">
            <el-option
              v-for="item in People"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="到货日期" prop="到货日期">
          <el-date-picker v-model="form.arriveDay" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="业务类型" prop="业务类型">
          <el-input v-model="form.affirType" placeholder="业务类型" size="small" clearable/>
        </el-form-item>
        <el-form-item label="采购类型" prop="采购类型">
          <el-input v-model="form.purchaseType" placeholder="采购类型" size="small" clearable/>
        </el-form-item>
        <el-form-item label="备注" prop="备注">
          <el-input v-model="form.note" placeholder="备注" size="small" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible1=false">取消</el-button>
        <el-button type="primary" size="small" @click="submitCard">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchContract, searchInventory, searchInbound, searchShopInbound, searchInboundCard, addInboundCard, searchAffairPeople, addInboundCardDetail, searchInboundCardDetail } from '@/api/Inventory/InboundCard'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      Contract: [],
      ContractValue: '',
      Inventory: [],
      InventoryValue: '',
      InboundDate: '',
      listLoading: '',
      tableData: [],
      activeName: 'first',
      listLoading2: '',
      tableData2: [],
      listLoading3: '',
      inboundCardNumber: '',
      inboundCardNumber_check: '',
      tableData3: [],
      listLoading4: '',
      tableData4: [],
      dialogVisible1: false,
      People: [],
      form: {
        contract: '',
        house: '',
        inboundDay: '',
        arrive: '',
        affair: '',
        affairPeople: '',
        arriveDay: '',
        affirType: '',
        purchaseType: '',
        inboundType: '',
        note: ''
      },
      rules: { // 表单验证规则
        contract: [{ required: true, message: '请选择合同', trigger: 'blur' }],
        house: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
        inboundDay: [{ required: true, message: '请输入入库日期', trigger: 'blur' }],
        arrive: [{ required: true, message: '请输入到货单号', trigger: 'blur' }],
        affair: [{ required: true, message: '请输入业务号', trigger: 'blur' }],
        affairPeople: [{ required: true, message: '请选择业务员', trigger: 'blur' }],
        affirType: [{ required: true, message: '请输入入库日期', trigger: 'blur' }],
        purchaseType: [{ required: true, message: '请输入业务类型', trigger: 'blur' }],
        inboundType: [{ required: true, message: '请输入入库类别', trigger: 'blur' }],
        note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      nameGroup: [],
      modelGroup: [],
      specificationGroup: [],
      paintGroup: [],
      numberGroup: [],
      priceGroup: [],
      DetailNumber: ''
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  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].采购合同流水号
          })
        }
      })
      searchAffairPeople(this.token).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.People.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
      })
    },
    searchShopinfo() {
      this.tableData2 = []
      this.listLoading2 = true
      searchShopInbound(this.ContractValue, this.InboundDate, this.InventoryValue).then(response => {
        this.tableData2 = response.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    searchInboundCard1() {
      if (this.inboundCardNumber === '') {
        this.inboundCardNumber_check = 0
      } else {
        this.inboundCardNumber_check = 1
      }
      this.tableData3 = []
      this.listLoading3 = true
      searchInboundCard(this.inboundCardNumber_check, this.inboundCardNumber).then(response => {
        this.tableData3 = response.data
        this.listLoading3 = false
      })
    },
    addCard() {
      this.dialogVisible1 = true
    },
    submitCard() { // 提交设置
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addInboundCard(this.form.inboundDay, this.form.house, this.form.contract, this.form.arrive, this.form.affairPeople, this.form.affair, this.form.arriveDay, this.form.affirType, this.form.purchaseType, this.form.inboundType, this.form.note).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('增加成功')
              this.dialogVisible1 = false
            } else {
              this.$message.error('增加失败')
            }
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.nameGroup = []
      this.modelGroup = []
      this.specificationGroup = []
      this.paintGroup = []
      this.numberGroup = []
      this.priceGroup = []
      for (let i = 0; i < val.length; i++) {
        this.nameGroup.push(val[i].物料名称)
        this.modelGroup.push(val[i].物料规格)
        this.specificationGroup.push(val[i].物料型号)
        this.paintGroup.push(val[i].零件图号)
        this.numberGroup.push(val[i].数量)
        this.priceGroup.push(val[i].单价)
      }
    },
    handleSelectionChange2(val) {
      this.nameGroup = []
      this.modelGroup = []
      this.specificationGroup = []
      this.paintGroup = []
      this.numberGroup = []
      this.priceGroup = []
      for (let i = 0; i < val.length; i++) {
        this.nameGroup.push(val[i].物料名称)
        this.modelGroup.push(val[i].物料规格)
        this.specificationGroup.push(val[i].物料型号)
        this.paintGroup.push(val[i].零件图号)
        this.numberGroup.push(val[i].数量)
        this.priceGroup.push(val[i].单价)
      }
    },
    InboundCardDetail() {
      addInboundCardDetail(this.DetailNumber, this.nameGroup, this.modelGroup, this.specificationGroup, this.paintGroup, this.numberGroup, this.priceGroup).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('增加成功')
          this.dialogVisible1 = false
        } else {
          this.$message.error('增加失败')
        }
      })
    },
    searchDetail(row) {
      this.DetailNumber = row.请购入库单流水号
      searchInboundCardDetail(this.DetailNumber).then(response => {
        this.tableData4 = response.data
      })
    }
  }
}
</script>

<style scoped>

</style>
