<template>
  <view class="page">
    <!-- 钱包 -->
    <view class="recharge-me ">
      <view class="wallet-content">

        <view class="h-balance-wrap">
          <view class="h-balance">
            <view class="recharge-balance">
              <view class="name">已用额度</view>
              <view class="Number" style="font-size: 48rpx">{{ data.amount || 0 }}</view>
            </view>
            <text style="position: absolute;top:32rpx;right: 32rpx;color:#FFAF36" @click="openUnbindpopup">解绑</text>
          </view>
          <view style="display: flex;justify-content: space-between;margin: 8rpx 0rpx">
            <text>赠送会员编号：</text>
            <text>{{ data.userNo }}</text>
          </view>
          <view style="display: flex;justify-content: space-between;margin: 8rpx 0rpx">
            <text>收到时间：：</text>
            <text>{{ data.createTime }}</text>
          </view>
        </view>
        <text style="margin:24rpx 0;overflow: hidden">使用记录</text>
        <view>
          <mescroll-item ref="MescrollItem" :i="0" :index="0" :cardId="data.id" :height="scrollViewHeight">
          </mescroll-item>
        </view>

      </view>
    </view>
    <uni-popup ref="unbindpopup" type="dialog">
      <uni-popup-dialog type="warn" title="警告" content="请确认是否要解除绑定该亲情卡" @confirm="untieCard"
                        ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>

import MescrollItem from "./module/mescrollUni-item.vue";

export default {
  components: {
    MescrollItem
  },
  data() {
    return {
      data: {},
      scrollViewHeight: '',
    };
  },
  onLoad(option) {
    this.data = JSON.parse(option.data)
    console.log(this.data)
    let sysInfo = uni.getSystemInfoSync()
    this.scrollViewHeight = sysInfo.windowHeight - (sysInfo.windowWidth / 750) * 500 + 'px'
    console.log(' this.scrollViewHeight', this.scrollViewHeight)
  },
  onShow() {
  },
  methods: {
    openUnbindpopup() {
      this.$refs.unbindpopup.open()

    },
    //解除绑定
    untieCard() {
      this.$api.untieCard({
        cardId: this.data.id
      }).then((res) => {
        uni.showToast({
          icon: 'success',
          duration: 2000,
          title: '解绑成功'
        });
        setTimeout(() => {
          uni.redirectTo({
            url: '/myPages/familyCard/index'
          });
        }, 2000)
      })
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../../common/css/common.css';
@import './familyCard.scss';
</style>
