<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 外部转账 -->
        {{ $t('account.l8') }}
      </div>
      
    </van-sticky>
    <div class="container">
      <div class="box flex" @click="$router.push('/convert/uid')">
        <div class="left">
          <van-image
            width="35"
            height="35"
            round
            fit="cover"
            src="/img/user/usd.png?14"
          />
          <div>
            <div class="name">
              <!-- 美元钱包账户 -->
              {{ $t('account.l1') }}
            </div>
            <div>{{ $t('common.l33') }} {{ $numToThousand($handleDigits2(cashInfo.balance)) }} USD</div>
          </div>
        </div>
        <div class="right flex">
          <div>
            <!-- 划转 -->
            {{ $t('home.l15') }}
          </div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="section flex">
        <div class="title flex">
          <div>
            <!-- 转入账户 -->
            {{ $t('fund.l95') }}
          </div>
          <div v-if="type == 2" class="phone" @click="countryShow">+{{ phoneCountry.area_code }}</div>
        </div>
        <!--请输入电子邮箱 请输入手机号码 -->
        <van-field :placeholder="type == 1 ? $t('fund.l96') : $t('login.l1')" :border="false" v-model="account" />
        <img v-show="type == 2" @click="type = 1" class="icon" src="/img/transfer/email.png" alt="极度证券">
        <img v-show="type == 1" @click="type = 2" class="icon" src="/img/transfer/phone.png" alt="极度证券">
      </div>
      <div class="section1">
        <div class="title">
          <!-- 转账金额 -->
          {{ $t('fund.l97') }}
        </div>
        <div class="input-box flex">
          <!-- 请输入转账金额 -->
          <van-field :placeholder="$t('fund.l124')" :border="false" v-model="amount" type="number" />
          <div>USD</div>
        </div>
        <div class="info">
          <div class="flex">
            <div>
              <!-- 可用转账金额 -->
              {{ $t('fund.l98') }}:
            </div>
            <div class="val">{{ $numToThousand($handleDigits2(cashInfo.balance)) }} USD</div>
          </div>
          <div class="flex" v-if="classify.User">
            <div>
              <!-- 手续费 -->
              {{ $t('exchange.l20') }}(USD):
            </div>
            <div class="val">{{ classify.User }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <div class="btn" @click="userExchange">
        <!-- 确定 -->
        {{ $t('common.l50') }}
      </div>
    </div>
    <selectCountry :val="phoneCountry" ref="country" @back="selectCountryBack"/>
  </div>
</template>
<script>
import bus from '@/utils/bus'
import { mapGetters } from "vuex";
import { getParams, userExchange } from "@/api/assets";
import selectCountry from "@/components/selectCountry";
export default {
  components: {
    selectCountry
  },
  data () {
    return {
      amount: '',
      account: '',
      type: 1,
      classify: {},
      phoneCountry: {
        "name": "China (中国)",
        "code": "cn",
        "area_code": "86"
      }
    }
  },
  computed: {
    ...mapGetters(['cashInfo']),
  },
  watch: {
    amount(val) {
      if (val == '-') {
        this.amount = ''
      }
    }
  },
  created () {
    bus.$emit('updateAssets', ['getCash'])
    this.getParams()
  },
  methods: {
    userExchange() {
      if (this.userInfo.group == 9999) {
        bus.$emit('abnormalPopSign')
        return
      }
      if (!this.account.trim()) {
        // this.$toast('请选择转入账户');
        this.$toast(this.$t('fund.l99'));
        return
      }
      if (!this.amount.trim()) {
        // this.$toast('请输入转账金额');
        this.$toast(this.$t('fund.l100'));
        return
      }
      if (Number(this.amount.trim()) > this.cashInfo.balance) {
        // this.$toast(`可转金额不足`);
        this.$toast(this.$t('fund.l101'));
        return
      }
      this.fullscreenLoading = true
      var account = this.account;
      if (this.type == 2) {
        account = this.phoneCountry.area_code + account
      }
      userExchange({
        account: account,
        amount: this.amount
      }).then(res => {
        this.$notify({
          // message: '操作成功',
          message: this.$t('common.l52'),
          type: 'success'
        });
        this.$router.back()
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      });
    },
    getParams() {
      getParams({
        type: 'Exchange',
        title: 'fee'
      }).then(res => {
        var list = res.list || []
        if (list[0]) {
          this.classify = list[0].value ? JSON.parse(list[0].value) : {}
        }
      }).catch(() => {})
    },
    countryShow() {
      this.$refs['country'].reset()
    },
    selectCountryBack(val) {
      this.phoneCountry = val
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  padding-bottom: 90px;
  min-height: 100vh;
}
.sticky {
  margin-bottom: 8px;
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.container {
  padding: 7px 18px;
}
.box {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  background-color: var(--bg-);
  padding: 16px 12px;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 10px;
  .left {
    display: flex;
    align-items: center;
    column-gap: 6px;
    font-size: 12px;
    color: #828282;
  }
  .name {
    font-size: 16px;
    color: #000000;
    margin-bottom: 8px;
  }
  .right {
    font-size: 14px;
  }
  .el-icon-arrow-right {
    font-weight: 600;
    color: #8B8B8B;
  }
  .btn {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #CACACA;
    line-height: 31px;
    min-width: 66px;
    cursor: pointer;
    padding: 0 5px;
    text-align: center;
    color: #000000;
    font-size: 14px;
  }
}
.section {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 0 12px;
  background-color: var(--bg-);
  height: 54px;
  margin-bottom: 10px;
  .title {
    font-size: 16px;
    color: #000000;
  }
  .phone {
    padding-left: 6px;
  }
  .van-field {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .icon {
    width: 20px;
    opacity: 0.5;
  }
}
.section1 {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  background-color: var(--bg-);
  padding: 16px 12px 20px;
  .title {
    font-size: 18px;
    color: var(--color-1-);
    font-weight: 500;
    margin-bottom: 17px;
  }
  .input-box {
    font-weight: 600;
    color: #232323;
    border-bottom: 1px solid #EFEFEF;
    margin-bottom: 17px;
    font-size: 20px;
  }
  .van-field {
    padding: 0 10px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 58px;
  }
  .info {
    font-size: 12px;
    color: #8B8B8B;
    .flex {
      justify-content: space-between;
      &+.flex {
        margin-top: 13px;
      }
    }
    .val {
      color: #232323;
    }
  }
}
.btn-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: #F7F8FA;
  padding: 12px 18px 24px;
  .btn {
    cursor: pointer;
    line-height: 44px;
    text-align: center;
    background-color: #000;
    color: #FEFFFF;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>