<template>
  <view class="layout-page bg-panel-1" :style="themeStyle">
    <v-header>
      <template #title>
        {{$t('assets.e5')}}
        <!-- <span class="color-theme-1">{{coin}}</span> -->
      </template>
      <!-- <template #right>
        <v-link to="/pages/assets/paypal">
          PayPal
        </v-link>
      </template> -->
    </v-header>
    <view class="layout-main backcor-black">
      <view class="coin border-b p-x-lg p-md d-flex justify-between m-t-md" @click="coinListShow=true">
        <view class="fn-25 color-light">{{coin}}</view>
        <view class="d-flex align-center">
          {{$t('recharge.a0')}}<van-icon name="arrow" />
        </view>
      </view>
      <view class="bg-panel-3 backcor-black">
            <view class="rounded-md">
              <view
                class="d-flex flex-wrap justify-between align-center p-x-lg p-y-md color-light"
                v-if="coin=='USDT'"
              >
                <!-- <span>{{$t('assets.b7')}}</span> -->
                <view class="group d-flex fn-12 color-light">
                  <!-- <view class="rounded-xs p-x-lg p-y-ms m-r-md"
                    :class="rechargeType==1?'bor-active':'bg-panel-3 border'"
                    size="mini"
                    @click="changeRechargeType(1)"
                  >OMNI</view> -->
				  
                  <view class="rounded-xs p-x-lg p-y-ms m-r-md" size="mini" @click="changeRechargeType(2)" 
				  :class="rechargeType==2?'bor-active':'bg-panel-3 border'">ERC20</view>
					<view class="rounded-xs p-x-lg p-y-ms" size="mini" @click="changeRechargeType(3)" 
					:class="rechargeType==3?'bor-active':'bg-panel-3 border'">TRC20</view>
                </view>
              </view>
              <!-- <view class="color-sell fn-12 p-x-lg">{{$t('recharge.a1')}} <span v-html="'&nbsp;'"><span v-if="coin=='USDT'"> {{text }} </span></span>{{coin}}.{{$t('recharge.a2')}}</view> -->
              <view class="p-t-md  p-b-md ">
                <view class="fn-center">
                  <v-qr v-if="form.address" class="qr-box" :text="form.address||' '"></v-qr>
                </view>
                <!-- <view class="tips fn-center color-light m-y-xs">{{$t('assets.e6')}}</view> -->
                <!-- <view class="tips fn-center color-theme-1 m-t-md">{{$t('recharge.a3')}}</view> -->
              </view>
            </view>
            <view class="info p-b-md rounded-md">
              <view class="address p-t-xs">
                <!-- <view class="label w-100">{{$t('assets.e7')}}</view> -->
                <view class="border-r w-10/12 autowidth p-x-md p-y-ms address-txt p-x-xs flex-fill color-light fn-center bg-form-panel-3 rounded-xs">{{form.address}}</view>
                <!-- #ifndef H5 -->
                <view class="w-9/12 bg-lin p-y-ms rounded-xs m-t-md autowidth color-black p-x-xs fn-16 fn-center" @click="$copy(form.address)">
                  {{$t('recharge.a4')}}<i class="iconfont color-black m-l-xs">&#xe706;</i>
                </view>
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <view class="w-9/12 bg-lin p-y-ms rounded-xs m-t-md autowidth color-black p-x-xs fn-16 fn-center" @click="copy(form.address)">
                  {{$t('recharge.a4')}}<i class="iconfont color-black m-l-xs">&#xe706;</i>
                </view>
                <!-- #endif -->
              </view>
              <!-- <view class="address d-flex align-center justify-between p-t-xs m-b-md">
                <view class="label w-100">{{$t('assets.e8')}}</view>
                <v-input
                  type="number"
                  class="border-b flex-fill fn-right p-y-xs color-light"
                  v-model="form.amount"
                />
              </view>
              <v-button type="theme" block class="w-max m-t-md" @click="recharge" ref="btn">{{$t('common.confirm')}}</v-button> -->
            </view>
            <view class="m-y-md rounded-md">
              <ul class="p-md fn-sm rounded-md m-y-xs p-x-lg">
                <li>·
                    <span v-if="coin=='USDT'">{{$t('common.c0',{num:'10  '+coin})}}</span>
                    <span v-if="coin=='BTC'">{{$t('common.c0',{num:'0.0005 '+coin})}}</span>
                    <span v-if="coin=='ETH'">{{$t('common.c0',{num:'0.01 '+coin})}}</span>{{lang=='zh-TW'||lang=='jp'?'。':'.'}}
                </li>
                <li>·{{$t('assets.f0')}}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}{{$t('assets.f1',{num:10,name:coin})}}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li>
                <li>·{{$t('assets.f3',{name:coin})}}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li>
              </ul>
            </view>
          </view>
          <view class="m-b-lg" v-if="list.length">
            <view class="title d-flex justify-between p-x-md p-y-xs align-center color-light">
              <span class="fn-lg">{{$t('assets.f4')}}</span>
            </view>
            <view class="">
              <table class="w-max">
                <thead class="p-x-md">
                  <tr class="fn-sm p-x-md " >
                    <th class=" p-b-md fn-left p-l-md">{{$t('assets.c9')}}</th>
                    <th class=" p-b-md fn-left">{{$t('assets.d0')}}</th>
                    <th class=" p-b-md fn-right p-r-md">{{$t('assets.c0')}}</th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="color-light trChange p-x-md"  v-for="(item) in list" :key="item.id">
                    <td class="p-y-xs p-l-md rounded-tl-sm rounded-bl-sm">{{item.datetime|parseTime}}</td>
                    <td >
                      <view v-if="item.status==0">{{$t('assets.d1')}}</view>
                      <view v-if="item.status==1" class="color-buy">{{$t('assets.d2')}}</view>
                      <view v-if="item.status==2" class="color-sell">{{$t('assets.d3')}}</view>
                    </td>
                    <td class="fn-right p-r-md rounded-tr-sm rounded-br-sm">
                      {{item.amount}}
                      <span class="color-default">({{item.coin_name}})</span>
                    </td>
                  </tr>
                  <tr v-if="loadMore">
                    <td colspan="3" class="fn-center p-xs link-active" @click="more">{{$t('assets.d4')}}</td>
                  </tr>
                </tbody>
              </table>
            </view>
      </view>
    </view>
    <coin-list @imgs="change" ref="coinList" v-model="coin" @close="coinListShow=false" v-show="coinListShow" />
    <van-toast id="van-toast" />
  </view>
</template>
<script>
import coinList from "./coin-list";
import Wallet from "@/api/wallet";
import formData from "@/utils/class/date";
import {mapGetters} from 'vuex'
import {handleClipboard} from '../../utils/class/copy.js'
export default {
  components: {
    coinList,
  },
  data() {
    return {
      coinListShow: false,
      coin: "",
      rechargeType: 2,
      address: "",
      form: {
        coin_id: "",
        amount: "",
        address: "",
      },
      list: [],
      page: 1,
      loadMore: true,
      text:'OMIN_',
	  lang: uni.getStorageSync('language')
    };
  },
  computed: {
    activeCoin() {
      if (!this.coin) return {};
      return this.$refs.coinList.coinList.find(
        (item) => item.coin_name == this.coin
      );
    },
    ...mapGetters(['themeStyle'])
  },
  filters: {
    parseTime(val) {
      return formData.parseTime(val);
    },
  },
  watch: {
    coin(n) {
      if (n) {
        this.form.address = "";
		// console.info(this.coin)
        if (this.coin != "USDT") {
          this.rechargeType = 1;
        }else{
			this.rechargeType = 2;
		}
        this.walletImage();
      }
    },
    rechargeType(e){
        if(e==1){
            this.text='OMIN_'
        }else if(e==2){
            this.text='ERC20_'
        }else{
            this.text='TRC20_'
        }
    }
  },
  methods: {
      copy(data){
        handleClipboard(data, event, () => {
          this.$toast.success(this.$t('common.a1'));
        }, () => {
          this.$toast.error(this.$t('common.a2'));
        })
      },
    changeRechargeType(idx) {
      this.rechargeType = idx;
      this.form.address = "";
      this.walletImage();
    },
    // 获取充币地址
    walletImage() {
      let data = {
        coin_id: this.activeCoin.coin_id,
        address_type: this.rechargeType,
      };
      Wallet.walletImage(data).then(res => {
		// console.info(res)
        this.form.address = res.data.address;
      });
    },
    // 充值
    recharge() {
      this.form.coin_id = this.activeCoin.coin_id;
      Wallet.recharge(this.form, { btn: this.$refs.btn })
        .then(() => {
          this.$back();
          this.$toast.success(this.$t('assets.d5')+"！");
          this.reset();
        })
        .catch(() => {});
    },
    reset() {
      this.loadMore = true;
      this.page = 1;
      this.depositHistory();
    },
    more() {
      this.page++;
      this.depositHistory();
    },
    // 获取充值记录
    depositHistory() {
      let data = {
        page: this.page,
      };
      Wallet.depositHistory(data).then((res) => {
        if (res.data.current_page == 1) this.list = [];
        this.list = [...this.list, ...res.data.data];
        if (res.data.data.length < res.data.per_page) this.loadMore = false;
      });
    },
    change(e){
        // console.log(e)
    }
  },
  created() {
    this.depositHistory();
  },
};
</script>
<style lang="scss" scoped>
.address {
  .label {
    white-space: nowrap;
  }
  .address-txt {
    word-break: break-all;
  }
}
.qr-box {
  height: 150px;
  width: 150px;
  margin: 0 auto;
  border: 4px solid $white;
}
.trChange:nth-child(2n-1){
   box-shadow: $shadow;
    border-radius: $border-radius-xs;
	td{
		background: $panel-3;
		padding-top: $padding-sm;
		padding-bottom: $padding-sm;
	}
}
.bor-active{
    border: 1px solid $theme-1;
    position: relative;
    overflow: hidden;
    color: $theme-1;
}
.bor-active::before{
    content: '';
    position: absolute;
    right: 0;
    bottom:-2px;
    height: 0;
    width: 0;
    border: 10px solid;
    border-color:transparent $theme-1 $theme-1 transparent;
    text-align: center;
}
.bor-active::after{
    content: '√';
    position: absolute;
    right: -4px;
    bottom: -1px;
    height: 15px;
    width: 15px;
    width: 20px;
    transform: scale(0.7);
    text-align: center;
    color: white;
}
.border-b{
    // border-bottom: 5px solid $panel-3;
    border-bottom: 5px solid #242424;
}
.autowidth{
    margin: 0 auto;
}
.bg-lin{
    background: linear-gradient(to right,#f6c769,#f3b644);
}
.color-black{
    color: black;
}
.bg-form-panel-3, .trChange:nth-child(2n-1) td{
	background-color: #242424;
}
::v-deep .van-search__action--hover{
	background-color:#f2f3f5;
	background-color:var(--active-color,#f2f3f5);
	color:#000
}
</style>