<template>
  <div class="app-container">
    <el-card>
      <span>合同号:</span>
      <el-select v-model="contractNumValue" placeholder="合同号" size="small" filterable clearable @change="searchTable">
        <el-option
          v-for="item in contractNum"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div style="float: left">{{ item.label }}</div>
        </el-option>
      </el-select>
    </el-card>

    <el-card>
      <el-table v-loading="" :data="tableData" stripe border style="width: 100%;max-height: 600px;margin-top: 10px" height="600px" size="mini">
        <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.物料名称 ? scope.row.物料名称 : scope.row.组件名称 }}
          </template>
        </el-table-column>
        <el-table-column label="图号或型号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.物料型号 ? scope.row.物料型号 : scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column label="材料或规格" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.材料 ? scope.row.材料 : 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>
    </el-card>
  </div>
</template>

<script>
import { initArrivalStateContact, searchArrivalState } from '@/api/WorkshopProcurement/ArrivalStateSearch'
import { mapGetters } from 'vuex'

export default {
  name: '', // 项目总价查询
  data() {
    return {
      check1: 0,
      contractNumValue: '',
      contractNum: [],
      supplierName: '',
      tableData: [],
      arrival: [],
      judge: []
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id' // 人员编号
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      initArrivalStateContact().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.contractNum.push({
            label: response.data[i].采购合同编号,
            value: response.data[i].采购合同流水号
          })
        }
      })
    },
    searchTable() {
      searchArrivalState(this.contractNumValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].物料型号 === '' || response.data[i].物料型号 === null) {
            response.data[i].物料型号 = response.data[i].零件图号
          }
        }
        this.tableData = response.data
      })
    }
  }
}
</script>

<style scoped>
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
  .searchForm .el-form-item{
    margin-bottom: 5px;
  }
  .el-tag{
    margin: 0
  }
</style>
