<template>
  <scroll-view
    class="member"
    :style="{
      height: '100vh'
    }"
    scroll-y
    :scroll-top="pageScrollTop"
    :lower-threshold="200"
    :throttle="false"
    scroll-with-animation
    @scroll="scroll"
    @scrolltolower="loadGuessData"
  >
    <nav-bar
      title="会员中心"
      bg-status="scroll"
      :scroll-top="scrollTop"
      :left-btns="leftBtns"
      :bg-color="bgColor"
      top-show-title
      :title-color="titleColor"
      @left-click="leftBtnsClickHandler"
      @updatePadding="updatePadding"
    />
    <view
      class="container"
      :style="{
        paddingTop: `${paddingTop}px`
      }"
    >
      <!-- 会员卡片与指示器 -->
      <member-card-and-pointer
        :login="login"
        :level="level"
        :name="name"
        :avatar="avatar"
        :view-level="viewLevel"
        :level-list="levelList"
        @handleLogin="handleLogin"
        @updateViewLevel="updateViewLevel"
      />
      <!-- 权益说明 -->
      <introduce
        :login="login"
        :level="level"
        :benefits-info-list="benefitsInfoList"
        :title-module="titleModule"
        :introduce-title="introduceTitle"
      />
      <!-- 返现说明 -->
      <cashback
        :login="login"
        :amount-list="amountList"
        :level-gift-card-ratio-module="levelGiftCardRatioModule"
      />
      <!-- banner资源位 -->
      <member-banner :banner-module="bannerModule" />
      <!-- 会员专属优惠券 -->
      <member-coupon :login="login" :coupon-module="couponModule" @handleLogin="handleLogin" />
      <!-- 会员尊享商品 -->
      <member-goods v-if="enjoyGoods.goodsList.length" :enjoy-goods="enjoyGoods" />
      <!-- 猜你喜欢 -->
      <view class="guess-you-like">
        <view class="guess-you-like-content">
          <goodsCard :no-share="true" header-type="center" :goods-list="guessYouLike" />
          <uni-load-more :status="loadingType" />
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import navBar from "./components/navBar";
import memberCardAndPointer from "./components/memberCardAndPointer";
import introduce from "./components/introduce";
import cashback from "./components/cashback";
import memberBanner from "./components/memberBanner";
import memberCoupon from "./components/memberCoupon";
import memberGoods from "./components/memberGoods";
import goodsCard from "@/components/goodsCard";
import { getGoodsList } from "@/api/home.api";
import { queryMemberCenterInfo } from "@/api/member.api";
let navBarLeftBtns = false;
// #ifdef MP-WEIXIN
navBarLeftBtns = [{ icon: "arrow-left" }, {}];
// #endif
export default {
  components: {
    navBar,
    memberCardAndPointer,
    introduce,
    cashback,
    memberBanner,
    memberCoupon,
    memberGoods,
    goodsCard
  },
  data() {
    return {
      leftBtns: navBarLeftBtns,
      bgColor: "#fff",
      titleColor: "#fff",
      scrollTop: 0,
      pageScrollTop: 0,
      paddingTop: 0,
      // 以上的属性均用于会员中心自定义导航栏
      login: true, // 用户是否登陆了
      guessYouLike: [], // 猜你喜欢
      pageForm: {
        // 猜你喜欢请求参数
        pageNo: 0,
        pageSize: 10,
        pageType: 0
      },
      loadingType: "loading",
      progress: "finished",
      avatar: "", // 头像
      name: "", // 用户名
      level: 1, // 用户实际等级
      viewLevel: 1, // 用户浏览等级
      levelList: [], // 等级列表
      benefitsInfoList: [], // 权益列表
      titleModule: [], // 未登录状态下的跑马灯title
      introduceTitle: {}, // 权益title
      amountList: [], // 已省&礼品卡余额
      levelGiftCardRatioModule: {}, // 支付返礼品卡系数
      bannerModule: {}, // banner位
      couponModule: {}, // 优惠券信息
      enjoyGoods: {}, // 尊享商品
      firstRequest: true
    };
  },
  onShow() {
    this.setLoginStatus();
    this.queryMemberCenterInfo();
  },
  onLoad() {
    this.loadGuessData();
  },
  methods: {
    leftBtnsClickHandler() {
      // 返回操作
      uni.navigateBack();
    },
    setLoginStatus() {
      this.login = uni.getStorageSync("token") ? true : false;
    },
    updatePadding(paddingTop) {
      return (this.paddingTop = paddingTop);
    },
    scroll(e) {
      const scrollTop = e.target.scrollTop;
      this.scrollTop = scrollTop;
      // uni.showToast({
      //   title: scrollTop + ""
      // });
    },
    updateViewLevel(level) {
      // 更新浏览的会员等级
      this.viewLevel = level;
      this.initPageData();
    },
    initPageData() {
      const {
        level,
        loginAllLevelList,
        noLogin,
        levelGiftCardRatioModule,
        amountList,
        bannerModule,
        // enjoyGoods,
        phoneNo,
        avatar
      } = this.pageData;
      this.name = phoneNo || "";
      this.avatar = avatar || "";
      // 设置尊享商品部分数据
      // this.enjoyGoods = enjoyGoods;
      // 设置bannerModule部分数据
      this.bannerModule = bannerModule || {};
      // 设置浏览等级和实际等级
      this.level = level || 1;
      if (this.login) {
        const { benefitsInfoList, desc, title, jumpUrl } = loginAllLevelList[
          this.viewLevel - 1
        ]?.benefitsModule;
        this.enjoyGoods = loginAllLevelList[this.viewLevel - 1]?.enjoyGoods;
        this.levelList = loginAllLevelList;
        // 设置累积权益已省 & 礼品卡余额
        this.amountList = amountList || [];
        this.benefitsInfoList = benefitsInfoList;
        this.couponModule = loginAllLevelList[this.viewLevel - 1]?.couponModule;
        this.introduceTitle = {
          desc,
          title,
          jumpUrl
        };
        return;
      }
      // 获取权益(未登录)
      this.benefitsInfoList = noLogin.benefitsInfoList || [];
      // 获取优惠券部分信息(未登录)
      this.couponModule = noLogin.couponModule || {};
      // 获取未登录状态权益介绍部分的跑马灯文字
      this.titleModule = noLogin?.titleModule || [];
      // 设置支付返礼品卡系数
      this.levelGiftCardRatioModule = levelGiftCardRatioModule || {};
    },
    async queryMemberCenterInfo() {
      // 查询会员中心信息
      const [data, err] = await queryMemberCenterInfo();
      if (err) return;
      this.pageData = data;
      if (data.noLogin && uni.getStorageSync("token")) {
        uni.removeStorageSync("token");
        uni.navigateTo({
          url: "/pages/user/login"
        });
        return;
      }
      this.level = data.level;
      if (this.firstRequest) this.viewLevel = data.level;
      this.firstRequest = false;
      this.initPageData();
    },
    async loadGuessData() {
      // 获取猜你喜欢商品数据
      let goodsIdArr = [];
      if (this.loadingType === "noMore" || this.progress === "loading") return;
      this.loadingType = "loading";
      this.progress = "loading";
      this.pageForm.pageNo++;
      const [goodsData, err] = await getGoodsList(this.pageForm);
      if (err) {
        this.guessYouLike = [];
        return;
      }
      this.progress = "finished";
      if (goodsData.goodsList) {
        goodsData.goodsList.forEach(item => {
          goodsIdArr.push(item.goods.goodsId);
        });
      }
      if (!goodsData || !goodsData.hasNext || !goodsData.goodsList) {
        this.loadingType = "noMore";
      }
      this.guessYouLike = this.guessYouLike.concat(goodsData.goodsList || []);
    },
    handleLogin() {
      uni.removeStorageSync("token");
      uni.navigateTo({
        url: "/pages/user/login"
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/style/var.scss";
.member {
  position: relative;
  background-image: url("https://img.lkbang.net/xcx/member-bg.png");
  background-size: 750rpx;
  background-repeat: no-repeat;
  .container {
    padding-bottom: 24rpx;
    .guess-you-like {
      padding-top: 26rpx;
      background: $gray-1;
      display: flex;
      justify-content: center;
      &-content {
        width: 702rpx;
        box-sizing: border-box;
        border-radius: 24rpx;
      }
    }
  }
}
</style>
