<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-12-07 17:51:37
 * @FilePath: /swx/src/pages/index/index.vue
 * @Description: 首页
-->
<template>
  <view id="page-header">
    <view v-if="carousel.length">
      <swiper class='slide-box' indicatorColor='#94B294' indicatorActiveColor='#FFFFFF' current="current"
        :duration="duration" :interval="interval" :circular="isCircular" :autoplay="isAutoplay"
        :indicatorDots="hasIndicatorDots">
        <swiper-item v-for="(item, idx) in carousel" :key="idx">
          <image @tap="goTo(item.id)" :src="item.cover" class="slide-image" />
        </swiper-item>
      </swiper>
    </view>
    <view v-if="no_carousel"><image :src="icon_banner" class="slide-image" style="width: 100%;" /></view>
    <view style="padding: 1rem 1rem 0.5rem 1rem;">
      <text class="bg-gradient" style="font-size: 1.15rem;">推荐活动</text>
    </view>
  </view>
  <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower" style="">
    <view v-if="activity_list.length" style="padding: 0 1rem; background-color: white;">
      <activity-card v-for="(item, index) in activity_list" :key="index" :data="item" status="join"></activity-card>
    </view>
    <!-- TAG: 缺省页 -->
    <van-empty v-if="no_activity" description="暂无推荐活动" class="custom-image" :image="icon_no_join_recommend" />
  </scroll-view>
  <view style="height: 6rem;"></view>
  <navbar activated="home" />
  <van-toast id="van-toast" />

</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref } from 'vue';
import activityCard from '@/components/activity-card.vue'
import icon_no_join_recommend from '@/images/icon/no-tuijian@2x.png'
import icon_banner from '@/images/icon/banner@2x.png'
import navbar from '@/components/navbar.vue'
import Toast from '@/components/vant-weapp/toast/toast';
// import { useDidShow } from '@/hooks/life'
import { useDidShow } from '@tarojs/taro'
// TAG: 模拟onShow事件
useDidShow(() => {
  // console.warn(AUTHOR)
})

const goTo = (id) => {
  Taro.navigateTo({
    url: '../activityDetail/index?id=' + id
  })
}

// 分享功能
wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})
</script>

<script>
import "./index.less";
import { activityHomeAPI } from '@/api/Host/index'
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';

export default {
  name: "indexPage",
  mixins: [mixin.init],
  onReady() {
    if (!Taro.canIUse("getUpdateManager")) {
      Taro.showModal({
        title: "提示",
        content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试",
        showCancel: false,
      });
      return;
    }

    // https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
    const updateManager = Taro.getUpdateManager();

    updateManager.onCheckForUpdate((res) => {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        updateManager.onUpdateReady(function () {
          Taro.showModal({
            title: "更新提示",
            content: "新版本已经准备好，是否重启应用？",
            success: function (res) {
              if (res.confirm) {
                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate();
              }
            },
          });
        });

        updateManager.onUpdateFailed(function () {
          // 新版本下载失败
          Taro.showModal({
            title: "更新提示",
            content: "新版本已上线，请删除当前小程序，重新搜索打开",
          });
        });
      }
    });
  },
  async onShow () {
    Taro.showLoading({ mask: true, title: "加载中..." })
    // 获取活动和轮播信息
    const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
    if (code) {
      // 如果首页为空，让用户新增活动
      // 第一次进入也不一定需要创建活动，需要讨论
      // if (!data.activity_list.length && !data.carousel.length) {
      //   Taro.navigateTo({
      //     url: '../createActivity/index'
      //   })
      // }
      // 绑定服务器时间，判断状态
      data.activity_list.forEach(item => {
        item.server_time = data.server_time;
      });
      this.activity_list = data.activity_list;
      this.carousel = data.carousel;
      this.page = this.page + 1;
      // 缺省页判断
      this.no_activity = this.activity_list.length ? false : true;
      this.no_carousel = this.carousel.length ? false : true;
      Taro.hideLoading()
    }
  },
  onHide () { // 离开当前页面
    this.page = 0;
    this.flag = true;
  },
  mounted () {
    // 设置滚动列表可视高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const headerHeight = await $('#page-header').height();
      const navHeight = await $('#navbar-page').height();
      this.scrollStyle = {
        height: windowHeight - headerHeight - navHeight + 'px'
      }
    }, 500);
  },
  data() {
    return {
      current: 1,
      duration: 500,
      interval: 5000,
      isCircular: true,
      isAutoplay: false,
      hasIndicatorDots: true,
      activity_list: [],
      carousel: [],
      no_activity: false,
      no_carousel: false,
      flag: true,
      page: 0,
      limit: 10,
      scrollStyle: { height: '1000rpx' }
    };
  },
  methods: {
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取推荐活动列表
      const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
      if (code) {
        if (data.activity_list.length) {
          // 绑定服务器时间，判断状态
          data.activity_list.forEach(item => {
            item.server_time = data.server_time;
          });
          this.activity_list = this.activity_list.concat(data.activity_list);
          this.page = this.page + 1;
          this.flag = true;
        } else {
          Toast('没有数据')
        }
      }
    }
  },
  onShareAppMessage(options) {
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "静待花开-活动小助手",    // 默认是小程序的名称(可以写slogan等)
      path: 'pages/index/index',    // 默认是当前页面，必须是以‘/'开头的完整路径
      imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          //
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调（转发成不成功都会执行）
      }
    }
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {
    //   var eData = options.target.dataset;
    //   // 此处可以修改 shareObj 中的内容
    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
    // }
    // 返回shareObj
    return shareObj;
  }
};
</script>