<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="Tab_con flex_r flex_ac flex_jb">
      <view
        class="tab_list flex_r flex_ac"
        :class="current == index ? 'active' : ''"
        v-for="(item, index) in TabList"
        :key="index"
        @tap="SetStatus(index)"
      >{{ item.title }}</view>
    </view>
    <!-- 顶部导航-end -->
    <!-- 积分列表 -->
    <view class="con">
      <view class="list" v-for="(item, index) in list" :key="index">
        <view class="list_head flex_r flex_ac flex_jb">
          <view class="head_name">{{ type(item.type) }}</view>
          <view :class="['head_price',item.act == '+' ? 'g_color' : '']">{{item.act}}{{ item.num }}</view>
        </view>
        <view class="list_con flex_r flex_ac flex_jb">
          <view class="list_time">{{ item.create_time }}</view>
          <view class="list_balance">茶宝余额{{ item.after }}</view>
        </view>
      </view>
      <not-goods v-if="haveGoods" textStr="暂无积分信息"></not-goods>
    </view>
    <!-- 积分列表 -->
  </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";
import notGoods from "@/components/not-goods/index.vue";
export default {
  components: {
    notGoods
  },
  data() {
    return {
      haveGoods: false, // 是否有商品
      current: 0,
      TabList: [
        { title: "全部", sauts: "" },
        { title: "收益", sauts: 1 },
        { title: "支出", sauts: 2 }
      ],
      list: [],
      page: 1
    };
  },
  onShow: function() {
    this.page = 1;
    this.list = [];
    this.loadData();
  },
  methods: {
    loadData: function() {
      let that = this;
      let data = {
        type: this.current == 0 ? "" : this.current,
        page: page,
        limit: 10
      };
      uni.showLoading({ mask: true });
      post("v1/my/chabao", data).then(res => {
        uni.hideLoading();
        if (res.code === 0) {
          if (res.data.data.data.length > 0) {
            this.list = this.list.concat(res.data.data.data);
          } else {
            if (this.page == 1) {
              this.haveGoods = true;
              this.page = -1;
            } else {
              this.page = -1;
              appEv.errTips("暂无更多");
            }
          }
        } else {
          if (page == 1) {
            this.haveGoods = true;
            this.page = -1;
          } else {
            this.page = -1;
            appEv.errTips("暂无更多");
          }
        }
      });
    },
    SetStatus: function(i) {
      this.current = i;
      page = 1;
      this.list = [];
      this.haveGoods = false;
      this.loadData();
    }
  },
  computed: {
    type() {
      return (va) => {
        let is = uni.getStorageSync("isAuthentication");
        switch (va) {
          case 0: return "购物送茶宝";
          case 1: return "签到送茶宝";
          case 2: return "批发使用茶宝";
          case 3: return "退款加茶宝";
          case 4: return "提现转茶宝";
          case 5: return "支出赠送茶宝";
          case 6: return "兑换产品使用茶宝";
          case 7: return "手动调整茶宝";
          case 8: return "核销后送茶宝";
          case 9: return "云宝转化茶宝";
          case 10: return "收到赠送茶宝";
          case 11: return is ? "实名送茶宝" : "注册送茶宝";
          case 12: return "分享用户送茶宝";
          case 13: return "联合发起人赠送";
          case 14: return "权限激活赠送";
          default: return "";
        }
      }
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (page != -1) {
      var that = this;
      setTimeout(function() {
        ++page;
        that.loadData();
      }, 800);
    }
  }
};
</script>
<style lang="scss">
// 页面配置
// 页面配置-end

// 顶部列表
.tab_list {
  height: 100%;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #808080;
}

.Tab_con {
  width: 100%;
  height: 92rpx;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.active {
  color: #1bbd89;
  border-bottom: 6rpx solid #1bbd89;
}

// 顶部列表-end

// 资金列表
.con {
  border-top: 16rpx solid #f4f4f4;
}

.list_con {
  width: 100%;
  overflow: hidden;
}

.list_head {
  width: 100%;
  overflow: hidden;
}

.list_time {
  font-size: 24rpx;
  color: #a1a1a1;
}

.list_balance {
  font-size: 24rpx;
  color: #a1a1a1;
}

.head_price {
  font-size: 32rpx;
  font-family: "SourceHanSansCN-Medium";
}

.head_name {
  font-size: 30rpx;
  color: #212121;
  font-family: "SourceHanSansCN-Medium";
}

.list {
  width: 100%;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;
  border-bottom: 3rpx solid #f4f4f4;
}

// 资金列表-end

// 状态颜色
.g_color {
  color: #1bbd89;
}

.y_color {
  color: #f15b21;
}

// 状态颜色-end
</style>