<template>
    <v-page>
        <v-header class="nav-tab" :left-arrow="false" style="background-color: #141414;">
        	<!-- <template #left>
        		<image src="@/assets/img/home/top.png" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
        	</template> -->
        	<template #title>
        		<view style="color: #ffffff; font-size: 30rpx;">{{$t('base.d2')}}</view>
        	</template>
        	<template #right>
        		<view class="per-bot p-y-md p-x-sm d-flex align-center">
        			<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
        			<span class="color-light">
        				<v-lang @change="changeLang"></v-lang>
        				<i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
        			</span>
        		</view>
        	</template>
        </v-header>
        <!-- <view style="height: var(--status-bar-height)"></view> -->
        <view
            class="box-size head h-aut p-x-md d-flex justify-between flex-wrap align-center color-light"
            :class="theme == 'light' ? 'bgb3-white' : ''" style="position: relative;background-color: #121212;">
            <view class="d-flex p-t-md align-center w-max">
                <text class="fn-16 color-default d-block col-fff">{{ $t("base.d6")}}(BTC)</text>
                <view class="fn-18 m-l-md d-flex" @click="setHide(!hideMoney)">
                    <van-icon v-if="!hideMoney" name="eye-o"/>
                    <van-icon v-else name="closed-eye"/>
                </view>
            </view>
			
           <!-- <view class="m-t-md d-flex justify-center fn-center w-max">
                <text class="fn-28 w-max">{{ filterMoney(account.total_assets_btc, true) }}</text>
                <text class="fn-sm m-l-md w-max">
                    ≈{{ filterMoney(account.total_assets_usd) }} USD
                    ≈{{ filterMoney(account.total_assets_usd, false) }} USDT
                </text>
            </view> -->
			<view class="">
				<view class="text_figure col-fff">{{filterMoney(account.total_assets_btc, true)}}</view>
				<view style="color: #6FB58A;">≈{{ filterMoney(account.total_assets_usd, false) }} USDT</view>
			</view>
			
			<view class="m-t-ms p-b-ms w-max" style="display: flex;justify-content: space-between;">
				<v-link tag="view" to="/pages/assets/recharge" v-if="user_auth_level==1"  @click="getAuthInfo" class="manage_text">
					<img src="@/assets/img/home/Make.png" alt="" class="h-25"/>
					<view class="color-light fn-middle fn-ms">{{$t("base.b5")}}</view>
				</v-link>
				<v-link tag="view" to="/pages/auth/primary" v-if="user_auth_level==0"  @click="getAuthInfo" class="manage_text">
					<img src="@/assets/img/home/currency.png" alt="" class="h-25"/>
					<view class="color-light fn-middle fn-ms">{{$t("base.b5")}}</view>
				</v-link>
				<v-link tag="view" to="/pages/assets/draw" class="manage_text">
				    <img src="@/assets/img/home/currency.png" alt="" class="h-25"/>
				    <view class="color-light fn-ms">{{$t("base.b6")}}</view>
				</v-link>
				<v-link tag="view" to="/pages/transfer/index" class="manage_text">
				    <img src="@/assets/img/home/transfer.png" alt="" class="h-25"/>
				    <view class="color-light fn-ms">{{$t("base.d8")}}</view>
				</v-link>
				<v-link tag="view" :to="{path: '/pages/exchange/his',query: { symbol: symbol }}" class="manage_text">
				    <img src="@/assets/img/home/check.png" alt="" class="h-25"/>
				    <view class="color-light fn-ms">{{$t("base.h1")}}</view>
				</v-link>
			</view>
           <!-- <view class="m-t-ms p-b-ms w-max " style="margin-top: 10px">
                <view class="d-flex justify-between align-center rounded-lg">
                    <v-link tag="view" to="/pages/assets/recharge" v-if="user_auth_level==1" @click="getAuthInfo"
                            class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4">
                        :class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
                        <view class="m-r-xs d-flex align-center">
                            <img src="static/img/13.png" alt="" class="h-25"/>
                        </view>
                        <text class="color-light fn-middle fn-ms">{{
                            $t("base.b5")
                            }}
                        </text>
                    </v-link>
                    <v-link tag="view" to="/pages/auth/primary" v-if="user_auth_level==0" @click="getAuthInfo"
                            class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4">
                        :class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
                        <view class="m-r-xs d-flex align-center">
                            <img src="static/img/13.png" alt="" class="h-25"/>
                        </view>
                        <text class="color-light fn-middle fn-ms">{{
                            $t("base.b5")
                            }}
                        </text>
                    </v-link>
                    <v-link tag="view" to="/pages/assets/draw"
                            class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4">
                        <view class="m-r-xs d-flex align-center">
                            <img src="static/img/5.png" alt="" class="h-25"/>
                        </view>
                        <text class="color-light fn-ms">{{
                            $t("base.b6")
                            }}
                        </text>
                    </v-link>
                    <v-link tag="view" to="/pages/transfer/index"
                            class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4">
                        <view class="m-r-xs d-flex align-center">
                            <img src="static/img/hua.png" alt="" class="h-25"/>
                        </view>
                        <text class="color-light fn-ms">{{
                            $t("base.d8")
                            }}
                        </text>
                    </v-link>
                </view>
            </view> -->
        </view>

        <view class="layout-main" style="background-color: #121212;">
            <scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled&&scrollTop<50"
                         :refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50">
                <!-- 头部 -->
               <!-- <view class="tab m-x-md m-t-md rounded-ms d-flex justify-between bgb3 p-xs"
                      :class="theme == 'light' ? 'bgb3-white' : ''">
                    <view class="w-33 fn-center p-y-xxs"
                          :class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
                          @click="tabActive=0">
                        {{$t('base.d7')}}
                    </view>
                    <view class="w-33 fn-center p-y-xxs m-l-xs"
                          :class="tabActive==1?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
                          @click="tabActive=1">
                        {{$t('base.e4')}}
                    </view>
                    <view class="w-33 fn-center p-y-xxs m-l-xs" :class="tabActive==2?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
                    @click="tabActive=2">
                        {{$t('otc.d5')}}
                    </view>
                </view> -->
				<view class="" style="display: flex;margin-top: 10px;">
					<view class="w-33A fn-center p-y-xxs"
					      :class="tabActive==0?'col-fff rounded-xs ':''"
					      @click="tabActive=0">
					    {{$t('base.d7')}}
					</view>
					<view class="w-33A fn-center p-y-xxs"
					      :class="tabActive==1?'col-fff rounded-xs':''"
					      @click="tabActive=1">
					    {{$t('base.e4')}}
					</view>
				</view>
				
                <view class="top">
                    <!-- <van-tabs
                    :active="tabActive"
                    @change="changtTab"
                    :border="false"
                    v-if="show"
                    :line-width="30"
                    swipeable
                    animated
                    class="tabs-main d-flex justify-between align-center flex-col"
                  >
                    <van-tab :title="$t('base.d7')" :name="0"> -->
                    <view class="box-shadow wallet m-y-md" v-if="tabActive==0">
                        <view class="m-x-md m-b-xs m-t-sm">
                            <!--bgb3 :class="theme == 'light' ? 'bgb3-white' : ''" -->
                            <view class="shadow-panel-nei p-xs p-x-md"
                                  style="position: relative;background-color: #242424;border-radius: 5px;">
                                <text class="fn-20 d-block color-light m-t-xs">
                                    <!-- ≈{{ filterMoney(account.funds_account_usd) }} -->
                                    ≈{{ (account.funds_account_usd).toFixed(2) }}
                                </text>
                                <text class="fn-sm d-block color-gray-6 m-t-xs">{{ $t("base.d6") }}(USDT)</text>

                                <!-- <text class="fn-20 d-block color-light m-t-md"
                                    >{{ filterMoney(account.funds_account_btc) }} BTC</text
                                  > -->
                                <!-- fn-sm d-block m-t-xs color-gray-6 -->

                            </view>
                        </view>

                        <view class="h-30 p-x-xs d-flex justify-between align-center">
                            <van-field :value="searchText" @input="searchText = $event.detail" left-icon="search"
                                       :placeholder="$t('base.d9')" input-class="fn-12 "
                                       class="flex-fill color-gray-6 rounded-md pos fn-12 m-r-lg"
                                       style="padding-left: 0"/>
							<van-checkbox :value="hide" @change="hide = !hide" checked-color="#fff" shape="square" icon-size="15px">
								<text class="col-fff m-r-xs" style="font-size: 13px;">{{ $t("base.e0") }} 0 {{ $t("base.e1") }}</text>
							</van-checkbox>
                        </view>
						<view class="title_Currency">
							<view style="width: 190rpx;text-align: center;">{{ $t("base.f4") }}</view>
							<view class="text_width text_align">{{ $t("base.b9") }}</view>
							<view class="text_width text_align">{{ $t("base.e2") }}</view>
							<view class="text_align">{{ $t("base.e3") }}(USD)</view>
						</view>
                        <router-link :to="{path: '/pages/assets/bill',query: { coin_name: item.coin_name },}" 
						v-show="ifShow(item)" class="d-block rounded-md text-none" v-for="(item, index) in list" :key="index">
                            <!-- <view class="m-x-md d-flex justify-between align-center p-b-xs">
                                <view>
                                    <img :src="item.image" class="w-20 h-20 rounded-max fn-middle"/>
                                    <text class="fn-18 fn-bold color-light fn-middle p-l-sm">{{
                                        item.coin_name
                                        }}
                                    </text>
                                </view>
                                <view>
                                    <text class="fn-lg color-light fn-middle">{{
                                      add(
                                        item.usable_balance,
                                        item.freeze_balance,
                                        item.priceDecimals
                                      )
                                    }}</text>
                                    <van-icon
                                      class="p-l-xs fn-middle"
                                      name="arrow"
                                      size="16"
                                      color="#646566"
                                    />
                                  </view>
                            </view>
                            <view class="p-x-md d-flex justify-between align-center">
                                <view class="w-4/12">
                                    <p class="color-gray-6" style="padding: 5px 0">
                                        {{ $t("base.b9") }}
                                    </p>
                                    <p class="fn-lg color-light overflow-scroll">{{ (item.usable_balance).toFixed(2) }}
                                    </p>
                                </view>
                                <view class="w-4/12 fn-center">
                                    <p class="color-gray-6" style="padding: 5px 0">
                                        {{ $t("base.e2") }}
                                    </p>
                                    <p class="fn-lg color-light overflow-scroll">{{ item.freeze_balance }}</p>
                                </view>
                                <view class="w-4/12 fn-right">
                                    <p class="color-gray-6" style="padding: 5px 0">
                                        {{ $t("base.e3") }}(USD)
                                    </p>
                                    <p class="fn-lg color-light overflow-scroll">
                                        {{ omitTo(item.usd_estimate, item.priceDecimals) | priceDecimals}}
                                    </p>
                                </view>
                            </view> -->
							<view class="Currency_content">
								<view style="width: 200rpx;" class="m-title">
									<img :src="item.image" class="w-20 h-20 rounded-max fn-middle"/>
									<text class="fn-18 fn-bold color-light fn-middle p-l-sm">{{item.coin_name}}
									</text>
								</view>
								<view class="col-fff text_width text_align m-title">
									{{ (item.usable_balance).toFixed(2) }}
								</view>
								<view class="col-fff text_width text_align m-title">
									{{ item.freeze_balance }}
								</view>
								<view class="col-fff text_width text_align m-title">
									{{ omitTo(item.usd_estimate, item.priceDecimals) | priceDecimals}}
								</view>
							</view>
                            <view class="h-4 m-t-xs"></view>
                        </router-link>
						<van-empty class="bg-panel-3" v-if="filteredList.length === 0" :description="$t('contract.d0')"/>
                    </view>
                    <!-- </van-tab>

                    <van-tab :title="$t('base.e4')" :name="1" class="p-t-md"> -->
                    <view class="m-x-md" v-if="tabActive==1">
                        <view class="p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''"
                              style="position: relative;background-color: #242424;height: 350rpx;">
                            <view class="fn-sm d-flex justify-between color-gray-6" style="margin-top: 44rpx;">
                                <span> USDT </span>
                                <v-link class="col-fff" to="/pages/assets/account-bill">{{ $t("base.e4") }}
                                    <van-icon class="fn-middle" name="arrow" size="16"/>
                                </v-link>
                            </view>
                            <span class="fn-20 d-block color-light" style="margin-top: 100rpx;">
							{{ filterMoney(account.contract_account_usd)}}{{ account.symbol }}
							</span>
                            <view class="d-flex justify-between m-t-xs">
                                <v-link to="/pages/transfer/index" class="d-flex">
                                    <view class="align-center">
                                        <img :src="$localImgUrl('antOutline.png')" alt="" class="h-18"/>
                                    </view>
                                    <!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> -->
                                    <text class="color-light fn-middle" style="margin-left: 11px;">{{$t("base.d8")}}</text>
                                </v-link>
                            </view>
                        </view>
                    </view>
                    <view class="m-x-md" v-if="tabActive==2">
                        <view class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''"
                              style="position: relative">
                            <view class="fn-sm d-flex justify-between color-gray-6 m-t-xs">
                                <span> USDT </span>
                                <v-link class="color-buy" to="/pages/assets/currency-bill">{{ $t("otc.d5") }}
                                    <van-icon class="fn-middle" name="arrow" size="16"/>
                                </v-link>
                            </view>

                            <text class="d-flex m-t-ms fn-12">
								<span class="fn-20 color-light m-r-xs">{{ filterMoney(otc.otc_usable_balance)
                    }}{{ account.symbol }}</span>
                                ({{$t('contract.e4')}})
                            </text>
                            <text class="d-flex m-t-ms fn-12">
								<span class="fn-20 color-light m-r-xs">{{ filterMoney(otc.otc_freeze_balance)
                    }}{{ account.symbol }}</span>
                                ({{$t('otc.d6')}})
                            </text>
                            <view class="d-flex justify-between m-t-xs">
                                <v-link to="/pages/transfer/index" class="d-flex">
                                    <view class="align-center">
                                        <img :src="$localImgUrl('fill4.png')" alt="" class="h-18"/>
                                    </view>
                                    <!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> -->
                                    <text class="color-light fn-middle">{{
                                        $t("base.d8")
                                        }}
                                    </text>
                                </v-link>
                            </view>
                        </view>
                    </view>
                    <!-- </van-tab>
                  </van-tabs> -->
                </view>
            </scroll-view>
        </view>
    </v-page>
</template>
<script>
import {
    mapState,
    mapActions
} from "vuex";
import Wallet from "@/api/wallet";
import math from "@/utils/class/math.js";
import Contract from "@/api/contract.js";
import Profile from "@/api/profile";

export default {
  name: "mine",
  data() {
    return {
      userInfo: {},
      account: {},
      list: [],
      tabActive: 0, // 切换选择
      searchText: "",
      hide: false,
      show: false,
      accountDetail: {},
      scrollTop: 0,
      refreshing: false,
      otc: {},
      status: 0,
      user_auth_level: 0,
    };
  },
  computed: {
    ...mapState({
      hideMoney: "hideMoney",
      theme: "theme",
    }),
	filteredList() {
	    return this.list.filter(item => this.ifShow(item));
	}
  },
  props: {
    isShow: {
      default: true,
      type: Boolean,
      required: false,
    },
    refresherEnabled: {
      default: true,
      required: false,
      type: Boolean
    },
  },
  watch: {
    isShow(n, o) {
      if (n) {
        this.upDateData();
		this.getAuthInfo();//刷新this.user_auth_level
      }
    },
    tabActive() {
      this.upDateData();
    }
  },
  filters: {
    priceDecimals(val) {
      console.info(val);
      return (parseFloat(val)).toFixed(2)
    }
  },
  methods: {
    getAuthInfo() {

      Profile.getAuthInfo().then(res => {
        // this.detail = res.data
        this.status = res.data.status
        this.user_auth_level = res.data.primary_status
        console.log(this.status, '9999')
        console.log(res.data, '8888')
        console.log(this.user_auth_level, '7777')
      })
    },
    onRefresh() {
      if (this.refreshing) return;
      this.refreshing = true;
      this.fundAccount()
      this.personalAssets()
      setTimeout(() => {
        this.refreshing = false;
      }, 1000)
    },
    scroll(event) {
      this.scrollTop = event.detail.scrollTop
    },
    omitTo: math.omitTo,
    // 计算和
    add: math.add,
    ...mapActions({
      setHide: "hideMoney",
    }),
    filterMoney(val, type) {
      if (this.hideMoney) return "******";
      if (type) {
        return this.omitTo(val, 8);
      } else {
        return this.omitTo(val, 2);
      }

        },

        ifShow(item) {
            // 搜索过滤
            let show =
                item.coin_name
                    .toLocaleLowerCase()
                    .indexOf(this.searchText.toLocaleLowerCase()) != -1;
            if (!this.hide) return true && show;

            // 0余额资金过滤
            let hasMoney =
                this.add(item.usable_balance, item.freeze_balance, item.priceDecimals) *
                1 !=
                0;
            return hasMoney && show;
        },
        fundAccount() {
            Wallet.fundAccount().then((res) => {
                this.list = res.data.list;
                this.otc = res.data
            });
        },
        personalAssets(e) {
            Wallet.personalAssets().then((res) => {
                this.account = res.data;
            });
        },

        // 获取合约列表
        accounts() {
            Contract.contractAccount().then((res) => {
                this.accountDetail = res.data;

            });
        },
        changtTab($ev) {
            this.tabActive = $ev.detail.name;
            this.upDateData();
        },
        // 刷新数据
        upDateData() {
            if (this.tabActive == 1) {
                this.accounts();
            } else if (this.tabActive == 0) {
                this.personalAssets();
                this.fundAccount();
            } else {
                this.fundAccount();
            }
        },
				changeLang(){
					
				}

    },
    mounted() {
        this.show = true;
    },
    created() {
        this.upDateData();
        this.getAuthInfo()
        this.fundAccount()
        this.personalAssets()
        this.accounts()
    },

};
</script>

<style lang="scss" scoped>
.tabs-main {
    ::v-deep.van-tabs {
        width: 100%;
    }

    ::v-deep.van-tabs__wrap,
    ::v-deep.van-tabs__content {
        // width: 100%;
    }

    ::v-deep.van-tabs__content {
        flex: 1;
        overflow: hidden;
    }

    ::v-deep.van-pull-refresh {
        height: calc(100vh - 200px);
        overflow-y: auto;
    }

    ::v-deep.van-cell {
        background: transparent;

        &::after {
            border-width: 0;
        }
    }

    ::v-deep .van-cell__left-icon {
        color: $white;
    }
}

::v-deep .van-checkbox__icon--checked{
	color: #000;
}
.manage_text{
	text-align: center;
	height: 120rpx;
	width: calc(20% - 10px);
}

.col-fff{
	color: white;
}

.title_Currency{
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}

.Currency_content{
	display: flex;
	justify-content: space-around;
	margin: 0px 10px;
}

.text_width{
	width: 150rpx;
}
.text_align{
	text-align: right;
}

.bgb3 {
    background: url(../../static/img/bgb3.png) no-repeat;
    background-size: 100% auto;
    background-position: right bottom;

    &.bgb3-white {
        background-image: url(../../static/img/light/bgb3.png);
    }
}

.bgb4 {
    background: url(../../static/img/bgb4.png) no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
}

.text_figure{
	margin: 5px 0px;
	font-size: 50rpx;
	font-weight: bold;
}

.pos {
    position: relative;
}

.posa {
    position: absolute;
}

.rounded-ms {
    border-radius: 10px;
}

.p-y-xxs {
    padding: 5px 0;
}

.w-33 {
    width: 25%;
}
.w-33A {
    width: auto;
		padding: 5px 20px;
}

.w-50 {
    width: 50%;
}

.wallet {
    border-radius: 30px;
}

.text-none {
    text-decoration: none;
}

::v-deep .van-cell {
    background-color: $panel-3;
}

::v-deep .van-cell {
    background-color: transparent;
    padding: 0 10px;
}
.m-title{
	margin: 10px 0px;
}
</style>
