<template>
  <view>
    <!-- 导航栏 -->
    <u-navbar back-icon-color="#000000" title-color="#000000" :border-bottom="false">
       <view class="flex-1 text-center text-32rpx">我的账户</view>
      <view slot="right" class="pr-base" @tap="show=!show,tipsShow=false">
        <u-icon name="list-dot" size="48"></u-icon>
      </view>
    </u-navbar>
    <!--  -->
     <loading-view v-if="isFirstLoading"></loading-view>
    <view class="flex items-center justify-between px-base pt-base">
      <view class="w-345rpx flex items-center justify-center flex-col h-191rpx bg-hex-E4F1F2 box-shadow ">
        <view class="flex items-center justify-center">
          <image class="w-89rpx h-89rpx" src="/static/images/user/pre_income.png" mode=""></image>
          <view class="ml-base text-xl text-hex-00A2B0 flex items-center justify-center flex-col">
            <view>{{account.distribution_pre|numFormat}}</view>
            <view>预收益</view>
          </view>
        </view>
         <!-- <view class="text-20rpx   mt-10rpx text-hex-00A2B0">{{account.distribution_pre}}</view> -->
      </view>
      <view class="w-345rpx h-191rpx bg-hex-E9ECFF box-shadow flex items-center flex-col justify-center">
        <view class="flex items-center justify-center">
          <image class="w-89rpx h-89rpx" src="/static/images/user/can_mention.png" mode=""></image>
          <view class="ml-base text-xl text-hex-635DF7 flex items-center justify-center flex-col">
            <view>{{account.wallet_balance|numFormat}}</view>
            <view>可提</view>
          </view>
        </view>
         <!-- <view class="text-20rpx  mt-10rpx text-hex-635DF7">{{account.wallet_balance}}</view> -->
      </view>
    </view>
    <!--  -->
    <view class="mt-30rpx  flex items-center bg-hex-F7F7F7 sticky suspension zIndex">
      <view @tap="handType(item.type)" class="flex-1 py-base text-center text-lg text-txGray"
        :class="type==item.type?'active' :''" v-for="(item,index) in list" :key="index"> {{item.name}}</view>
    </view>
   <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
     :up="upOption">
      <view class=" bg-white">
        <view class="py-base flex text-lg text-txGray items-center">
          <view class="flex-1 text-center">信息</view>
          <view v-if="type!=1" class="flex-1 text-center">时间</view>
          <view v-if="type==1" class="flex-1 text-center">状态</view>
          <view class="flex-1 text-center">金额</view>
        </view>
        <view @tap="tipsPopup(item)" class="flex items-center text-txGray text-lg py-base" v-for="(item,index) in dataList"
          :key="index">
          <view class="flex-1 text-center flex justify-center ">
            <view class="one-ellipsis w-180rpx">
             {{item.remarks}}
            </view>
          </view>
          <view  v-if="type!=1" class="flex-1 text-center">{{item.created_at}}</view>
           <view  v-if="type==1" class="flex-1 text-center">{{item.status}}</view>
          <view v-if="type==1" class="flex-1 text-center">{{item.total_revenue}}</view>
          <view v-else class="flex-1 text-center">{{item.change_balance}}</view>

        </view>
      </view>
    </mescroll-body>
    <!-- 主菜单弹窗 -->
    <view  @touchmove.stop.prevent="" :style="{top:top+'px'} " @tap="show=!show" v-if="show"
      class="fixed  left-0 right-0 h-full  z-999 bg-opacity-60 bg-hex-000000 ">
      <view class="px-base flex justify-end mt-10rpx items-end flex-col">
        <view class="triangle-up mr-base"></view>
        <view @tap.stop="" class="px-43rpx pt-10rpx  bg-white rounded-15rpx text-lg text-txGray  pb-30rpx flex-col">
          <view @tap.stop="jump('pageA/balance_transfer/index')" hover-class="text-primary" class=" pt-base ">余额转账
          </view>
          <view @tap.stop="jump('pageA/withdrawal_balance/index')" hover-class="text-primary" class="pt-base ">
            可提转余额</view>
          <view @tap.stop="jump('pageA/bank_card/index')" hover-class="text-primary" class="pt-base ">提现到银行卡
          </view>
          <view @tap.stop="jump('pageA/my_bank/index')" hover-class="text-primary" class="pt-base ">我的银行卡</view>
        </view>
      </view>
    </view>
    <!-- 提示框 -->
    <view @touchmove.stop.prevent="" v-if="tipsShow" :style="{top:top+'px'} "
      class="fixed  left-0 right-0 h-full  z-999 bg-opacity-60 bg-hex-000000 ">
      <view class="w-710rpx max-710rpx bg-white m-auto mt-300rpx rounded-xs overflow">
        <view @tap="tipsShow=false" class="h-70rpx bg-hex-F7F7F7 flex items-center justify-end px-25rpx">
          <image class="w-48rpx h-48rpx" src="/static/images/user/account_del.png" mode="aspectFill"></image>
        </view>
        <!--  -->
        <scroll-view scroll-y="true" class="max-h-640rpx">
          <view class="px-base py-40rpx" >
            <block v-if="type!=1">
                <u-time-line>
                  <u-time-line-item >
                    <template v-slot:node  >
                      <view></view>
                    </template>
                    <template v-slot:content>
                      <view class="font-extrabold">
                        <view class="u-order-title ">{{current.remarks}}</view>
                        <view class="u-order-desc ">时间:{{current.created_at}}</view>
                        <view class="u-order-time ">金额:{{current.change_balance}}</view>
                      </view>
                    </template>
                  </u-time-line-item>
                </u-time-line>
            </block>
            <block v-if="type==1">
              <u-time-line>
                <u-time-line-item v-for="(item,index) in current.logs" :key="index">
                  <template v-slot:node  >
                    <view v-if="index==0"></view>
                  </template>
                  <template v-slot:content>
                    <view :class="index==0?'font-extrabold':''">
                      <view class="u-order-title ">{{item.remarks}}</view>
                      <view class="u-order-desc ">金额:{{item.change_amount}}</view>
                      <view class="u-order-time ">收益:{{item.change_revenue}}</view>
                      <view class="u-order-time ">时间:{{item.created_at}}</view>
                      <view class="pt-10rpx">
                         <u-line v-if="index != current.logs.length - 1"  :hair-line="false" color="#808080" border-style="dashed"></u-line>
                      </view>
                    </view>
                  </template>
                </u-time-line-item>
              </u-time-line>
            </block>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        isFirstLoading:true,
        type: 1,
        show: false,
        tipsShow: false,
        list: [{
            name: '预收益',
            type: 1
          },
          {
            name: '可提',
            type: 2
          },
          {
            name: '余额',
            type: 3
          }
        ],
        account: {},
        downOption: {
          auto: false,
          use: false
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
        logs:[],//查看明细
        current:{}
      };
    },
    onShow() {
      this.getMoney()
    },
    computed: {
      top() {
        const {
          statusBarHeight
        } = this.$u.sys();
        return statusBarHeight + 44;
      },
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 250 + 'px';
      },
    },
    methods: {
      //获取账户余额
      async getMoney() {
        try{
          let resDate = await this.$api.get('/v1/wallet', {})
          this.account = resDate
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
      handType(val) {
        this.type = val
        this.dataList = []
         this.mescroll.scrollTo(0, 0);
        this.mescroll.resetUpScroll()
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        let url
        switch (this.type) {
          case 1:
            url = '/v1/wallet/distribution-logs'
            break;
          case 2:
            url = '/v1/wallet/wallet-logs'
            break;
          case 3:
            url = '/v1/wallet/balance-logs'
            break;
        }
        this.$api.get(url, {
          params: {
            page: page.num,
            per_page: page.size
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
      tipsPopup(e) {
        this.current = e
        // this.logs = e?.logs ?? []
        this.tipsShow=true
      },
      jump(url) {
        this.$u.routeAuth(url)
        this.show = false
      },

    }
  }
</script>

<style lang="scss" scoped>
  .zIndex{
    z-index: 999 !important;
  }
  .box-shadow {
    box-shadow: 0px 2rpx 10rpx rgba(0, 0, 0, 0.15);
    border-radius: 15rpx;
  }

  .active {
    @apply text-primary bg-white relative;
    &:after{
      content: '';
      @apply absolute bottom-0 h-4rpx w-full bg-primary left-0
    }
  }

  .triangle-up {
    width: 0;
    height: 0;
    border-left: 15rpx solid transparent;
    border-right: 15rpx solid transparent;
    border-bottom: 30rpx solid #FFFFFF;
  }

  .u-time-axis-item {
    margin-bottom: 10rpx;
  }

  .suspension {
    top: 88px;
    // #ifdef H5
    top: 44px  // #endif
  }
</style>
