<template>
  <div class="form" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-form ref="form">
      <!-- 数字货币 -->
      <van-field
        v-model="form.currency"
        :border="false"
        name="currency"
        @click="currencyPopup = true"
        :rules="[{ required: true, message: '' }]"
        :label="$t('account.l33')"
        autocomplete="off"
        input-align="right"
      >
        <template #input>
          <div class="select-box flex">
            <div v-if="form.currency">{{ form.currency }}</div>
            <div v-else>
              <!-- 未选择 -->
              {{ $t('fund.l11') }}
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </template>
      </van-field>
      <!-- 钱包地址 -->
      <van-field
        :border="false"
        :rules="[{ required: true, message: '' }]"
        v-model="form.address"
        :label="$t('fund.l13')"
        autocomplete="off"
        input-align="right"
        :placeholder="$t('fund.l1')"
      />
    </van-form>
    <van-popup v-model="currencyPopup" round position="bottom">
      <currencyList pay="1" type="2" :currency="form.currency" @success="currencyBack" @cancel="currencyPopup = false"/>
    </van-popup>
    <van-popup v-model="safetyVerificationPop" position="right" :style="{ width: '100%' }">
      <safetyVerification v-if="safetyVerificationPop" @success="insertCollectionAccount" @cancel="safetyVerificationPop = false"/>
    </van-popup>
  </div>
</template>
<script>
import currencyList from "@/components/currencyList";
import { insertCollectionAccount } from "@/api/user";
import safetyVerification from "@/components/safetyVerification";
import { delSession } from '@/utils/sessionStorage'
export default {
  components: {
    currencyList,
    safetyVerification
  },
  data() {
    return {
      form: {
        currency: "",
        address: "",
      },
      safetyVerificationPop: false,
      currencyPopup: false
    };
  },
  methods: {
    validate() {
      this.$refs["form"].validate().then((res) => {
        this.safetyVerificationPop = true
        
      })
      .catch((err) => {});
    },
    insertCollectionAccount(verifyCode) {
      var data = {
      type: 3,
      verifyCode: verifyCode,
      currency: this.form.currency,
      value: JSON.stringify(this.form),
    };
    this.fullscreenLoading = true
    insertCollectionAccount(data)
      .then((res) => {
        this.$notify({
          // message: '添加成功',
          message: this.$t('fund.l6'),
          type: "success",
        });
        delSession('phoneToken')
        this.safetyVerificationPop = false
        this.$router.replace('/add-pay-success')
      })
      .catch(() => {})
      .finally(() => {
        this.fullscreenLoading = false;
      });
    },
    currencyBack(item) {
      this.form.currency = item.symbol
      this.currencyPopup = false
      this.$refs["form"].resetValidation('currency')
    }
  },
};
</script>
<style lang="less" scoped>
.van-field + .van-field {
  margin-bottom: 1px;
}

.select-box {
  column-gap: 3px;
  cursor: pointer;
  .el-icon-arrow-right {
    color: #c3c3c3;
    font-weight: 600;
  }
}
</style>