<template>
  <div class="page" :class="{ page_red: theme === 1 }">
    <scroll-view class="page__scroll" :scroll-y="true" @scrolltolower="getMore">
      <div class="info">
        <div class="info__top">
          <div class="info__title">当前可用积分</div>
          <!--<div class="exchange">
                        <div class="exchange__text">兑换记录</div>
                        <i class="iconfont iconarrow exchange__arrows"></i>
                    </div>-->
        </div>
        <div class="info__content">
          <div class="info__num">{{ data.pointsInfo.points }}</div>
          <!--<i class="iconfont iconarrow info__arrows"></i>-->
        </div>
        <!--<div class="info__text">{{ '暂不可用积分：1' }}</div>-->
      </div>
      <div class="title">
        <img class="title__star" src="/static/integral/star.jpg" alt="" />
        <div class="title__text">积分明细</div>
        <img class="title__star" src="/static/integral/star.jpg" alt="" />
      </div>
      <ul class="list">
        <li class="list__item" v-for="(item, index) in list" :key="index">
          <div class="list__left">
            <div class="list__title">{{ item.remark }}</div>
            <div class="list__time">{{ item.time }}</div>
          </div>
          <div
            class="list__right"
            :class="{ 'list__right--red': item.type === 2 }"
          >
            {{ (item.type === 1 ? "+" : "-") + item.points }}
          </div>
        </li>
      </ul>
      <my-null v-if="loading && !list.length" title="暂无明细"></my-null>
    </scroll-view>
  </div>
</template>

<script>
import MyNull from "../../components/layout/null";

export default {
  name: "",
  components: { MyNull },
  // 数据
  data() {
    return {
      page: 1,
      data:{},
      list: [],
      loading: false, // 是否加载完成
    };
  },

  onLoad() {
    const self = this;

    if (!self.loading) {
      uni.showLoading({
        title: "加载中...",
      });
    }
  },

  onShow() {
    const self = this;

    self.getList();
    self.getData();
    self.fn.updateUserInfo();
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#27a34f",
    });
  },

  // 函数
  methods: {
    getData() {
      this.api.get("/My/GetMy").then((res) => {
          this.data = res.data;
      });
    },
    // 获取积分明细列表
    getList() {
      const self = this;

      self.page = 1;
      self.api
        .get("/My/GetPointsList", {
          type: "0",
          pageIndex: self.page,
          pageSize: "20",
        })
        .then((res) => {
          if (res.data.list.length) {
            self.page++;
          }
          self.list = res.data.list;
          self.loading = true;
          uni.hideLoading();
        });
    },

    // 获取积分明细更多
    getMore() {
      const self = this;

      self.api
        .get("/My/GetPointsList", {
          type: "0",
          pageIndex: self.page,
          pageSize: "20",
        })
        .then((res) => {
          if (res.data.list.length) {
            self.page++;
          }
          self.list = self.list.concat(res.data.list);
        });
    },
  },

  // 数据计算
  computed: {
    // 判断主题  1:红色  2：绿色
    theme() {
      return this.$store.state.common.theme;
    },
    user() {
      return this.$store.state.user;
    },
  },

  // 数据监听
  watch: {},
};
</script>

<style>
page {
  height: 100%;
}
</style>

<style lang="scss" scoped>
.page {
  height: 100%;

  &__scroll {
    height: 100%;
  }
}

.info {
  /*height: px(540);*/
  height: px(450);
  padding: px(50) px(55) 0;
  background-color: #27a34f;

  &__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__title {
    font-size: px(36);
    color: #fff;
  }

  &__content {
    display: flex;
    align-items: baseline;
    margin-top: px(60);
  }

  &__num {
    font-size: px(100);
    color: #fff;
  }

  &__arrows {
    margin-left: px(20);
    font-size: px(36);
    color: #fff;
  }

  &__text {
    margin-top: px(80);
    font-size: px(36);
    color: #fff;
  }
}

.exchange {
  display: flex;
  align-items: baseline;

  &__text {
    font-size: px(32);
    color: #fff;
  }

  &__arrows {
    margin-left: px(15);
    font-size: px(32);
    color: #fff;
  }
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: px(140);
  margin-top: px(-70);
  border-radius: px(70);
  overflow: hidden;
  background-color: #fff;

  &__star {
    width: px(30);
    height: px(30);
  }

  &__text {
    padding: 0 px(30);
    font-size: px(36);
    color: #333;
  }
}

.list {
  padding: px(55);

  &__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(185);
    padding: 0 px(50);
    margin-top: px(40);
    border-radius: px(10);
    background-color: #fff;

    &:first-child {
      margin-top: 0;
    }
  }

  &__left {
  }

  &__title {
    font-size: px(36);
    color: #333;
  }

  &__time {
    margin-top: px(20);
    font-size: px(28);
    color: #999;
  }

  &__right {
    font-size: px(46);
    color: #68c009;

    &--red {
      color: red;
    }
  }
}

.page_red {
  .info {
    background-color: #27a34f;
  }
}
</style>