<template>
  <div>
    <el-dialog title="待装车明细" :visible.sync="isAddPick" :before-close="doCloseDialog" width="80%">
      <div style="margin-bottom: 15px;">
        <el-button @click="doQuery" type="primary">查询</el-button>
        <el-button @click="doReset" type="primary">重置</el-button>
        <el-button @click="doConfirm" type="primary">确认</el-button>
      </div>
      <el-form :inline="true" :model="formInline">
        <el-form-item label="出库单号">
          <el-input v-model="formInline.soNo"></el-input>
        </el-form-item>
        <el-form-item label="货主" prop="ebcuNameCn">
          <PublicQuery
          title="货主"
          cfgKey="oubWmsCustomer"
          baseUrl="/oub_web/oubweb"
          :valueField.sync="formInline.ownerCode"
          :textField.sync="formInline.ebcuNameCn">
          </PublicQuery>
        </el-form-item>
        <el-form-item label="商品" prop="skuName">
          <PublicQuery
          title="商品"
          cfgKey="oubWmsSku"
          baseUrl="/oub_web/oubweb"
          :valueField.sync="formInline.skuCode"
          :textField.sync="formInline.skuName">
          </PublicQuery>
        </el-form-item>
        <el-form-item label="预计发货时间从">
          <el-date-picker
            v-model="formInline.fmEtd"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计发货时间到">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="formInline.toEtd"></el-date-picker>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="formInline.logisticNo"></el-input>
        </el-form-item>
      </el-form>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="明细列表" name="1">
          <el-table
            :data="detailData"
            style="width: 100%"
            @selection-change="handleSelectionDetailDataChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="出库单号"
              prop="soNo">
            </el-table-column>
            <el-table-column
              label="分配ID"
              prop="allocId">
            </el-table-column>
            <el-table-column
              prop="ownerName"
              label="货主">
            </el-table-column>
            <el-table-column
              prop="logisticNo"
              label="物流单号">
            </el-table-column>
            <el-table-column
              prop="skuName"
              label="商品">
            </el-table-column>
            <el-table-column
              label="状态">
              <template
                slot-scope="scope"
              >{{ $utils.keyMatcher(scope.row.status, $keys.stockOut.status).name }}</template>
            </el-table-column>
            <el-table-column
              label="出库单类型">
              <template
                slot-scope="scope"
              >{{ $utils.keyMatcher(scope.row.soType, $keys.stockOut.soType).name }}</template>
            </el-table-column>
            <el-table-column
              prop="uomDesc"
              label="包装单位">
            </el-table-column>
            <el-table-column
              prop="qtyUom"
              label="数量">
            </el-table-column>
            <el-table-column
              label="预计发货时间">
              <template
                slot-scope="scope"
              >从: {{scope.row.fmEtd}}<br/>到: {{scope.row.toEtd}}</template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
// function FormInline() {
//   this.soNo = ''
//   this.ebcuNameCn = ''
//   this.ownerCode = ''
//   this.skuName = ''
//   this.skuCode = ''
//   this.fmEtd = ''
//   this.toEtd = ''
//   this.logisticNo = ''
// }
export default {
  data () {
    return {
      activeNames: ['1'],
      formInline: {
        soNo: '',
        ebcuNameCn: '',
        ownerCode: '',
        skuName: '',
        skuCode: '',
        fmEtd: '',
        toEtd: '',
        logisticNo: ''
      },
      detailData: [],
      detailDataChange: []
    }
  },
  props: {
    isAddPick: Boolean,
    idNo: String
  },
  methods: {
    doCloseDialog () {
      this.$emit('dialogClose')
    },
    doQuery () {
      this.formInline.fmEtd = this.$utils.time.formatTime(this.formInline.fmEtd)
      this.formInline.toEtd = this.$utils.time.formatTime(this.formInline.toEtd)
      const getCancelShipment = this.$API.stockOut.loadingList.getQueryNotLoadByParams
      this.$https.post(getCancelShipment, this.formInline).then(res => {
        this.detailData = res.rows
        // this.doUpdta()
      })
    },
    doReset () {
      this.formInline.soNo = ''
      this.formInline.ebcuNameCn = ''
      this.formInline.ownerCode = ''
      this.formInline.skuName = ''
      this.formInline.skuCode = ''
      this.formInline.fmEtd = ''
      this.formInline.toEtd = ''
      this.formInline.logisticNo = ''
    },
    doConfirm () {
      if (!this.DetailDataChange.length) {
        this.$message('请选着一条记录')
        return false
      }
      const param = {
        ldNo: this.idNo,
        allocIds: this.DetailDataChange.join(',')
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getAddDetail
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.$emit('doUpdataPage')
        this.$emit('dialogClose')
        // this.doUpdta()
      })
    },
    handleSelectionDetailDataChange (val) {
      this.DetailDataChange = val.map(item => {
        return item.allocId
      })
    }
  }
}
</script>
