<template>
  <div>
    <el-dialog
      title="订单明细"
      width="80%"
      :visible.sync="idOrderDetail"
      :before-close="handleClose">
      <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="soType">
        <el-select multiple @change="soTypeChange" v-model="formInline.soType">
          <template v-for="item in $keys.stockOut.soType">
            <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
          </template>
        </el-select>
        </el-form-item>
        <el-form-item label="路线" prop="lineName">
          <PublicQuery
          title="路线"
          cfgKey="tesLine"
          baseUrl="/oub_web/oubweb"
          :valueField.sync="formInline.lin"
          :textField.sync="formInline.lineName">
          </PublicQuery>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="formInline.logisticNo"></el-input>
        </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="承运商" prop="carrierCode">
          <PublicQuery
          title="承运商"
          cfgKey="OUB_TRANSPORT_SUPPLIER"
          baseUrl="/oub_web/oubweb"
          :valueField.sync="formInline.carrierCode"
          :textField.sync="formInline.lssuSupplierName">
          </PublicQuery>
        </el-form-item>
        <el-form-item
          label="收货人"
          prop="consigneeCode">
          <PublicQuery
          title="收货人"
          single
          baseUrl="/oub_web/oubweb"
          cfgKey="oubWmsConsigneeName"
          :valueField.sync="formInline.consigneeCode">
          </PublicQuery>
        </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
              prop="ownerName"
              label="货主">
            </el-table-column>
            <el-table-column
              prop="logisticNo"
              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
              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>
export default {
  data () {
    return {
      activeNames: ['1'],
      formInline: {
        soNo: '',
        ebcuNameCn: '',
        ownerCode: '',
        soType: '',
        lineName: '',
        line: '',
        logisticNo: '',
        fmEtd: '',
        toEtd: '',
        lssuSupplierName: '',
        carrierCode: '',
        consigneeCode: ''
      },
      detailData: []
    }
  },
  props: {
    idOrderDetail: Boolean,
    idNo: String
  },
  methods: {
    handleClose () {
      this.$emit('handleClose')
    },
    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.getAuertSo
      this.$https.post(getCancelShipment, this.formInline).then(res => {
        this.detailData = res.rows
      })
    },
    doReset () {
      this.formInline.soNo = ''
      this.formInline.ebcuNameCn = ''
      this.formInline.ownerCode = ''
      this.formInline.soType = ''
      this.formInline.lineName = ''
      this.formInline.line = ''
      this.formInline.logisticNo = ''
      this.formInline.fmEtd = ''
      this.formInline.toEtd = ''
      this.formInline.lssuSupplierName = ''
      this.formInline.carrierCode = ''
      this.formInline.consigneeCode = ''
    },
    handleSelectionDetailDataChange (val) {
      this.DetailDataChange = val.map(item => {
        return item.allocId
      })
    },
    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('handleClose')
      //   // this.doUpdta()
      // })
    },
    soTypeChange () {

    }
  }
}
</script>

<style>

</style>
