<template>
    <el-dialog title="调货" visible :before-close="closeDialog" :close-on-click-modal="false" width="800px">
      <!--调货-->
      <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="150px" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货人">
              {{detail.orderNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人电话">
              {{detail.sumNum}}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择控货订单">
              <el-select v-model="formData.order" placeholder="请选择控货中的订单" multiple>
                <el-option :label="1" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table :data="[formData,formData]" border>
          <el-table-column label="订单号">
              {{detail.sumNum}}
          </el-table-column>
          <el-table-column label="目的地">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickNum" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="总控货数">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickNum" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="放货箱数">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickNum" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="体积（m³）">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickVolume" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="重量（kg）">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickWeight" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item label="备注" prop="remarks" class="mt-10">
          <el-input v-model="formData.remarks" clearable></el-input>
        </el-form-item>
        <el-form-item label="控货手机号" prop="field117" style="margin-top:20px">
          {{detail.consigneeCountryCode}} {{detail.phone}}
        </el-form-item>
        <el-form-item label="手机验证码" prop="code">
          <el-input v-model="formData.code" placeholder="请输入手机验证码" clearable class="w-150 mr-10"></el-input>
          <send-sms-code :order-id="detail.orderId" scene="5" />
        </el-form-item>
        <el-form-item label="" style="margin-top:20px">
          <el-button type="success" @click="submit">提交申请</el-button>
          <el-button type="default" @click="closeDialog">关闭</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
</template>
<script>
import {createPick, getRleaseInfo} from '@/api/ecw/orderCargoControl'
import AreaCodeSelector from '@/components/AreaCodeSelector'
import SendSmsCode from '@/views/ecw/order/components/SendSmsCode'
export default {
    props:{
        orderId: [String, Number]
    },
    components: {AreaCodeSelector, SendSmsCode},
    data(){
        return {
            show: false,
            detail: null,
            formData:{
              "pickNum": 0,
              "pickQuantity": 0,
              "pickVolume": 0,
              "pickWeight": 0,
              "remarks": "",
            },
            rules:{
              consigneeName: {required: true, message: '请填写收货人'},
              code: {required: true, message: '请填写验证码'}
            },
        }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
            getRleaseInfo(this.orderId).then(res => this.detail = res.data)
        },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        submit(){
          this.$refs.form.validate(valid => {
            if(!valid){
              return false
            }
            console.log('submit')
            
          })
          

        }
    }
}
</script>
<style lang="scss" scoped>
.title{
  font-size:16px;
  margin:20px 0;
  display:flex;
  align-items:center;
  &:before{
    content: '';
    width:5px;
    height: 15px;
    background:#666;
    margin-right:10px;
  }
}
</style>