<template>
  <v-page style="background-color: #fff;">
    <!-- <v-header :title="$t('base.d2')" :left-arrow="false" style="background-color: #fff;"></v-header> -->
    <view style="height: var(--status-bar-height)"></view>
    <view style="height: 30px;"></view>
    <!-- <view class="box-size head h-aut p-x-md m-x-md d-flex justify-between flex-wrap align-center bgb3 rounded-ms color-light"
        :class="theme == 'light' ? 'bgb3-white' : ''" style="position: relative;"> -->
		<view class="box-size head h-aut p-x-md m-x-md d-flex justify-between flex-wrap
		 align-center rounded-ms color-dark"
		     style="position: relative;">
      <view class="d-flex p-t-md justify-center align-center w-max">
        <text class="fn-16 d-block">{{ $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 flex-wrap justify-center fn-center w-max" style="padding-bottom: 20px;">
        <text class="fn-28 w-max sp-color">{{ filterMoney(account.total_assets_btc, true) }}</text>
        <text class="fn-sm m-t-sm w-max">
          <span>≈</span>
          <span class="sp-color">{{ filterMoney(account.total_assets_usd, false) }}</span>
          <span class="sp-text">USDT</span>
        </text>
      </view>

      <view class="m-t-ms w-max " style="margin-top: 10px;padding: 0px 0px 20px;">
        <view class="d-flex justify-between align-center rounded-lg">
          <v-link tag="view" to="/pages/assets/recharge" style="border: 1px solid #ececec;" v-if="user_auth_level==1" @click="getAuthInfo"
                  class="d-flex align-center p-y-xxs rounded-xs w-33 justify-center">
            <view class="m-r-xs d-flex align-center">
              <img src="static/img/13.png" alt="" class="h-25"/>
            </view>
            <text class="fn-middle fn-ms">{{
                $t("base.b5")
              }}
            </text>
          </v-link>
          <v-link tag="view" to="/pages/auth/primary" style="border: 1px solid #ececec;" v-if="user_auth_level==0" @click="getAuthInfo"
                  class="d-flex align-center p-y-xxs rounded-xs w-33 justify-center">
            <view class="m-r-xs d-flex align-center">
              <img src="static/img/13.png" alt="" class="h-25"/>
            </view>
            <text class="fn-middle fn-ms">{{
                $t("base.b5")
              }}
            </text>
          </v-link>
          <v-link tag="view" to="/pages/assets/draw" style="border: 1px solid #ececec;"
                  class="d-flex align-center p-y-xxs rounded-xs w-33 justify-center">
            <view class="m-r-xs d-flex align-center">
              <img src="static/img/5.png" alt="" class="h-25"/>
            </view>
            <text class="fn-ms">{{
                $t("base.b6")
              }}
            </text>
          </v-link>
          <v-link tag="view" to="/pages/transfer/index" style="border: 1px solid #ececec;"
                  class="d-flex align-center p-y-xxs rounded-xs w-33 justify-center">
            <view class="m-r-xs d-flex align-center">
              <img src="static/img/hua.png" alt="" class="h-25"/>
            </view>
            <text class="fn-ms">{{
                $t("base.d8")
              }}
            </text>
          </v-link>
        </view>
      </view>
    </view>

    <view class="layout-main" style="background-color: #fff;">
      <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 bg-FA p-xs color-gray-6"
              :class="theme == 'light' ? 'bgb3-white' : ''">
          <view class="w-33 fn-center p-y-xxs"
                :class="tabActive==0?'rounded-xs color-dark':''"
                @click="tabActive=0">
            {{ $t('base.d7') }}
          </view>
          <view class="fn-center p-y-xxs m-l-xs"
                :class="tabActive==1?'rounded-xs color-dark':''"
                @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="top" style="background-color: #fff;">
          
          <view class="box-shadow wallet" v-if="tabActive==0">
            <view class="m-x-md m-b-xs m-t-sm">
              <view class="bg-yellow2 p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''"
                    style="position: relative">
                <text class="fn-20 d-block color-dark m-t-xs">
                  ≈{{ (account.funds_account_usd).toFixed(2) }}
                </text>
                <text class="fn-sm d-block color-gray-6 m-t-xs">{{ $t("base.d6") }}(USDT)</text>
              </view>
            </view>

            <view class="h-30 p-x-md 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" icon-size="16">
                <text class="color-gray-6 m-r-xs">{{ $t("base.e0") }} 0 {{ $t("base.e1") }}</text>
              </van-checkbox>
            </view>
            <router-link :to="{
                  path: '/pages/assets/bill',
                  query: { coin_name: item.coin_name },
                }" v-show="ifShow(item)" class="p-t-xs 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-dark 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 bg-FA">
                <view class="w-4/12">
                  <p class="color-gray-6" style="padding: 5px 0">
                    {{ $t("base.b9") }}
                  </p>
                  <p class="fn-lg color-dark 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-dark 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-dark overflow-scroll">
                    {{ omitTo(item.usd_estimate, item.priceDecimals) | priceDecimals }}
                  </p>
                </view>
              </view>
              <view class="h-4 m-t-xs"></view>
            </router-link>
          </view>
          
          <view class="m-x-md" v-if="tabActive==1">
            <view class="bg-yellow2 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/account-bill">{{ $t("base.e4") }}
                  <van-icon class="fn-middle" name="arrow" size="16"/>
                </v-link>
              </view>
              <span class="fn-20 d-block color-dark m-t-md">{{
                  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="m-r-xs align-center">
                    <img :src="$localImgUrl('fill4.png')" alt="" class="h-18" style="vertical-align: middle;"/>
                  </view>
                  <text class="color-dark fn-middle">{{
                      $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="m-r-xs align-center">
                    <img :src="$localImgUrl('fill4.png')" alt="" class="h-18"/>
                  </view>
                  <text class="color-light fn-middle">{{
                      $t("base.d8")
                    }}
                  </text>
                </v-link>
              </view>
            </view>
          </view>
          
        </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",
    }),
  },
  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();
      }
    },

  },
  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;
  }
}

.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;
}

.pos {
  position: relative;
}

.posa {
  position: absolute;
}

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

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

.w-33 {
  width: 30%;
}

.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;
}
	/deep/ .van-nav-bar__title{
		color: #000;
	}
	/deep/ .van-cell{
		color: #999;
	}
.sp-color{
  color: #F7D558
}
.sp-text{
  margin-left: 5px;
}
</style>
