<template>
	<view class="container">
    <view class="top">
      <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="banner" :current="current" :mode="mode" :dots-styles="dotsStyles" >
        <swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="autoplay"
                :interval="interval" :duration="duration" circular>
          <swiper-item v-for="(item, index) in banner" :key="index">
            <view class="swiper-item" :class="'swiper-item' + index">
              <image class="img" :src="item.bannerImg" mode="aspectFill"></image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="middle">
      <uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家搜索号吧~" clearButton="auto" cancelButton="none"
        @confirm="search" />
      <view class="title">
        <text>热门艺术家</text>
      </view>
      <view class="user-list">
        <view class="user-list-box" v-for="(item,index) in hotCreatorList" :key='item.id'
          @click="$noMultipleClicks(goCreatorDetail,item.scanCode)">
          <image :src="item.img" mode=""></image>
          <text>{{item.scanCode}}</text>
        </view>
      </view>
      <view v-if="creatorLoading" class="user-list-loading">
        <uni-load-more :status="'loading'"></uni-load-more>
      </view>
    </view>
    <view class="footer">
      <view class="title">
        <text>近期精选</text>
      </view>
      <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
      <!-- 显示加载中或者全部加载完成 -->
      <view>
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>
    </view>
	<view class="love-icon" @click="goLoveDraw()">
		
	</view>
	</view>
</template>

<script>
	import {
		listHotCreator,
		creatorDetails,
    imgLists,
    getListBanner
	} from '@/api/index.js'
	// import Choiceness from './choiceness.vue'
  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
	export default {
		data() {
			return {
				hotCreatorList: [],
				isTarget: true,
				showChoiceness:false,
        pageNum: 1,
        pageSize: 10,
        imgList: [],
        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
        isLoadMore:false,  //是否加载中
        creatorLoading: false,
		noClick:true, //防止重复提交
        banner:[
          {
            bannerImg: "/static/img/start.gif"
          }
        ],
        current: 0,
        mode: 'default',
        dotsStyles: {
          backgroundColor: 'rgba(255, 255, 255, .5)',
          border: '1px rgba(0, 0, 0, .3) solid',
          color: '#fff',
          selectedBackgroundColor: 'rgba(26, 148, 188, .9)',
          selectedBorder: '1px rgba(0, 0, 0, .9) solid',
          bottom: 15
        },
        swiperDotIndex: 0,
        autoplay: true,
        interval: 5000,
        duration: 500,
			}
		},
		components:{
      waterfallList
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		created() {
      let that = this;
      that.pageNum = 1;
      that.$refs.waterfallRef && that.$refs.waterfallRef.init();
      that.getBanner();
      that.getHotCreatorList()
      that.getImgList();
		},
    onShow() {
      /*let that = this;
      that.pageNum = 1;
      that.$refs.waterfallRef && that.$refs.waterfallRef.init();
      that.getBanner();
      that.getHotCreatorList()
      that.getImgList();*/
    },
    // 上划加载更多
    onReachBottom(e) {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.getImgList();
        }
      }
    },
		methods: {
			goLoveDraw() {
				uni.navigateTo({
					url:'/pages/ai/paint/loverPaint'
				})
			},
      changeSwiper(e){
        this.current = e.detail.current;
      },
      clickItem(e) {
        this.swiperDotIndex = e
      },
			// 搜索
			search(res) {
				if (res.value) {
					console.log('search', res.value)
					this.goCreatorDetail(res.value)
				} else {
					uni.showToast({
						title: '请输入艺术家代号',
						icon: 'none'
					})
				}

			},
      // 获取banner列表
      async getBanner() {
        let that = this;
        const res = await getListBanner()
        if (res && res.data.code === 200) {
          that.banner = res.data.data
        } else {
          uni.showModal({
            content: 'banner加载失败！',
            showCancel: false
          });
        }
      },
			// 获取热门艺术家列表
			async getHotCreatorList() {
			  this.creatorLoading = true;
				const res = await listHotCreator()
				if (res && res.data.code === 200) {
          this.creatorLoading = false;
					this.hotCreatorList = res.data.data
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},

      // 图片列表
      async getImgList() {
			  let that = this;
        that.loadStatus = 'loading';
        const res = await imgLists({
          pageNum: that.pageNum,
          pageSize: that.pageSize
        })
        if (res && res.data.code === 200) {
          that.$refs.waterfallRef.addData(res.data.rows);
          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'noMore'
          }else{
            this.loadStatus = 'more';
            that.isLoadMore = false
          }
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
          that.isLoadMore = false
          if(that.page > 1){
            that.page -= 1
          }
        }
      },
			// 前往艺术家空间
			async goCreatorDetail(scanCode) {
				if (scanCode) {
					const res = await creatorDetails({
						scanCode
					})
					console.log('creatorDetails', res)
					if (res && res.data.code === 200) {
						uni.setStorage({
							key: 'creatorDetail',
							data: res.data.data,
							success() {
								uni.navigateTo({
									url: '../creator/creatorDetail'
								})
							}
						})
						
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '搜索码不能为空',
						icon: 'none'
					})
				}
			},
      // 前往详情页
      targetDetail(item) {
        if (item.id) {
          uni.setStorage({
            key: 'detailId',
            data: item.id,
            success() {
              uni.navigateTo({
                url: '../creator/imgDetail'
              })
            }
          })
        }
      },
			// 滚动监听
			handleScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
		},
	}
</script>

<style lang="scss" scoped>
	.love-icon {
		width: 140rpx;
		height: 140rpx;
		background-image: url('https://img.bnyer.cn/520_icon.png');
		background-size: 100% 100%;
		position: fixed;
		bottom: 40rpx;
		right: 10rpx;
		animation-name: breath ;
		animation-duration: 2.5s;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
	}
	@keyframes breath {
	  0% { transform: scale(1); }
	  50% { transform: scale(1.1); }
	  100% { transform: scale(1); }
	}

.swiper-box {
  height: 30vh;
  background-color: $uni-bg-base-color;
}

.swiper-item {
  background-color: $uni-bg-base-color;
  width: 100%;
  height: 100%;

  ::v-deep image {
    width: 100%;
    height: 100%;
  }

}
	.container {

		.top {
      height: 30vh;
			width: 100vw;

		}

    .title {
      text-align: center;
      font-size: 28rpx;
      line-height: 48rpx;
      font-weight: 600;
      color: $uni-title-text;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
    }

		.middle {
      padding-top: 40rpx;

      ::v-deep .uni-searchbar {
        border: 1px solid $uni-primary;
        margin: 0 40rpx;
        border-radius: 16rpx;
        padding: 0;

      }
      ::v-deep .uni-searchbar__box {
        padding: 0;
        border-radius: 16rpx !important;
      }

      .user-list-loading {
        min-height: 200rpx;
        display: flex;
        justify-content: center;
      }

      .user-list {
        display: flex;
        justify-content: left;
        align-items: center;
        overflow-x: auto;

        .user-list-box {
          width: 140rpx;
          padding: 20rpx;
          text-align: center;

          image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 100rpx;
            box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
          }

          text {
            font-size: 24rpx;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

        }
      }

		}
	}
</style>
