<template>
    <div class="app-container">
        <el-form :model="form" label-position="left" label-width="120px">
          <el-form-item :label="$t('订单号')" v-if="order">
            {{order.orderNo}}
          </el-form-item>
          <el-form-item label="" v-if="order">
            <div>
                {{$t('箱数')}}：{{order.sumNum}}{{$t('箱')}}
            </div>
            <div>
                {{$t('重量')}}：{{order.sumWeight}}Kg
            </div>
            <div>
                {{$t('体积')}}：{{order.sumVolume}}m³
            </div>
            <div>
                {{$t('数量')}}：{{order.sumQuantity}}{{$t('个')}}
            </div>
          </el-form-item>
          <el-form-item :label="$t('放货方式')">
            <dict-selector :type="DICT_TYPE.ECW_HARVEST_METHOD" v-model="form.pickType" form-type="radio" formatter="number"></dict-selector>
          </el-form-item>
          <el-form-item :label="$t('提货时间')" v-if="form.pickType == 1">
            <el-date-picker v-model="form.pickTime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>

          <template v-if="form.pickType == 2">
            <el-form-item :label="$t('收货人')">
                {{order.consigneeVO.name}}
            </el-form-item>
            <el-form-item :label="$t('收货电话')">
                +{{order.consigneeVO.countryCode}} {{order.consigneeVO.phone}}
            </el-form-item>
            <el-form-item :label="$t('收货地址')">
                <el-input v-model="form.deliverAddress" placeholder=""></el-input>
            </el-form-item>
            <el-form-item :label="$t('快递单号')">
                <el-input v-model="form.trackingNumber" placeholder=""></el-input>
            </el-form-item>
            <el-form-item :label="$t('送货时间')">
                <el-date-picker v-model="form.deliverTime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('签收时间')">
                <el-date-picker v-model="form.pickTime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </template>

          <el-form-item :label="$t('附件')">
            <image-upload v-model="form.attachment" />
          </el-form-item>
          
          <el-form-item :label="$t('备注')">
            <el-input v-model="form.remark" type="textarea" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="submit">{{$t('确认放货')}}</el-button>
            <el-button type="default" @click="$router.back()">{{$t('取消')}}</el-button>
          </el-form-item>          
        </el-form>
    </div>
</template>
<script>
import {getOrder} from '@/api/ecw/order'
import {create} from '@/api/ecw/orderPickup'
import ImageUpload from '@/components/ImageUpload'
export default {
    components: {ImageUpload},
    data(){
        return {
            order: null,
            form: {}
        }
    },
    watch:{
        'form.pickType'(type){
            if(type == 1 && this.order.consigneeVO.address){
                this.$set(this.form, 'deliverAddress', this.order.consigneeVO.address)
            }
        }
    },
    created(){
        this.loadOrderData()
    },
    methods:{
        loadOrderData(){
            getOrder(this.$route.query.orderId).then(res => {
                this.order = res.data
                this.$set(this.form, 'pickType', this.order.consigneeVO.harvestMethod)
            })
        },
        submit(){
            create(Object.assign({orderId: this.order.orderNo}, this.form)).then(res => {
                return this.$alert(res.message || this.$t('操作成功'))
            }).then(res => {
                this.$store.dispatch('tagsView/delCurrentView')
            })
        }
    }
}
</script>