<template>
  <el-dialog
    :title="title"
    visible
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="1000px"
  >
    <el-form
      v-if="agreement"
      ref="form"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('release.orderNo')">
            {{ detail.orderNo }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumNum')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumVolume')"> {{ detail.sumVolume }}m³ </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumWeight')"> {{ detail.sumWeight }}kg </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumConNum')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.remainNum')">
            {{ detail.sumNum - detail.releaseNum }}
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">{{ $t('release.releaseNotice') }}</div>
      <div class="flex">
        <el-form-item :label="$t('release.consigneeName')" prop="consigneeName">
          <el-input
            v-model="formData.consigneeName"
            :placeholder="$t('release.consigneeNameNotice')"
            clearable
            :disabled="isSuccess"
            class="w-150"
          />
        </el-form-item>
        <el-form-item :label="$t('release.consigneePhone')" prop="consigneePhone">
          <el-input
            v-model="formData.consigneePhone"
            :placeholder="$t('release.consigneePhoneNotice')"
            clearable
            :disabled="isSuccess"
            class="w-250 ml-10"
          >
            <el-select slot="prepend" v-model="formData.consigneeCountryCode" placeholder="" style="width:100px">
              <el-option v-for="item in countryList" :key="item.id" :label="item.nameZh + item.tel" :value="item.tel.replace('+', '')" />
            </el-select></el-input>
        </el-form-item>
        <el-form-item :label="$t('release.consigneeEmail')" prop="consigneeEmail">
          <el-input
            v-model="formData.consigneeEmail"
            :placeholder="$t('release.consigneeEmailNotice')"
            clearable
            :disabled="isSuccess"
            class="w-150"
          />
        </el-form-item>
      </div>
      <el-table :data="[formData]" border>
        <el-table-column :label="$t('release.conNum')">
          {{ detail.sumNum }}
        </el-table-column>
        <el-table-column v-if="!isSuccess" :label="$t('release.pickNum')">
          {{ detail.sumNum - detail.releaseNum }}
        </el-table-column>
        <el-table-column v-else :label="$t('release.pickNum')">
          {{ detail.releaseNum }}
        </el-table-column>
        <el-table-column :label="$t('release.pickVolume')">
          {{ detail.sumVolume }}
        </el-table-column>
        <el-table-column :label="$t('release.pickWeight')">
          {{ detail.sumWeight }}
        </el-table-column>
        <el-table-column :label="$t('release.remarks')">
          <template slot-scope="{ row }">
            <el-input v-model="row.remarks" placeholder="" clearable :disabled="isSuccess" />
          </template>
        </el-table-column>
      </el-table>
      <el-form-item v-if="!isSuccess" :label="$t('release.phone')" prop="field117" style="margin-top: 20px">
        <el-input
          :value="detail.phone"
          readonly
          :placeholder="$t('release.phoneNotice')"
        >
          <el-select slot="prepend" v-model="detail.dialCode" disabled style="width:100px">
            <el-option v-for="item in countryList" :key="item.id" :label="item.nameZh + item.tel" :value="item.tel.replace('+', '')" />
          </el-select></el-input>
      </el-form-item>
      <el-form-item v-if="!isSuccess" :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="!isSuccess&&radio==0" :label="$t('release.code')" prop="code">
        <el-input
          v-model="formData.code"
          :placeholder="$t('release.codeNotice')"
          clearable
          class="w-150 mr-10"
          auto-complete="new-password"
        />
        <!-- <el-button type="success">获取验证码</el-button> -->
        <send-sms-code :order-id="detail.orderId" scene="5" />
      </el-form-item>
      <el-form-item v-if="!isSuccess&&radio==1" :label="$t('setting.controlPassword')" prop="controlPassword">
        <el-input
          v-if="hasPassword"
          v-model="formData.controlPassword"
          clearable
          type="password"
          class="w-150 mr-10"
          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="" style="margin-top: 20px">
        <template v-if="!isSuccess">
          <el-button type="success" @click="submit">{{ $t('release.submit') }}</el-button>
          <el-button type="default" @click="closeDialog">{{ $t('release.close') }}</el-button>
        </template>
        <el-button v-else type="primary" @click="closeDialog">{{ $t('common.close') }}</el-button>
      </el-form-item>
    </el-form>

    <div v-else>
      <release-agreement />
      <div style="margin-top: 30px">
        <el-button type="primary" @click="agreement = true">{{ $t('release.agree') }}</el-button>
        <el-button @click="closeDialog">{{ $t('release.close') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import ReleaseAgreement from './ReleaseAgreement'
import { createPick, getRleaseInfo } from '@/api/order'
import { list } from '@/api/country'
import SendSmsCode from './SendSmsCode'
import { checkControlPwd } from '@/api/user'
export default {
  components: { ReleaseAgreement, SendSmsCode },
  props: {
    orderId: [String, Number]
  },
  data() {
    return {
      radio: 0,
      show: false,
      detail: null,
      formData: {
        consigneeCountryCode: '',
        pickNum: 0,
        pickQuantity: 0,
        pickVolume: 0,
        pickWeight: 0,
        consigneeName: '',
        consigneePhone: '',
        consigneeEmail: '',
        remarks: ''
      },
      countryList: [],
      rules: {
        consigneeName: { required: true, message: this.$t('release.consigneeNameRules') }
        /* code: { required: true, message: this.$t('release.codeRules') },
        controlPassword: { required: true, message: this.$t('release.codeRules') } */
      },
      agreement: false, // 是否同意协议,
      // 是否设置控货密码
      hasPassword: false,
      // 是否放货成功
      isSuccess: false
    }
  },
  computed: {
    title() {
      let t = this.$t('release.release')
      if (this.detail) {
        t += '-' + this.detail.orderNo
      }
      if (this.isSuccess) {
        t = this.$t('release.releaseSuccess')
      }
      return t
    }
  },
  created() {
    this.loadData()
    list().then(res => {
      this.countryList = res.data
    })

    // 查询是否有设置控货密码
    checkControlPwd(this.orderId).then(res => {
      console.log('hasPassword', res)
      this.hasPassword = res.data
    })
  },
  methods: {
    loadData() {
      getRleaseInfo(this.orderId).then((res) => {
        this.detail = res.data
        if (!this.isSuccess) {
          this.formData.consigneeName = this.detail.consigneeName
          this.formData.consigneePhone = this.detail.consigneePhone
          this.formData.consigneeEmail = this.detail.consigneeEmail
          this.formData.consigneeCountryCode = this.detail.consigneeCountryCode
        } else {
          this.formData.consigneeName = this.detail.cargoControlPickBackVOList[0].consigneeName
          this.formData.consigneePhone = this.detail.cargoControlPickBackVOList[0].consigneePhone
          this.formData.consigneeEmail = this.detail.cargoControlPickBackVOList[0].consigneeEmail
          this.formData.consigneeCountryCode = this.detail.cargoControlPickBackVOList[0].consigneeCountryCode
        }
      })
    },
    closeDialog() {
      this.show = false
      this.$emit('close')
    },
    submit() {
      this.formData.pickNum = this.detail.sumNum - this.detail.releaseNum
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        if (!this.formData.code && !this.formData.controlPassword) {
          return this.$message.error(this.$t('release.VerifyNotice'))
        }
        const data = Object.assign({
          orderId: this.orderId,
          phone: this.detail.phone,
          countryCode: this.detail.dialCode
        }, this.formData)
        createPick(data).then((res) => {
          this.$message.success(res.msg || this.$t('common.success'))
          this.isSuccess = true
          this.loadData()
        })
      })
    }
  }
}
</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>
