<template>
  <!-- 我的积分 我的余额-->
  <view class="">
    <u-navbar placeholder :title="type == 0 ? '我的余额' : '我的积分'" bgColor="#F6F8FA" :autoBack="true"></u-navbar>
    <view class="mainBox">
      <view class="redBg flexV">
        <view class="title">{{ type == 0 ? '余额' : '积分' }}</view>
        <view class="price flexV" v-if="type == 0">
          <text>{{ integral }}</text>
          <view class="btn flexC" @click="toRecharge">立即充值</view>
        </view>
        <view class="num flexA" v-else>
          <image src="/static/shopCarIc/pointsIc.png" mode=""></image>
          {{ integral }}
        </view>
      </view>
      <view class="detailBox">
        <view class="detailTitle">{{ type == 0 ? '余额明细' : '积分明细' }}</view>
        <view class="time flexJ" v-for="item in recordList" :key="item.id">
          <text>{{ item.createtime }}</text>
          <text>{{ item.before * 1 - item.after * 1 > 0 ? '-' : '+' }}{{ type == 0 ? item.money : item.score }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getyue, getMoneyDetail, getMyScore, getScoreDetail } from '@/api/'
onLoad(e => {
  //console.log(11111,e.type) //0余额 1积分
  type.value = e.type //0余额 1积分
  if (e.type == 0) {
    getyues() // 我的余额
    getMoneyDetails() //余额明细
  } else {
    getMyScores() //我的积分
    getScoreDetails() //我的积分明细
  }
})
const toRecharge = () => {
  uni.navigateTo({
    url: '/pages/mine/recharge'
  })
}
let integral = ref(0) //积分 //余额
let recordList = ref([]) //明细
let type = ref(0) //0 余额 1积分
// 我的余额
const getyues = async () => {
  try {
    const res = await getyue()
    integral.value = res.money
    uni.setStorageSync('balance', res.money)
    console.log('getyue', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getyue', err)
  }
}
// 余额明细
const getMoneyDetails = async () => {
  try {
    const res = await getMoneyDetail()
    recordList.value = res
    console.log('getMoneyDetail', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getMoneyDetail', err)
  }
}
// 我的积分
const getMyScores = async () => {
  try {
    const res = await getMyScore()
    integral.value = res.score
    uni.setStorageSync('myPoints', res.score)
    console.log('getMyScore', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getMyScore', err)
  }
}
// 积分明细
const getScoreDetails = async () => {
  try {
    const res = await getScoreDetail()
    recordList.value = res
    console.log('getScoreDetail', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getScoreDetail', err)
  }
}
</script>

<style lang="scss">
.mainBox {
  padding: 24rpx;

  .redBg {
    padding: 36rpx 0 40rpx;
    width: 702rpx;
    border-radius: 16rpx;
    opacity: 1;
    background: #fb4c3cff;

    .title {
      color: #ffffffff;
      font-size: 40rpx;
      font-weight: 700;
    }

    .price {
      margin-top: 16rpx;

      text {
        color: #ffffffff;
        font-size: 64rpx;
        margin-bottom: 24rpx;
      }

      .btn {
        width: 256rpx;
        height: 80rpx;
        border-radius: 80rpx;
        color: #000000ff;
        font-size: 32rpx;
        font-weight: 700;
        background: #fff1f0ff;
      }
    }

    .num {
      margin-top: 28rpx;
      color: #ffffffff;
      font-size: 64rpx;

      image {
        margin-right: 22rpx;
        width: 64rpx;
        height: 64rpx;
      }
    }
  }

  .detailBox {
    margin-top: 24rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;

    .detailTitle {
      color: #000000ff;
      font-size: 32rpx;
      font-weight: 700;
      margin-bottom: 16rpx;
    }

    .time {
      margin-bottom: 24rpx;
      color: #000000e6;
      font-size: 28rpx;
    }
  }
}
</style>