<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="我的积分" left-arrow />

    <view class="integral">
      <view class="integral-money">
        <view class="integral-icon">
          <image class="yuanbao" data-name="just"
            src="https://zongzhi.xuqidata.com:5009/xq-ssg/f54e70db20b68ca5518a3e0d8cef85dadff1f43373719574465aed40d53c645c.png" />
        </view>
        <view class="money">
          {{ userInfoCount.integral || 0 }}
        </view>
      </view>
      <view class="tab-outline">
        <view class="tab-content">
          <view :class="'tab-left ' + (currentTab === item.id ? 'tab-left-active' : '')" @click="tabLeft"
            :data-item="item" v-for="(item, index) in typeList" :key="index">
            {{ item.title }}
          </view>
        </view>
      </view>

      <view class="page-content">
        <view v-if="dataList.length !== 0" class="cell" v-for="(item, index) in dataList" :key="index">
          <view class="cell-left">
            <view class="title">
              {{ item.integralTypeName || item.integralName }}
              <view class="time" v-if="currentTab !== 1">
                <!-- {{ toods.getDateTime(item.createTime, 2) }} -->
              </view>
            </view>
            <view class="number">
              {{ item.score > 0 ? '+' + item.score : item.score }}
            </view>
          </view>
        </view>
        <van-empty v-if="dataList.length === 0" description="暂无积分" />
      </view>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const {
  //   myApi
  // } = app.globalData.api;
  import * as myApi from '@/api/myApi';

  export default {
    components: {},
    data() {
      return {
        currentTab: 1,
        checked: false,
        userInfoCount: uni.getStorageSync('userInfoCount'),
        typeList: [{
            id: 1,
            title: '积分规则'
          },
          {
            id: 2,
            title: '积分明细'
          }
        ],
        permas: {
          userId: uni.getStorageSync('userInfoData').userId,
          pageNo: 1,
          pageSize: 15
        },
        dataList: []
      };
    },
    async onLoad() {
      this.userInfoCount = uni.getStorageSync('userInfoCount')
      this.getIntegral();
    },
    onReachBottom() {
      this.permas.pageNo = this.permas.pageNo + 1;
      this.permas = this.permas
      if (this.currentTab === 1) {
        this.getIntegral();
      } else if (this.currentTab === 2) {
        this.getuserIntegralDetail();
      }
    },
    methods: {
      // tab切换
      tabLeft(event) {
        const {
          item
        } = event.currentTarget.dataset;
        this.currentTab = item.id
        this.permas.pageNo = 1;
        this.permas = this.permas
        this.dataList = []

        if (item.id === 1) {
          this.getIntegral();
        } else if (item.id === 2) {
          this.getuserIntegralDetail();
        }
      },

      // 获得用户积分规则分页
      async getIntegral() {
        const res = await myApi.userIntegralRruleApi(this.permas);
        if (res.data) {
          let resultList = [...this.dataList, ...res.data.list];
          this.dataList = resultList
        }
      },

      // 获得用户积分规则分页
      async getuserIntegralDetail() {
        const res = await myApi.userIntegralDetailApi(this.permas);
        if (res.data) {
          let resultList = [...this.dataList, ...res.data.list];
          this.dataList = resultList
        }
      }
    }
  };
</script>
<style lang="less">
  .integral {
    .integral-money {
      height: 80rpx;
      width: 100%;
      margin-top: 28rpx;
      margin-bottom: 40rpx;
      display: flex;
      justify-content: center;

      .integral-icon {
        height: 80rpx;
        width: 80rpx;
        margin-right: 10rpx;

        .yuanbao {
          height: 100%;
          width: 100%;
        }
      }

      .money {
        font-size: 52rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fe3b53;
      }
    }

    .tab-outline {
      height: 70rpx;
      width: 100%;
      padding-left: 50rpx;
      padding-right: 50rpx;

      .tab-content {
        width: 100%;
        height: 100%;
        background: #f1f0ef;
        border-radius: 45px;
        display: flex;

        .tab-left {
          width: 50%;
          height: 70rpx;
          line-height: 70rpx;
          text-align: center;
          border-radius: 45px;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .tab-left-active {
          background: #fe3b53;
          color: #ffffff;
        }

        .tab-right {
          width: 50%;
          height: 70rpx;
          line-height: 70rpx;
          text-align: center;
          border-radius: 45px;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .tab-right-active {
          background: #fe3b53;
          color: #ffffff;
        }
      }
    }

    .page-content {
      margin-top: 40rpx;
      padding-left: 36rpx;
      padding-right: 36rpx;

      .cell {
        width: 100%;
        height: 120rpx;
        background: #ffffff;
        border-bottom: 1rpx solid #efefef;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .cell-left {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .title {
            font-size: 32rpx;

            font-weight: 400;
            color: #333333;
            line-height: 32rpx;
            margin-bottom: 16rpx;

            .time {
              font-size: 24rpx;

              font-weight: 400;
              color: #999999;
              margin-top: 16rpx;
            }
          }

          .number {
            font-size: 32rpx;

            font-weight: 400;
            color: #fe3b53;
          }
        }
      }
    }
  }
</style>