<template>
  <div class="app-container">
    <el-card>
      <el-input v-model="invoiceNumber" placeholder="请输入发货单号" clearable style="width: 150px;margin-right: 10px" size="mini"/>
      <el-input v-model="receivingUnit" placeholder="请输入收货单位" clearable style="width: 150px;margin-right: 10px" size="mini"/>
      <el-button type="success" icon="el-icon-menu" size="mini" style="margin-left: 10px" @click="openSearch">查询</el-button>
    </el-card>
    <el-card>
      <el-table
        :data="tableDataSearchList"
        style="width: 100%; max-height: 500px"
        height="650"
        border
        stripe
        size="mini"
        highlight-current-row
        @row-click="searchListItem">
        <!--      <el-table-->
        <!--        :data="tableDataSearchList"-->
        <!--        highlight-current-row-->
        <!--        style="width: 100%; max-height: 500px"-->
        <!--        border-->
        <!--        size="mini"-->
        <!--        @row-click="searchListItem">-->
        <el-table-column align="center" label="状态" width="60px">
          <template slot-scope="scope">
            {{ scope.row.是否发出.toString() === '1' ? '已发出' : '未发出' }}
          </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="发货单名">
          <template slot-scope="scope">
            {{ scope.row.发货单名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="收货单位" width="180px">
          <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="80px">
          <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="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="司机电话">
          <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="发货人">
          <template slot-scope="scope">
            {{ scope.row.发货人 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="制单时间" show-overflow-tooltip>
          <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-column align="center" label="审核时间">
          <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-column align="center" label="发货时间">
          <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-card>
    <el-card>
      <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">
            <el-tag effect="dark" size="small" type="success">{{ scope.row.货品类别 }}</el-tag>
          </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="货品规格">
          <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="130">
          <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 v-else>
              {{ 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-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) {
          console.log(response)
          this.tableDataSearchList = response.data
        }
      })
    },
    searchListItem(row) {
      DetailsFeach(row.发货单流水号).then(response => {
        this.tableData = response.data
      })
    }
  }
}
</script>

<style scoped>

</style>
