<template>
  <div 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('fund.l53') }}
        <div class="right flex">
          <img class="info" src="/img/deposit/info.png" alt="极度证券" @click="toHelp">
          <img class="info" src="/img/deposit/list.png" alt="极度证券" @click="$router.push('/account-records/1')">
        </div>
      </div>
    </van-sticky>
    <div class="container">
      <div class="qr-box flex" v-if="qrUrl">
        <div class="img-box">
          <img class="qr" :src="qrUrl" alt="极度证券">
          <img class="logo" :src="`/img/icon/${symbol}.png`" alt="极度证券">
        </div>
      </div>
      <div class="label1">
        <!-- 充币地址 -->
        {{ $t('fund.l54') }}
      </div>
      <div class="address-box flex">
        <div class="left">{{ chainInfo.address }}</div>
        <img class="copy" @click="copyText" src="/img/deposit/copy.png">
      </div>
      <div class="info-box flex">
        <img class="info" src="/img/deposit/info1.png">
        <div>
          <!-- 请核对数字货币币种和充值网络 -->
          {{ $t('fund.l55') }}
        </div>
      </div>
      <div class="cell">
        <div class="label">
          <!-- 充币币种 -->
          {{ $t('fund.l56') }}
        </div>
        <div class="select-box flex" @click="symbolShow = true">
          <div class="select">
            {{ symbol }}
          </div>
          <img class="down" src="/img/deposit/down.png">
        </div>
      </div>
      <div class="cell" v-if="chain">
        <div class="label">
          <!-- 充值网络 -->
          {{ $t('fund.l57') }}
        </div>
        <div class="select-box flex" @click="chainShow = true">
          <div class="select">
            {{ chainName[chain] || chain }}
          </div>
          <img class="down" src="/img/deposit/down.png">
        </div>
      </div>
      <div class="cell1">
        <div class="label">
          <!-- 入户帐户 -->
          {{ $t('fund.l58') }}
        </div>
        <div class="select-box flex" @click="accountShow = true">
          <div class="select">
            <!-- 美元钱包账户 -->
            {{ serverName[accountInfo1.server] || $t('account.l1') }}
          </div>
          <!-- 余额 -->
          <div class="balance">{{ $t('common.l33') }}:{{ $numToThousand((accountInfo1.balance)) }}USD</div>
          <img class="down" src="/img/deposit/down.png">
        </div>
      </div>
      <div class="info-box flex">
        <img class="info" src="/img/deposit/info1.png">
        <div>
          <!-- 转入的数字资产将按照实时市价自动存入该账户 -->
          {{ $t('fund.l59') }}
        </div>
      </div>
      <div class="cell2">
        <div class="title">
          <!-- 交易信息 -->
          {{ $t('fund.l60') }}
        </div>
        <div class="col flex">
          <div>
            <!-- 最小充币额 -->
            {{ $t('fund.l61') }}
          </div>
          <div class="val">{{ $handleDigits(params.min_amount) }} {{ symbol }}</div>
        </div>
        <div class="col flex">
          <div>
            <!-- 充币到账 -->
            {{ $t('fund.l62') }}
          </div>
          <div class="val">
            <!-- 1 次网络确认 -->
            {{ $t('fund.l63') }}
          </div>
        </div>
      </div>
    </div>
    <div class="fixed">
      <div class="btn" @click="shareLink">
        <!-- 分享充币详情 -->
        {{ $t('fund.l64') }}
      </div>
    </div>
    <!-- <van-image-preview getContainer="body" v-model="imagePreShow" :showIndex="false" :images="images">
    </van-image-preview> -->
    <van-popup v-model="accountShow" round position="bottom">
      <accountList :list="accountList1" :info="accountInfo1" @success="selectAccountBack"/>
    </van-popup>
    <van-popup v-model="chainShow" round position="bottom">
      <chainList :list="chainList1" :chain="chain" @success="selectChainBack"/>
    </van-popup>
    <van-popup v-model="symbolShow" round position="bottom">
      <symbolList :symbol="symbol" @success="selectSymbolBack"/>
    </van-popup>
  </div>
</template>
<script>
import bus from '@/utils/bus'
import { mapGetters } from "vuex";
import { getCashAddressList, getParams, getCashChainList } from "@/api/assets";
import NativeShare from 'nativeshare'
import { copyText } from '@/utils/index'
import QRCode from 'qrcode'
import accountList from "./components/accountList.vue";
import chainList from "./components/chainList.vue"
import symbolList from "./components/symbolList.vue"
export default {
  components: {
    accountList,
    chainList,
    symbolList
  },
  data () {
    return {
      chain: 'TRON',
      symbol: 'USDT',
      imagePreShow: false,
      accountShow: false,
      chainShow: false,
      symbolShow: false,
      chainList: [],
      cashAddressList: [],
      chainInfo: {},
      qrUrl: '',
      images: [],
      chainName: {},
      feeObj: {

      }
    }
  },
  computed: {
    ...mapGetters(['cashInfo', 'userInfo']),
    accountList1() {
      var list = [this.cashInfo]
      return list
    },
    accountInfo1() {
      return this.cashInfo
    },
    chainList1() {
      return this.chainList
      // return this.chainList.filter(item => item.symbol.indexOf(this.symbol) != -1)
    },
    params() {
      var params = this.feeObj[this.symbol + '_' + this.chainInfo.chain] || {}
      return params
    },
    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 + '/'
    }
  },
  watch: {
    'chainInfo.address'() {
      this.showPre()
    }
  },
  created () {
    bus.$emit('updateAssets', ['getCash'])
    this.getParams()
    this.getCashAddressList()
    this.getCashChainList()
  },
  methods: {
    getCashAddressList() {
      this.fullscreenLoading = true
      getCashAddressList().then(res => {
        this.cashAddressList = res.list || []
        this.cashAddressList.forEach(item => {
          if (item.chain == 'TRON') {
            this.chainInfo = item
          }
        })
        if (!this.chainInfo.chain) {
          this.chainInfo = this.cashAddressList[0] || {}
        }
        this.chain = this.chainInfo.chain || ''
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    getParams() {
      getParams({
        type: 'Deposit',
      }).then((res) => {
        var list = res.list || []
        var obj = {
        }
        list.forEach(item => {
          if (item.title.indexOf('USDT_') !== -1 || item.title.indexOf('USDC_') !== -1) {
            obj[item.title] = item.value ? JSON.parse(item.value) : {}
          }
        })
        this.feeObj = obj
      }).catch(() => {

      })
    },
    copyText() {
      copyText(this.chainInfo.address)
    },
    showPre() {
      QRCode.toDataURL(this.chainInfo.address,{
        margin: 0,
        width: 233,
        height: 233,
      }).then((url) => {
        this.qrUrl = url
        // this.images = [url]
        // this.imagePreShow = true
      }).catch((err) => {
      })
    },
    selectAccountBack(item) {
      this.accountId = item.id
      this.accountShow = false
    },
    selectChainBack(chain) {
      this.chain = chain
      this.chainShow = false
      this.cashAddressList.forEach(item => {
        if (item.chain == this.chain) {
          this.chainInfo = item
        }
      })
    },
    selectSymbolBack(item) {
      this.symbol = item
      this.symbolShow = false
      var sign = false
      this.chainList1.forEach(item => {
        if (item.chain == this.chain) {
          sign = true
        }
      })
      if (!sign) {
        this.chain = this.chainList1[0].chain || ''
        this.cashAddressList.forEach(item => {
          if (item.chain == this.chain) {
            this.chainInfo = item
          }
        })
      }
    },
    shareLink() {
      var title = `我的极度证券链上地址\n币种： ${this.symbol} \n网络： ${this.chainInfo.chain} \n地址：${this.chainInfo.address}`
      try {
        this.nativeShare = new NativeShare()
        var shareData = {
          title: title,
          // title: this.symbol,
          // desc: this.chainInfo.chain,
          // // img: '',
          // // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
          // link: this.chainInfo.address,
          icon: window.location.origin + '/logo.png',
        }
        this.nativeShare.setShareData(shareData)
        this.nativeShare.call()
      } catch (err) {
        copyText(title)
      }
    },
    getCashChainList() {
      getCashChainList().then(res => {
        var list = res.list || []
        list.forEach(item => {
          this.$set(this.chainName, item.chain, item.title)
        })
        this.chainList = list
      }).catch(() => {})
    },
    toHelp() {
      if (this.language == 'zh-CN') {
        location.href = `${this.helpUrl}detail.html?id=48&language=${this.language}`
        return
      }
      if (this.language == 'zh-TW') {
        location.href = `${this.helpUrl}detail.html?id=117&language=${this.language}`
        return
      }
      location.href = `${this.helpUrl}detail.html?id=70&language=${this.language}`
    }
  }
}
</script>
<style lang="less" scoped>
.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: 10px;
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
  .right {
    position: absolute;
    top: 11px;
    right: 16px;
    column-gap: 22px;
  }
  .info {
    cursor: pointer;
    height: 21px;
  }
}
.container {
  padding: 0 18px 110px;
}
.qr-box {
  justify-content: center;
  position: relative;
  margin-bottom: 11px;
  .qr {
    width: 140px;
  }
  .img-box {
    border: 1px solid #ECECEC;
    padding: 8px;
    border-radius: 12px;
  }
  .logo {
    display: block;
    width: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.cell {
  margin-bottom: 14px;
}
.cell1 {
  margin-bottom: 10px;
}
.label1 {
  color: #B5B5B8;
  line-height: 20px;
  margin-bottom: 7px;
}
.info-box {
  background: #F5F5F5;
  border-radius: 6px;
  border: 1px solid #ECECEC;
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
  color: #393939;
  margin-bottom: 16px;
  .info {
    width: 17px;
    margin-right: 3px;
  }
}
.label {
  color: #333333;
  margin-bottom: 7px;
}
.select-box {
  position: relative;
  padding-right: 29px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #ECECEC;
  height: 46px;
  padding-left: 14px;
  .select {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .balance {
    padding-left: 6px;
    color: #B3B3B3;
  }
  .down {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
  }
}

.address-box {
  color: #333333;
  line-height: 20px;
  margin-bottom: 20px;
  .left {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    word-break: break-all;
  }
  .copy {
    margin-left: 10px;
    width: 17px;
    cursor: pointer;
  }
}
.cell2 {
  padding-top: 5px;
  .title {
    color: #333333;
    margin-bottom: 14px;
  }
  .col {
    justify-content: space-between;
    color: #B3B3B3;
    &+.col {
      margin-top: 9px;
    }
  }
  .val {
    color: #000000;
  }
}
.fixed {
  padding: 12px 18px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  font-weight: 600;
  color: #FEFFFF;
  font-size: 16px;
  text-align: center;
  background-color: var(--bg-);
  .btn {
    cursor: pointer;
    border-radius: 6px;
    line-height: 44px;
    background-color: #000;
  }
}
</style>