<template>
  <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false">
    <div v-if="agreement" class="">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px">
        <el-form-item :label="$t('transfer.cargoControlName')">
          <el-input v-model="cargoControlName" readonly />
        </el-form-item>
        <el-form-item :label="$t('transfer.cargoControlPhone')">
          <el-input v-model="cargoControlPhone" readonly>
            <el-select slot="prepend" v-model="cargoControlCountryCode" disabled style="width:200px">
              <el-option v-for="item in countryList" :key="item.id" :label="$i18n.locale==='zh_CN'?item.nameZh:item.nameEn + item.tel" :value="item.tel.replace('+', '')" />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('transfer.name')" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item :label="$t('transfer.phone')" prop="phone">
          <el-input v-model="form.phone" type="tel">
            <el-select slot="prepend" v-model="form.dialCode" placeholder="" style="width:200px">
              <el-option v-for="item in countryList" :key="item.id" :label="$i18n.locale==='zh_CN'?item.nameZh:item.nameEn + item.tel" :value="item.tel.replace('+', '')" />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('transfer.email')" prop="email">
          <el-input v-model="form.email" type="email" />
        </el-form-item>
        <el-form-item :label="$t('release.deliverymode')">
          <el-radio v-model="radio" :label="0">{{ $t('release.code') }}</el-radio>
          <el-radio v-model="radio" :label="1">{{ $t('setting.controlPassword') }}</el-radio>
        </el-form-item>
        <el-form-item v-if="radio==0" :label="$t('release.code')" prop="code">
          <el-input v-model.number="form.code" type="number">
            <send-sms-code slot="append" :form="{
                            orderId: orderId,
                            nodeValue: 'transfer-control-goods',
                            isTransport: 0,
                            transportId: 0,
                            isOrders: 0,
                          }"
                        />
          </el-input></el-form-item>
        <el-form-item v-if="radio==1" :label="$t('setting.controlPassword')" prop="controlPassword">
          <el-input
            v-if="hasPassword"
            v-model="form.controlPassword"
            clearable
            type="password"
            auto-complete="new-password"
          />
          <el-button v-else type="text" @click="$router.replace('jd-setting?action=setControlPassword')">
            {{ $t('setting.setControlPassword') }}
          </el-button>
          {{ $t('release.VerifyNotice') }}
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="submit">{{ $t('transfer.submit') }}</el-button>
        </el-form-item></el-form>
    </div>
    <div v-else>
      <transfer-agreement />
      <div style="margin-top:30px">
        <el-button type="primary" @click="agreement=true">{{ $t('transfer.agree') }}</el-button>
        <el-button @click="closeDialog">{{ $t('transfer.close') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import TransferAgreement from './TransferAgreement'
import { list } from '@/api/country'
import { create } from '@/api/order'
import { checkControlPwd } from '@/api/user'
import SendSmsCode from './SendSmsCode'
export default {
  components: { TransferAgreement, SendSmsCode },
  props: {
    orderId: [String, Number],
    cargoControlName: String,
    cargoControlPhone: String,
    orderNo: String,
    cargoControlCountryCode: String
  },
  data() {
    return {
      show: false,
      // detail: null,
      form: {},
      agreement: false, // 是否同意协议
      countryList: [],
      rules: {
        name: [{ required: true, message: this.$t('transfer.nameRules') }],
        phone: [{ required: true, message: this.$t('transfer.phoneRules') }],
        // email: [{required: true, message: this.$t('请输入控货人')}],
        code: [{ required: true, message: this.$t('transfer.codeRules') }]
      },
      hasPassword: false,
      radio: 0
    }
  },
  computed: {
    title() {
      return this.orderNo
    }
  },
  watch: {
    countryList() {
      if (this.countryList.length) {
        this.$set(this.form, 'dialCode', this.countryList[0].tel.replace('+', ''))
      }
    }
  },
  created() {
    this.show = true
    list().then(res => {
      this.countryList = res.data
    })
    // 查询是否有设置控货密码
    checkControlPwd(this.orderId).then(res => {
      console.log('hasPassword', res)
      this.hasPassword = res.data
    })
  },
  methods: {
    closeDialog() {
      this.show = false
      this.$emit('close')
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        const data = Object.assign({
          orderId: this.orderId,
          orderNo: this.orderNo
        }, this.form)
        create(data)
          .then(res => {
            this.$message.success(res.message || this.$t('common.success'))
            this.closeDialog()
          })
      })
    }
  }
}
</script>
