<template>
  <div class="app-container">
    <el-card>
      <el-input v-model="invoiceNumber" placeholder="发货单号和收货单位" clearable style="width: 200px;margin-right: 10px" size="small" @keyup.enter.native="openSearch"/>
      <!--<el-input v-model="receivingUnit" placeholder="请输入收货单位" clearable style="width: 150px;margin-right: 10px" size="mini"/>-->
      <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 10px" plain @click="openSearch">查询</el-button>
    </el-card>
    <el-card>
      <el-col :span="10">
        <el-table :data="tableDataSearchList" style="width: 100%" height="600" border stripe size="mini" highlight-current-row @row-click="searchListItem">
          <el-table-column align="center" label="状态" width="60px">
            <template slot-scope="scope">
              <span v-if="scope.row.是否发出.toString() === '1'" style="color: green">已发出</span>
              <span v-else>未发出</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发货单号" width="120px">
            <template slot-scope="scope">
              {{ scope.row.发货单编号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="发货单名" width="100px">
            <template slot-scope="scope">
              {{ scope.row.发货单名称 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="收货单位" width="180px" show-overflow-tooltip="">
            <template slot-scope="scope">
              {{ scope.row.收货单位 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="收货人员" width="80px">
            <template slot-scope="scope">
              {{ scope.row.收货人员 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="收货地址" width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.收货地址 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="联系电话" width="110px">
            <template slot-scope="scope">
              {{ scope.row.联系电话 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="车辆牌号" width="140px">
            <template slot-scope="scope">
              {{ scope.row.车辆牌号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="司机姓名" width="80px">
            <template slot-scope="scope">
              {{ scope.row.司机姓名 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="司机电话" width="110px">
            <template slot-scope="scope">
              {{ scope.row.司机电话 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="制单人" width="100px">
            <template slot-scope="scope">
              {{ scope.row.制单人 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="发货时间" width="110px">
            <template slot-scope="scope">
              <span v-if="scope.row.发出时间 === null"/>
              <span v-else>{{ scope.row.发出时间.substr(0,10) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="14">
        <el-table v-loading="listLoading" :data="tableData" highlight-current-row style="width: 100%" height="560" border size="mini">
          <el-table-column align="center" label="货品类别" width="80">
            <template slot-scope="scope">
              <span effect="dark" size="small" type="success">{{ scope.row.货品类别 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="货品编号">
            <template slot-scope="scope">
              {{ scope.row.货品编号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="货品名称" width="150px">
            <template slot-scope="scope">
              {{ scope.row.货品名称 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="货品规格">
            <template slot-scope="scope">
              {{ scope.row.货品规格 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="货品型号">
            <template slot-scope="scope">
              {{ scope.row.货品型号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" width="100">
            <template slot-scope="scope">
              <!--<template v-if="disabledPick === false">-->
              <!--<el-input-number v-model="scope.row.数量" :min="1" label="描述文字" size="mini" controls-position="right" style="width:100px" @change="handleChange"/>-->
              <!--</template>-->
              <template slot-scope="scope">
                {{ scope.row.数量 }}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="设计者" width="80">
            <template slot-scope="scope">
              {{ scope.row.设计者 }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import { InvoiceListSearch, DetailsFeach } from '@/api/MarketingCenter/ShippingInquiries'
export default {
  data() {
    return {
      tableDataSearchList: [],
      invoiceNumber: '',
      receivingUnit: '',
      invoiceNumber_check: '',
      receivingUnit_check: '',
      listLoading: '',
      tableData: []
    }
  },
  created() {
    this.openSearch()
  },
  methods: {
    openSearch() {
      this.tableDataSearchList = []
      this.invoiceNumber !== null && this.invoiceNumber !== '' ? this.invoiceNumber_check = 1 : this.invoiceNumber_check = 0
      this.receivingUnit !== null && this.receivingUnit !== '' ? this.receivingUnit_check = 1 : this.receivingUnit_check = 0
      InvoiceListSearch(this.invoiceNumber, this.receivingUnit, this.invoiceNumber_check, this.receivingUnit_check).then(response => {
        if (response.data.length !== 0) {
          this.tableDataSearchList = response.data
        }
      })
    },
    searchListItem(row) {
      DetailsFeach(row.发货单流水号).then(response => {
        this.tableData = response.data
      })
    }
  }
}
</script>

<style scoped>

</style>
