<template>
  <view class="page HuoDongZhaoPianQiang">
    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh" @ScrollBottom="ScrollBottom">

      <!-- 活动照片墙 -->
      <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>
        </view>
        <view class="List">
          <view v-for="(item, index) in PageList" :key="index">
            <text>{{item.Month}}</text>
            <view>
              <view v-for="(subItem, subIndex) in item.List" :key="subIndex">
                <view class="Img" @tap="CheckBigImg(subItem.imgUrl)">
                  <image mode="aspectFill" class="centerLabel" :src="subItem.imgUrl"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </ScrollY>

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

<script>
import ScrollY from '../../../components/ScrollY/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
const { mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'HuoDongZhaoPianQiang',
  data () {
    return {
      ShowBigImg: false,
      BigImgUrl: null,
      PageList: [],
      PageData: {
        pageNum: 1,
        pageSize: 15
      },
      HasNextPage: true,
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapIndexState({
      PhotoList: x => x.PhotoList // 照片墙列表
    })
  },
  components: {
    ScrollY
  },
  created () {
    this.$authed(() => {
      this.Init()
    })
  },
  methods: {
    ...mapUserActions([
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    ...mapIndexActions([
      'GetPhotoList' // 获取照片墙列表
    ]),
    ...mapIndexMutations([
      'EmptyPhotoList' // 清空照片墙列表
    ]),
    Init () { // 初始化
      this.PageData.pageNum = 1
      this.HasNextPage = true
      this.PageList = []
      this.EmptyPhotoList() // 清空照片墙列表
      this.ToGetPageList() // 获取列表
    },
    CheckBigImg (url) { // 查看大图
      this.BigImgUrl = url
      this.ShowBigImg = true
    },
    ToGetPageList () { // 获取列表
      this.GetPhotoList({ queryData: { ...this.PageData } }).then((res) => { // 获取照片墙列表
        let Arr = []
        this.PhotoList.map((item) => {
          let Year = new Date(item.createDate).getFullYear()
          let Month = new Date(item.createDate).getMonth() + 1
          Month = Month > 9 ? Month : `0${Month}`
          if (Arr.length && `${Year}-${Month}` === Arr[Arr.length - 1].Month) {
            Arr[Arr.length - 1].List.push({ ...item })
          } else {
            Arr.push({ Month: `${Year}-${Month}`, List: [{ ...item} ] })
          }
        })
        this.PageList = Arr
        this.HasNextPage = res.data.data.current < res.data.data.pages
        this.DataLock = false
        this.IsRefreshing = false
      }).catch(() => {
        this.DataLock = false
        this.IsRefreshing = false
      })
    },
    ScrollBottom () { // 上拉加载
      if (this.DataLock || !this.HasNextPage) return
      this.DataLock = true
      this.PageData.pageNum += 1
      this.ToGetPageList() // 获取列表
    },
    Refresh (e) { // 页面下拉刷新
      if (this.DataLock) return
      this.DataLock = true
      this.IsRefreshing = true
      setTimeout(() => {
        this.Init() // 获取列表
      }, 1000)
    }
  }
}
</script>

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