<template>
  <view>
    <u-navbar @leftClick="handlerLeft" :title="title" :placeholder="true">
      <view @click="handlerRecord" class="" slot="right" v-if="!isRecord">
        变更记录
      </view>
      <!-- <view style="margin-left: 10rpx;" @click="goPage('/pages/user/Fruit/index')" class="" slot="right" v-if="transferType == 5 && !isRecord">
				水果卡
			</view>	 -->
    </u-navbar>
    <view class="balance_wrapper bg-w" v-if="!isRecord">
      <view class="balance_wrapper_bg flex flex-center">
        <view class="balance_item">
          {{ transferType == 5 ? '水果券' : '余额' }}
          <u-gap height="30rpx"></u-gap>
          <view class="balance_text">
            <text>¥</text> {{ balance }}
          </view>
        </view>
        <view class="balance_item">
          {{ '冻结资产' }}
          <u-gap height="30rpx"></u-gap>
          <view class="balance_text">
            <text>¥</text> {{ assetFreezeAccount }}
          </view>
        </view>

      </view>


      <u-gap height="30rpx"></u-gap>
      <view class="nav_box flex flex-align-center" :class="[transferType == 5 ? 'padding-10' : '']">
        <view class="box flex flex-center" @click="goPage('/pages/user/balance/greenTransfer?type=' + transferType)">
          <text class="zyhs zyhs-zhuanzhang1"></text>转账
        </view>
        <view v-if="transferType == 1" class="box right flex flex-center"
          @click="goPage('/pages/user/balance/rechargeList?type=getRechargeRecord')">
          <text class="zyhs zyhs-chongzhi"></text>充值记录
        </view>
        <block v-if="transferType == 5">
          <view class="box right flex flex-center"
            @click="goPage('/pages/user/balance/rechargeList?type=getRechargeFruitRecord')">
            <text class="zyhs zyhs-chongzhi"></text>充值记录
          </view>
          <!-- <view class="box right flex flex-center middle" @click="goPage('/pages/user/balance/rechargeList?type=getRechargeFruitRecord')">
						<text class="zyhs zyhs-qiandai"></text>提现
					</view> -->
        </block>
      </view>
      <!-- <view v-if="transferType == 5 || transferType == 1" class="chongzhi-box"
        @click="goPage(transferType == 5 ? '/pages/user/balance/recharge?radioIndex=1&noSelect=1' : '/pages/user/balance/recharge')">
        <text>
          充值
        </text>
      </view> -->
      <view v-if="transferType == 5" class="tixian-box"
        @click="zhuanhuan">
        <text>
          转换消费余额
        </text>
      </view>
    </view>
    <u-tabs class="bg-w tabsId" :list="tabsList" @click="handlerTabClick"></u-tabs>
    <u-list scroll-y="true" :style="{ height: screenHeight + 'px' }" lowerThreshold="300" @scrolltolower="handlerLoad">

      <view class="listBox" v-if="list.length">
        <view v-for="(order, index) in list" class="listBoxCard" @click="handlerDetail(order)">
          <view class="content">
            <view>
              <!-- <text>{{ tabsIndex == 0 ? '贡献人变更后资产金额':'收益人变更前资产金额'}}:</text>
							<text>{{ tabsIndex == 0 ? order.contributoryAfterMoney: order.beneficiaryAfterMoney}}</text> -->
              {{ order.createTime }}
              <u-icon name="lock-fill" v-if="order.status == 0" color="#2979ff" size="28"></u-icon>
            </view>
            <view class="flex">
              <text>{{ order.changeReason }}</text>
              <text>变更前：{{ tabsIndex == 0 ? order.contributoryBeforeMoney : order.beneficiaryBeforeMoney }}</text>
            </view>
            <view class="flex flex-align-center flex-between">
              <!-- <text>{{ tabsIndex == 0 ? '受益人用户编号':'贡献人用户编号'}}:</text>
							<text>{{ tabsIndex == 0 ? order.beneficiaryUserName: order.contributoryUserName}}</text> -->
              <view>
                <text>变更后：</text>
                <text>{{ tabsIndex == 0 ? order.contributoryAfterMoney : order.beneficiaryAfterMoney }}</text>
                <!-- <text>{{ tabsIndex == 0 ? '-':'' }}{{ order.changeMoney }}</text> -->
              </view>
              <view>
                <text>变更金额：</text>
                <text>{{ order.changeMoney }}</text>
                <!-- <text>{{ tabsIndex == 0 ? '-':'' }}{{ order.changeMoney }}</text> -->
              </view>
            </view>

            <!-- <view>
							<text>{{ tabsIndex == 0 ? '资产变更金额':'资产变更金额'}}:</text>
							<text>{{ order.changeMoney }}</text>
						</view>
						<view>
							<text>{{ tabsIndex == 0 ? '变更原因':'变更原因'}}:</text>
							<text>{{ order.changeReason }}</text>
						</view>
						<view>
							<text>{{ tabsIndex == 0 ? '交易单号':'交易单号'}}:</text>
							<text>{{ order.tranNo }}</text>
						</view> -->
          </view>
          <!-- <view class="content" v-else>
						<view>
							<text></text>
						</view>
					</view> -->
          <!-- <view class="flex1">
						<button class="button"
							style="margin-top: 20upx;background-color: #3c9cff;color: #fff;"
							>详情</button>
					</view> -->
        </view>
      </view>
      <view v-else class="flex flex-center" style="height: 100%;">
        <u-empty mode="list" text="暂无记录">
        </u-empty>
      </view>
    </u-list>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import url from "@/common/http/url.js";
import { oldAssetCaseBalance } from '@/api/system/api.js'
export default {
  data () {
    return {
      screenHeight: 500,
      assetFreezeAccount: 0,
      balance: 0,
      type: null,
      title: '',
      transferType: 0,
      list: [],
      pageNum: 1,
      isLoad: false,
      tabsIndex: 0,
      tabsList: [
        { name: '支出记录' },
        { name: '收入记录' }
      ],
      scrollTop: uni.getStorageSync('system')['statusBarHeight'],
      isRecord: false,
      dpi: uni.getStorageSync('dpi'),
      statusBarHeight: uni.getStorageSync('system')['statusBarHeight']
    };
  },
  onLoad (e) {
    this.type = e.type;
    this.transferType = e.transferType;
    this.title = e.title;
    this.scrollTop = this.statusBarHeight * this.dpi + 570;
    console.log('this.scrollTop', this.scrollTop)
    setTimeout(() => {
      this.getScrollHeight()
    }, 1000)
  },
  onShow () {
    this.list = []
    this.getBalance();
    this.getList()
  },
  computed: {
    ...mapState(["myAsset"])
  },
  methods: {
    zhuanhuan(){
      uni.showModal({
        title: "提示",
        content: '确定要转换么',
        success: e => {
          if (e.confirm) {
            oldAssetCaseBalance('shop-7')
          }
        }
      });
    },
    getScrollHeight () {
      const systemInfo = uni.getSystemInfoSync()
      // 设备屏幕高度
      const screenHeight = systemInfo.screenHeight
      // 设备底部菜单栏高度
      const navigationBarHeight = systemInfo.navigationBarHeight
      const menuButtonBoundingClientRect = systemInfo.menuButtonBoundingClientRect

      // 获取当前DOM元素信息
      const querySelector = uni.createSelectorQuery().in(this)
      querySelector.select('.tabsId').boundingClientRect((rect) => {
        console.log(rect, 'querySelector')
        // 计算距离底部的高度
        const distanceToBottom = screenHeight - rect.top
        // 输出距离底部的高度
        this.screenHeight = distanceToBottom
        console.log(screenHeight, 'screenHeight 高度')
        console.log(rect.top, 'screenHeight 高度')
        console.log(distanceToBottom, 'screenHeight 高度')
      }).exec()
    },
    handlerRecord () {
      this.isRecord = true;
      this.scrollTop = this.statusBarHeight * this.dpi + 176;
      this.screenHeight = uni.getSystemInfoSync().screenHeight || 700


    },
    handlerLeft () {
      if (this.isRecord) {
        this.isRecord = false;
        this.scrollTop = this.statusBarHeight * this.dpi + 570;
        this.getScrollHeight()
      } else {
        uni.navigateBack()
      }
    },
    handlerLoad () {
      if (this.isLoad) return;
      this.pageNum++;
      this.getList()
    },
    handlerTabClick (e) {
      console.log(e);
      let { index } = e;
	  this.isLoad = false;
      this.tabsIndex = index;
      this.list = [];
      this.pageNum = 1;
      this.getList()
      this.getScrollHeight()
    },
    goPage (path) {
      this.$navigateTo(path)
    },
    getBalance () {
      this.$http('GET', url.user.getMyAsset).then(res => {
        // this.balance = res.data[5].assetAccount
        this.myAsset.forEach((item) => {
          if (item.assetType == 3 && this.transferType == 1) this.balance = item.assetAccount;
          if (item.assetType == 7 && this.transferType == 5) {
            this.balance = item.assetAccount;
            this.assetFreezeAccount = item.assetFreezeAccount
          }
        })
      })
    },
    getList (type) {
      this.$http("GET", url.user[this.type], {
        pageNum: this.pageNum,
        pageSzie: 10,
        type: this.tabsIndex + 1
      }).then((res) => {
        console.log('res=========', res);
        let { code, data: { records } } = res;
        if (code == 200) {
          this.list = [...this.list, ...records];
          if (records.length < 10) this.isLoad = true;
        }
      })
    }
  }
}
</script>

<style lang="scss">
.chongzhi-box {
  padding: 20rpx 60rpx;
  border-radius: 10rpx;
  margin-top: 10upx;
  text-align: center;
  background: linear-gradient(90deg, rgb(8, 123, 58), rgb(16, 209, 98));
}

.tixian-box {
  padding: 20rpx 60rpx;
  border-radius: 10rpx;
  margin-top: 10upx;
  text-align: center;
  background: #2963e2;
}

.padding-10 {
  .box {
    padding: 10rpx 2rpx !important;
  }

  .middle {
    background: linear-gradient(90deg, rgb(148, 157, 9), rgb(155, 206, 189)) !important;
  }
}

.balance_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.balance_wrapper {
  padding: 20rpx 30rpx;
  color: #fff;

  .balance_wrapper_bg {
    padding: 40rpx 0;
    border-radius: 20rpx;
    justify-content: space-around;
    background-color: rgb(233, 187, 133);
    font-size: 36rpx;

    .balance_text {
      font-size: 50rpx;
      font-weight: bold;

      text {
        font-size: 32rpx;
        font-weight: normal;
        margin-right: 10rpx;
      }
    }
  }

  .nav_box {
    justify-content: space-around;

    .box {
      flex: 1;

      image {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }

      padding: 20rpx 60rpx;
      border-radius: 10rpx;
      background: linear-gradient(90deg, rgb(255, 150, 100), rgb(255, 106, 89));

      .zyhs {
        font-size: 46rpx;
        margin-right: 20rpx;
      }

      .zyhs-zhuanzhang1 {
        font-size: 50rpx;
      }
    }

    .right {
      margin-left: 30rpx;
      background: linear-gradient(90deg, rgb(60, 152, 250), rgb(130, 120, 220));
    }
  }
}

/deep/.u-tabs__wrapper__nav__item {
  flex: 1;
}

.scroll_view {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.listBox {
  box-sizing: border-box;
  padding: 20upx;
  padding-top: 0;

  .listBoxCard {
    margin-top: 20upx;
    background-color: #fff;
    border-radius: 10upx;
    box-sizing: border-box;
    padding: 20upx;

    .content {
      view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>
