<template>
    <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false" width="800px">
        <div class="" v-if="agreement">
            <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px">
              <el-form-item :label="$t('原控货人')">
                <el-input v-model="cargoControlName" disabled></el-input>
              </el-form-item>
              <el-form-item :label="$t('原控货手机号')">
                <el-input :value="'+' + cargoControlCountryCode + ' ' + cargoControlPhone" disabled></el-input>
              </el-form-item>
              
              <el-form-item :label="$t('新控货人')" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item :label="$t('新控货手机号')" prop="phone">
                <area-code-selector v-model="form.dialCodeSrc" />
                <el-input v-model="form.phone" type="tel" maxlength="11" class="ml-10 w-200" />
              </el-form-item>
              <el-form-item :label="$t('新控货人邮箱')" prop="email">
                <el-input v-model="form.email" type="email"></el-input>
              </el-form-item>
              <el-form-item :label="$t('手机验证码')" prop="code">
                <el-input v-model.number="form.code" type="number" class="w-200 mr-10"></el-input>
                <send-sms-code :order-id="orderId" scene="4" />
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click="submit">{{$t('确定转移')}}</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div v-else>
            <need-know ref="needKnow" keyname="controltransfer" />
            <div style="margin-top:30px">
                <el-button type="primary" @click="agreement=true">{{$t('我同意')}}</el-button>
                <el-button @click="closeDialog">{{$t('关闭')}}</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import {getCountryListAll} from '@/api/ecw/country'
import SendSmsCode from './SendSmsCode'
import {create} from '@/api/ecw/orderCargoControl'
import NeedKnow from '@/components/NeedKnow'
import AreaCodeSelector from '@/components/AreaCodeSelector'
export default {
    props:{
        orderId: [String, Number],
        cargoControlName: String,
        cargoControlPhone: String,
        cargoControlCountryCode: String,
        orderNo: String,
    },
    components: {SendSmsCode, NeedKnow, AreaCodeSelector},
    data(){
        return {
            show: false,
            // detail: null,
            form:{
              dialCodeSrc: null,
              dialCode: null
            },
            agreement: false, // 是否同意协议
            countryList: [],
            rules:{
              name: [{required: true, message: this.$t('请输入控货人')}],
              phone: [{required: true, message: this.$t('请输入控货人手机')}],
              // email: [{required: true, message: this.$t('请输入控货人')}],
              code: [{required: true, message: this.$t('验证码不能为空')}]
            }
        }
    },
    computed:{
        title(){
            return this.orderNo
        }
    },
    watch:{
      'form.dialCodeSrc'(){
        this.form.dialCode = this.form.dialCodeSrc.replace('+', '')
      }
      /* countryList(){
        if(this.countryList.length){
          this.$set(this.form, 'dialCode', this.countryList[0].tel.replace('+', ''))
        }
      } */
    },
    created(){
        this.show = true
        /* getCountryListAll().then(res => {
          this.countryList = res.data
        }) */
    },
    methods:{
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        submit(){
          this.$refs.form.validate(valid => {
            if(!valid){
              return false
            }
            let data = Object.assign({
              orderId: this.orderId,
              orderNo: this.orderNo
            }, this.form)
            create(data)
              .then(res => {
                this.$message.success(res.message || this.$t('操作成功'))
                this.closeDialog()
              })
          })
          
        }
    }
}
</script>