<template>
  <div class="pop">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon back="cancel" @cancel="cancel"/>
        </div>
        <!-- 存款 -->
        {{ $t('home.l13') }}
      </div>
    </van-sticky>
    <div class="ul">
      <div class="li li1" @click="toRecharge">
        <img class="img" src="/img/deposit/usdt.png" alt="极度证券">
        <div class="right">
          <div class="title">
            <!-- 存入数字货币USDT/BTC -->
            {{ $t('account.l11') }}
          </div>
          <div class="tip flex">
            <!-- 您的私有钱包地址 -->
            <div class="text">{{ $t('account.l12') }}</div>
            <div class="recommend">
              <!-- 推荐渠道 -->
              {{ $t('account.l123') }}
            </div>
          </div>
        </div>
        <img class="icon" src="/img/deposit/right.png" alt="极度证券">
        <div class="tag-box">
          <!-- 自动入账 -->
          {{ $t('account.l87') }}
        </div>
      </div>
      <div class="li" @click="toDeposit('CNY')">
        <img class="img" src="/img/deposit/cny.png" alt="极度证券">
        <div class="right">
          <div class="title title1">
            <!-- 存入人民币 -->
            {{ $t('account.l13') }}
          </div>
        </div>
        <img class="icon" src="/img/deposit/right.png" alt="极度证券">
      </div>
      <div class="li" @click="toDeposit('HKD')">
        <img class="img" src="/img/deposit/hk.png" alt="极度证券">
        <div class="right">
          <div class="title title1">
            <!-- 存入港币 -->
            {{ $t('account.l14') }}
          </div>
        </div>
        <img class="icon" src="/img/deposit/right.png" alt="极度证券">
      </div>
      <div class="li" @click="toDeposit('USD')">
        <img class="img" src="/img/deposit/usd.png" alt="极度证券">
        <div class="right">
          <div class="title title1">
            <!-- 存入美元 -->
            {{ $t('account.l15') }}
          </div>
        </div>
        <img class="icon" src="/img/deposit/right.png" alt="极度证券">
      </div>
      <div class="li" @click="$router.push(url)">
        <img class="img" src="/img/deposit/other.png" alt="极度证券">
        <div class="right">
          <div class="title title1">
            <!-- 存入其他法币 -->
            {{ $t('account.l16') }}
          </div>
        </div>
        <img class="icon" src="/img/deposit/right.png" alt="极度证券">
      </div>
      <div class="li" @click="$router.push(url)">
        <img class="img" src="/img/deposit/icon1.png" alt="极度证券">
        <div class="right">
          <div class="title title1">
            <!-- 电子钱包 -->
            {{ $t('account.l17') }}
          </div>
        </div>
        <img class="icon" src="/img/deposit/right.png" alt="极度证券">
      </div>
      <a :href="fundingUrl" target="help" class="href">- {{ $t('account.l18') }} -</a>
    </div>
  </div>
</template>
<script>
import { setSession } from "@/utils/sessionStorage";
export default {
  props: {
    url: {
      default: '/deposit'
    }
  },
  data () {
    return {
      
    }
  },
  computed: {
    helpUrl() {
      if (window.location.hostname == 'localhost') {
        return 'https://help.jdnx.com/'
      }
      var hostname = ''
      if (window.location.hostname.indexOf('m.') !== -1) {
        hostname = window.location.hostname.replace('m.', 'help.')
      } else {
        hostname = 'help.' + window.location.hostname
      }
      return window.location.protocol + '//' + hostname + '/'
    },
    fundingUrl() {
      if (this.language == 'zh-CN') {
        return `${this.helpUrl}detail.html?type=1&id=3&language=${this.language}`
      }
      if (this.language == 'zh-TW') {
        return `${this.helpUrl}detail.html?type=1&id=115&language=${this.language}`
      }
      return `${this.helpUrl}detail.html?type=1&id=68&language=${this.language}`
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    toDeposit(currency) {
      setSession('depositCurrency', {
        symbol: currency
      })
      this.cancel()
      this.$router.push(this.url)
    },
    toRecharge() {
      this.cancel()
      this.$router.push(this.url.replace('deposit', 'recharge'))
    }
  }
}
</script>
<style lang="less" scoped>
.pop {
  min-height: 100vh;
}
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--bg-);
  line-height: 18px;
  margin-bottom: 3px;
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.ul {
  padding: 0 17px 18px;
}
.li {
  background: #FAFBFC;
  border-radius: 5px;
  border: 1px solid #E6E6E6;
  position: relative;
  cursor: pointer;
  padding: 18px 30px 17px 21px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  &.li1 {
    overflow: hidden;
  }
  .img {
    width: 41px;
    margin-right: 13px;
  }
  .title {
    font-size: 12px;
    font-weight: 600;
    color: #0D0D0D;
  }
  .title1 {
    padding-top: 13px;
  }
  .tip {
    font-size: 10px;
    color: #B8B8B8;
    line-height: 12px;
    margin-top: 5px;
    .text {
      padding-right: 4px;
      flex: 1;
      min-width: 20%;
    }
    .recommend {
      border-radius: 3px;
      border: 1px solid #1BA27A;
      font-size: 10px;
      color: #1BA27A;
      line-height: 1;
      padding: 3px 2px;
    }
  }
  .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 21px;
    width: 7px;
  }
}
.tag-box {
  background: linear-gradient(211deg, #FFFFFF -22%, #007BF1 80%);
  border-radius: 0px 4px 0px 9px;
  padding: 6px;
  position: absolute;
  top: 0px;
  right: 0px;
  color: #FFFFFF;
  font-size: 11px;
}
.href {
  text-align: center;
  cursor: pointer;
  color: #267DFF;
  font-size: 12px;
  font-weight: 600;
  display: block;
}
</style>