<template>
  <view class="home-index2">
    <view class="BanContain">
      <view
        class="status_bar"
        :style="{ height: statusBarHeight + 'px' }"
      ></view>
      <view class="navBar" :style="{ height: titleBarHeight + 'px' }">
        <image class="logo" :src="require('@/assets/logo.png')" mode=""></image>
      </view>
    </view>
    <view :style="{ marginTop: BarHeight + 'px' }"></view>
    <swiper
      v-if="modules.rotation_images && modules.rotation_images.length"
      class="swiper"
      circular
      indicator-dots
      autoplay
    >
      <swiper-item
        v-for="item in modules.rotation_images"
        :key="item.module_id"
      >
        <image
          class="swiper-item"
          :src="item.img"
          mode=""
          @click="jumpModuleAll(item.url)"
        ></image>
      </swiper-item>
    </swiper>
    <view class="icon-list" v-if="modules.shortcut && modules.shortcut.length">
      <view
        v-for="item in modules.shortcut"
        :key="item.module_id"
        class="icon-item"
        @click="jumpModuleAll(item.url)"
      >
        <image class="icon" :src="item.img"></image>
        {{ item.name }}
      </view>
    </view>
    <view class="title">最新推荐</view>
    <view v-if="modules.zxtj && modules.zxtj.length" class="base-list">
      <list-item
        v-for="item in modules.zxtj"
        :key="item.module_id"
        :item="item"
        class="base-list-item"
        @click="handleDetail(item)"
      >
      </list-item>
    </view>
    <view class="fixed-btns">
      <!-- <image
        class="fixed-btn"
        :src="require('@/assets/icon/icon-btn-service.png')"
        @click="jumpModuleAll('/pages/help/help_contact')"
      ></image>
      <image
        class="fixed-btn"
        :src="require('@/assets/icon/icon-btn-message.png')"
        @click="jumpModuleAll('/pages/my/messages')"
      ></image>
       -->
      <image
        v-if="showTask"
        class="fixed-btn"
        :src="require('@/assets/icon/icon-btn-sign.png')"
        @click="jumpModuleAll('/pages/task/index')"
      ></image>
    </view>
  </view>
</template>
<script>
import api from "@/lib/api/api";
import listItem from "@/components/list-item/list-item.vue";

export default {
  name: "PageHome",
  components: {
    listItem,
  },
  data() {
    return {
      statusBarHeight: 0, // 自定义导航
      titleBarHeight: 44, // 自定义导航
      BarHeight: 0, // 自定义导航
      userInfo: {},
      modules: {},
      tabStyle: "",
      showTask: false,
    };
  },
  onLoad() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
    }
    uni.showLoading({
      title: "加载中",
    });
    this.loadModules().then(() => {
      uni.hideLoading();
    });
  },
  onShow() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
    } else {
      this.userInfo = {};
    }
    this.getTaskInfo();
  },
  onShareAppMessage() {
    return {
      title: "各种爆款手办/盲盒，还能0元抽热款～快来试试你的欧气！",
      imageUrl:
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/45bfb688e6e9dba557f64fd052e850cc.png",
      path: "/pages/index/index",
    };
  },
  onShareTimeline() {
    return {
      title: "各种爆款手办/盲盒，还能0元抽热款～快来试试你的欧气！",
      imageUrl:
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/45bfb688e6e9dba557f64fd052e850cc.png",
      path: "/pages/index/index",
    };
  },
  async onPullDownRefresh() {
    await this.loadModules().catch((e) => console.log(e));
    uni.stopPullDownRefresh();
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;

    // #ifdef MP
    this.statusBarHeight = systemInfo.statusBarHeight;
    // this.titleBarHeight = systemInfo.statusBarHeight;
    // #endif

    // #ifdef MP-WEIXIN
    this.statusBarHeight = systemInfo.statusBarHeight;
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    this.titleBarHeight =
      (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
      menuButtonInfo.height;
    // #endif

    // #ifdef MP-ALIPAY
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.titleBarHeight =
      systemInfo.statusBarHeight + systemInfo.titleBarHeight;
    // #endif

    // #ifdef APP-PLUS
    this.statusBarHeight = systemInfo.statusBarHeight;
    // this.titleBarHeight = 44;
    // #endif

    // #ifdef H5
    this.statusBarHeight = 0;
    // this.titleBarHeight = systemInfo.statusBarHeight;
    // #endif
    this.BarHeight = this.statusBarHeight + this.titleBarHeight;
  },
  methods: {
    async loadModules() {
      try {
        const data = await api.homeModules();
        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 getTaskInfo() {
      if (!this.userInfo.session) {
        this.showTask = true;
        return Promise.reject();
      }
      const data = await api.getTaskInfo(this.userInfo.session);
      this.showTask = !data.is_current_signin;
    },

    jumpModuleAll(url) {
      if (!url) return;

      if (/^https?:\/\//i.test(url)) {
        uni.navigateTo({
          url: `../webview/webview?url=${encodeURIComponent(url)}`,
        });
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },

    handleDetail(item) {
      if (item.play_type === 1) {
        this.jumpModuleAll(`../detail/detail?id=${item.id}`);
      } else {
        this.jumpModuleAll(`../reward/detail?id=${item.id}`);
      }
    },
  },
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
