<template>
  <BasicLayout>
    <view class="page HuiShengHuo">
      <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">

        <!-- banner -->
        <view class="Banner">
          <view>
            <BannerSwiper :List="IndexBanner"></BannerSwiper>
          </view>
        </view>

        <!-- 活动照片墙 -->
        <view class="PhotoList">
          <view class="flex-h">
            <view class="flex-item">
              <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongzhaopianqiang.png"></image>
            </view>
            <navigator url="./PhotoList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
          </view>
          <view class="ListContainer" v-if="PhotoList.length">
            <scroll-view scroll-x="true">
              <view class="List">
                <view v-for="(item, index) in PhotoList" :key="index">
                  <view @tap="CheckBigImg(item.imgUrl)">
                    <image mode="aspectFill" class="centerLabel" :src="item.imgUrl"></image>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

        <!-- 精彩活动 -->
        <view class="ActivityList">
          <view class="flex-h">
            <view class="flex-item">
              <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/jingcaihuodong.png"></image>
            </view>
            <navigator url="./ActivityList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
          </view>
          <view class="List" v-if="ActivityList.length">
            <view class="Item" v-for="(item, index) in ActivityList" :key="index">
              <navigator class="Img" :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover">
                <image mode="aspectFill" class="centerLabel" :src="item.thumb"></image>
              </navigator>
              <view class="Info">
                <text>{{item.name}}</text>
                <view class="flex-h">
                  <text class="flex-item">参与截止时间：{{ToolClass.DateFormat(new Date(item.enrollEnd).getTime())}}</text>
                  <navigator :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isEnroll">立即报名</navigator>
                  <navigator :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isVote">立即投票</navigator>
                  <view v-if="new Date(item.endDate).getTime() <= Date.now()">已结束</view>
                </view>
              </view>
            </view>
            <view style="width: 100%; height: 10px;"></view>
          </view>
        </view>

      </ScrollY>

      <view class="BigImg" v-if="ShowBigImg" @tap="ShowBigImg = false">
        <image mode="aspectFit" class="centerLabel" :src="BigImgUrl"></image>
      </view>
    </view>
  </BasicLayout>
</template>

<script>
import ScrollY from '../../components/ScrollY/index'
import BannerSwiper from '../../components/BannerSwiper/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
const { mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'HuiShengHuo',
  data () {
    return {
      ShowBigImg: false,
      BigImgUrl: null,
      PageActivityList: [],
      PagePhotoList: [],
      RequestNum: 0,
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapIndexState({
      IndexBanner: x => x.IndexBanner, // 首页banner
      PhotoList: x => x.PhotoList, // 照片墙列表
      ActivityList: x => x.ActivityList // 活动列表
    })
  },
  components: {
    ScrollY,
    BannerSwiper
  },
  created () {
    this.$authed(() => {
      this.Init()
    })
  },
  methods: {
    ...mapUserActions([
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    ...mapIndexActions([
      'GetIndexBanner', // 获取首页banner
      'GetPhotoList', // 获取照片墙列表
      'GetActivityList' // 获取活动列表
    ]),
    ...mapIndexMutations([
      'EmptyIndexBanner', // 清空首页banner
      'EmptyPhotoList', // 清空照片墙列表
      'EmptyActivityList' // 清空活动列表
    ]),
    Init () { // 初始化
      this.RequestNum = 0
      this.EmptyIndexBanner() // 清空首页banner
      this.EmptyPhotoList() // 清空照片墙列表
      this.EmptyActivityList() // 清空活动列表
      this.PageActivityList = []
      this.PagePhotoList = []
      this.GetIndexBanner({ queryData: { pageNum: 1, pageSize: 10, position: 'life' } }).then(() => { // 获取首页banner
        this.CheckRequestNum(3) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(3) // 判断请求接口个数
      })
      this.GetPhotoList({ queryData: { pageNum: 1, pageSize: 10 } }).then(() => { // 获取照片墙列表
        this.CheckRequestNum(3) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(3) // 判断请求接口个数
      })
      this.GetActivityList({ queryData: { pageNum: 1, pageSize: 10, typeId: 2 } }).then(() => { // 获取活动列表
        this.PageActivityList = [...this.ActivityList]
        this.CheckRequestNum(3) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(3) // 判断请求接口个数
      })
    },
    CheckBigImg (url) { // 查看大图
      this.BigImgUrl = url
      this.ShowBigImg = true
    },
    CheckRequestNum (num) { // 判断请求接口个数
      this.RequestNum += 1
      if (this.RequestNum >= num) {
        this.IsRefreshing = false
        this.DataLock = false
      }
    },
    LinkTo (url) {
      wx.navigateTo({ url })
    },
    Refresh (e) { // 页面刷新
      if (this.DataLock) return
      this.DataLock = true
      this.IsRefreshing = true
      setTimeout(() => {
        this.Init() // 初始化
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
@import "page.scss";
</style>
