<template>
    <el-dialog :title="$t('取消放货')" visible :before-close="closeDialog" :close-on-click-modal="false" width="800px">
      <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="150px" v-if="detail" >
        <el-form-item :label="$t('订单号')">
            {{order.orderNo}}
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('收货人')">
              {{detail.consigneeName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('收货人电话')">
             +{{detail.consigneeCountryCode}} {{detail.consigneePhone}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="$t('总控货箱数')">
            {{order.sumNum}}
        </el-form-item>

        <el-form-item :label="$t('取消放货原因')" prop="cancelPickType">
            <dict-selector :type="DICT_TYPE.ECW_CANCEL_PICK_TYPE" v-model="formData.cancelPickType" form-type="radio" />
        </el-form-item>

        <el-form-item :label="$t('上传凭证')">
          <image-upload v-model="formData.voucher" />
        </el-form-item>
        
        <el-form-item :label="$t('控货手机号')">
            +{{detail.dialCode}} {{detail.phone}}
        </el-form-item>
        <el-form-item :label="$t('手机验证码')">
            <el-input v-model="formData.code" placeholder="" style="width: 100px; margin-right:10px"></el-input>
            <send-sms-code :order-id="order.orderId" :scene="5" />
        </el-form-item>

        <div class="title">{{$t('审批流程')}}</div>
        <work-flow xmlkey="cancel_goods" v-model="ccIdArr"  />

        <el-form-item label="">
            <el-button type="primary" @click="submit">{{$t('提交申请')}}</el-button>
            <el-button @click="closeDialog">{{$t('关闭')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>
<script>
import {createPick, getReleaseInfo, seasoningCondimentsSelect, updateApply} from '@/api/ecw/orderCargoControl'
import AreaCodeSelector from '@/components/AreaCodeSelector'
import SendSmsCode from '@/views/ecw/order/components/SendSmsCode'
import WorkFlow from '@/components/WorkFlow'
import ImageUpload from '@/components/ImageUpload'
export default {
    props:{
        order: Object,
        cargoControlPickId: Number
    },
    components: {AreaCodeSelector, SendSmsCode, WorkFlow, ImageUpload},
    data(){
        return {
            show: false,
            detail: null,
            ccIdArr: [],
            formData:{
              applyType: 10, // 取消审核
              ccIds: ''
            },
            rules:{
              cancelPickType: {required: true, message: this.$t('请选择取消放货类型')},
              code: {required: true, message: this.$t('请填写验证码')}
            },
        }
    },
    watch:{
      ccIdArr(val){
        this.formData.ccIds = val.join(',')
      }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
          getReleaseInfo(this.order.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')
            updateApply(Object.assign({
              cargoControlPickId: this.cargoControlPickId,
              orderBackPageVOList: this.selectedOrders,
              orderId: this.order.orderId
            }, this.formData)).then(res => {
              this.$message.success(this.$t('操作成功'))
              this.show = false
              this.$emit('success')
            })
          })
        }
    }
}
</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>