<template>
  <view class="shop">
    <view class="fixtitle">
      <view>当前积分：{{ userInfo.score || 0 }}</view>
      <button
        v-if="!userInfo.phone"
        class="btn"
        open-type="getPhoneNumber"
        @getphonenumber="handlePhoneLogin"
      >
        登录
      </button>
    </view>
    <view v-if="modules && modules.length" class="base-list">
      <list-item
        v-for="item in modules"
        :key="item.id"
        :item="item"
        :btn="true"
        :disabled="(userInfo.score || 0) < item.score"
        class="base-list-item"
        @click="handleDetail(item)"
      />
    </view>
  </view>
</template>
<script>
import login from "@/lib/utils/login";
import { getUserInfo } from "@/lib/api/user";
import { getScoreList, exchangeScore } from "@/lib/api/shop";
import listItem from "@/components/list-item/list-item.vue";

export default {
  name: "PageHome",
  components: {
    listItem,
  },
  data() {
    return {
      userInfo: {},
      modules: [],
      tabStyle: "",
      showTask: false,
    };
  },
  async onLoad() {
    this.userInfo = await login.getUserInfo();

    uni.showLoading({
      title: "加载中",
    });
    this.loadModules().then(() => {
      uni.hideLoading();
    });
  },
  async onShow() {
    this.userInfo = await login.getUserInfo();
    this.getUserInfo();
  },
  onShareAppMessage() {
    return {
      title: "云果国潮会员中心",
      imageUrl:
        "https://yggc.oss-cn-beijing.aliyuncs.com/images/81d939394aea637ac0f6a3026d1a38e6.jpg",
      path: "/pages/index/index",
    };
  },
  onShareTimeline() {
    return {
      title: "云果国潮会员中心",
      imageUrl:
        "https://yggc.oss-cn-beijing.aliyuncs.com/images/81d939394aea637ac0f6a3026d1a38e6.jpg",
      path: "/pages/index/index",
    };
  },
  async onPullDownRefresh() {
    await this.loadModules().catch((e) => console.log(e));
    uni.stopPullDownRefresh();
  },
  // mounted() {},
  methods: {
    async getUserInfo() {
      const res = await getUserInfo();
      this.userInfo = { ...this.userInfo, ...res.data };
      uni.setStorageSync("userinfo", JSON.stringify(this.userInfo));
    },
    async loadModules() {
      try {
        const data = await getScoreList();
        if (data.errno == 10000) {
          this.modules = data.data;
          // this.endTime = data.diff_time;
          // this.runCd();
        } else {
          uni.showToast({
            icon: "none",
            title: data.errmsg,
            duration: 3000,
          });
        }
      } catch (e) {
        uni.showToast({
          icon: "none",
          title: "出错啦，请稍后重试",
          duration: 3000,
        });
      }
    },

    async handlePhoneLogin(e) {
      if (e.detail.code) {
        login.setPhoneData({
          phone_code: e.detail.code,
          callback: (data) => {
            this.userInfo = data;
            this.getUserInfo();
          },
          fail: (e) => {
            console.log(e);
          },
        });
      }
    },

    async handleDetail(item) {
      if (item.score > Number(this.userInfo.score)) {
        uni.showToast({
          icon: "none",
          title: "积分不足",
        });
        return;
      }

      await new Promise((resolve, reject) => {
        uni.showModal({
          title: "提示",
          content: "是否兑换当前商品？",
          success: function (res) {
            if (res.confirm) {
              resolve();
            } else if (res.cancel) {
              reject();
            }
          },
        });
      });

      const res = await exchangeScore({
        sku_id: item.id,
      });

      if (res.errno === 10000) {
        uni.showToast({
          icon: "none",
          title: "兑换成功",
        });
        this.getUserInfo();
      }
    },
  },
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
