<template>
	<view class="choiceness">
    <view class="status-choice-comp">
      <view class="status-item uni-secondary-color" v-for="(val, i) in statusList"
            :index="i" :key="i"
            :class="statusCurrent === i ? 'status-active' : ''"
            @click="$noMultipleClicks(onClickStatus,{currentIndex: i})"
      >
        <view class="status-text">{{val}}</view>
      </view>
    </view>
    <view class="type-choice-comp">
      <view class="type-item uni-secondary-color" v-for="(val, i) in typeList"
            :index="i" :key="i"
            :class="typeCurrent === i ? 'type-active' : ''"
            @click="$noMultipleClicks(onClickType,{currentIndex: i})"
      >
        <view class="type-text">{{val}}</view>
      </view>
    </view>
<!--
		<uni-segmented-control :current="statusCurrent" :values="statusList" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickStatus" />
    <uni-segmented-control :current="typeCurrent" :values="typeList" :style-type="styleType"
              :active-color="activeColor" @clickItem="onClickType" />-->
    <view class="choiceness-list">
      <view class="images-box">
        <image lazy-load v-for="(item,index) in creatorImgList" :key='index' class="img-box"
               :class="[1, 2, 5, 6].includes(item.typeId) ? 'img-2x2' : [4].includes(item.typeId) ? 'img-1x1' : 'img-2x3'"
               :src="item.imgUrl"
               @click="$noMultipleClicks(targetDetail,item)"
               mode=""></image>
      </view>
      <!-- 显示加载中或者全部加载完成 -->
      <view>
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>
    </view>
	</view>
</template>

<script>
	import {
		listType,listTiktokImgIn
	} from '@/api/index.js'
	export default {
		data() {
			return {
				statusCurrent: 0,
				styleType: 'text',
				statusList: ['待审核','审核拒绝','已上架','已下架'],
				typeList:[],
				typeIdList:[],
				typeCurrent: 0,
				typeId: 1,
				status: 0,
				pageNum: 1,
				pageSize: 18,
				creatorImgList: [],
				userInfo: {},
				imgWidth: 0, // 图片宽
				imgHeight: 0, // 图片高
				flag: false,
				loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
				isLoadMore:false,  //是否加载中
				noClick:true, //防止重复提交
			} 
		},
		onLoad(option) {
		  if (option?.categoryId && option?.categoryIndex) {
		    this.statusCurrent = 2;
		    this.status = 2;
        this.typeId = option.categoryId * 1;
		    this.typeCurrent = option.categoryIndex * 1;
      }
		  if (option?.categoryId && option?.categoryIndex && option?.status) {
		    this.statusCurrent = option.status * 1;
		    this.status = option.status * 1;
      }
			this.listTiktokImgIn();
		},
		created(){
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
			}
			this.queryListType();

		},
		// 下拉刷新
		onPullDownRefresh(){
			this.pageNum = 1
			this.creatorImgList = []
			this.listTiktokImgIn();
			this.flag = false;
			uni.stopPullDownRefresh();
		},
    // 上划加载更多
    onReachBottom(e) {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.listTiktokImgIn();
        }
      }
    },
		methods: {
			// 前往详情页
			targetDetail(item) {
				//console.log('跳转', item)
        let that = this;
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							uni.navigateTo({
								url: `/pages/index/material/imgDetail?categoryId=${that.typeId}&categoryIndex=${that.typeCurrent}&status=${that.status}`,
								success:function(){
									// console.log('跳转成功!')
								},
								fail:function(){
									// console.log('跳转失败!')
								}
							})
						}
					})
				}
			},
			
			onClickStatus(e1){
				let that = this;
				that.flag = false;
				that.creatorImgList = [];
				that.status = e1.currentIndex;
				that.statusCurrent = e1.currentIndex;
				// that.typeCurrent = 0;
				// that.typeId = that.typeIdList[0];
				// console.log('status',that.status)
        that.pageNum = 1;
        that.loadStatus = 'loading';
        that.isLoadMore = false;
				uni.showLoading({
				  title: "加载中",
				  mask: true,
				  success() {
				   // 查询指定艺术家图片集合
            that.listTiktokImgIn();
				  },
				  complete() {
				    uni.hideLoading();
				  },
				});
			},
			onClickType(e2){
				let that = this;
				that.flag = false;
				that.creatorImgList = [];
				that.typeId = that.typeIdList[e2.currentIndex];
				that.typeCurrent = e2.currentIndex;
        that.pageNum = 1;
        that.loadStatus = 'loading';
        that.isLoadMore = false;
				//console.log('typeId',that.typeId)
				uni.showLoading({
				  title: "加载中",
				  mask: true,
				  success() {
				   // 查询指定艺术家图片集合
            that.listTiktokImgIn();
				  },
				  complete() {
				    uni.hideLoading();
					
				  },
				});
			},
			
			// 获取图片分类列表
			async queryListType() {
			  const res = await listType();
			  if (res.data.code === 200) {
				  for (let s of res.data.data) {
				  	this.typeList.push(s.typeName);
					  this.typeIdList.push(s.id);
				  }
			    //console.log('typeList', this.typeList)
				console.log('typeIdList', this.typeIdList)
			  } else {
			    uni.showModal({
			      content: "图片分类列表加载失败！",
			      showCancel: false,
			    });
			  }
			},
			
			//查询指定艺术家图片集合
			async listTiktokImgIn() {
				let that = this;
        that.loadStatus = 'loading';
				const res = await listTiktokImgIn({
					pageNum: that.pageNum,
					pageSize: that.pageSize,
					typeId: that.typeId,
					status: that.status,
					creatorId: that.userInfo.id
				})
				if (res.data.code === 200) {
          uni.hideLoading();
					that.creatorImgList.push(...res.data.rows)
					// console.log('creatorImgList',that.creatorImgList);
          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'noMore'
          }else{
            this.loadStatus = 'more';
            that.isLoadMore = false
          }
				} else {
					uni.showModal({
						content: '艺术家图片列表加载失败！',
						showCancel: false
					});
          that.isLoadMore = false
          if(that.page > 1){
            that.page -= 1
          }
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choiceness {
    width: 750rpx;
		padding-top: 20rpx;
    background: #141b29;
    min-height: 100vh;

    .status-choice-comp {
      width: 670rpx;
      position: fixed;
      top: 0;
      left: 0;
      background: #1d2734;
      display: flex;
      justify-content: space-between;
      padding: 0 40rpx;

      .status-item {
        font-size: 28rpx;
        line-height: 68rpx;
        height: 68rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;

        .status-text {

        }

      }

      .status-active {
        background: #0a6375;
        color: #FFFFFF !important;

      }

    }

    .type-choice-comp {
      width: 710rpx;
      background: $uni-bg-color;
      position: fixed;
      top: 68rpx;
      left: 0;
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow: scroll;
      padding-left: 40rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;

      .type-item {
        font-size: 24rpx;
        line-height: 40rpx;
        height: 40rpx;
        padding: 0 20rpx;
        border-radius: 20rpx;
        flex-shrink: 0;

        .type-text {

        }

      }

      .type-active {
        background: #0a6375;
        color: #FFFFFF !important;

      }

    }

		.choiceness-list {
			width: 670rpx;
      margin: 128rpx auto;
			//border: 1rpx solid blue;

      .images-box {
        width: 690rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: row;
        margin-left: -10rpx;
        margin-right: -10rpx;
      }
		
			.img-box {
				border-radius: 10rpx;

			}

      .img-2x2 {
        width: calc((670rpx - 40rpx) / 3);
        height: calc((670rpx - 40rpx) / 3);
        margin: 10rpx;
      }

      .img-1x1 {
        width: calc((670rpx - 20rpx) / 2);
        height: calc((670rpx - 20rpx) / 2 - ((670rpx - 20rpx) / 9)) ;
        margin: 10rpx;
      }

      .img-2x3 {
        width: calc((670rpx - 40rpx) / 3);
        height: calc((670rpx - 40rpx) / 3 + ((670rpx - 40rpx) / 6)) ;
        margin: 10rpx;
      }

		}
	}
	
	.ivOver{
		width: 100%;
		height:50rpx;
		line-height: 50rpx;
		text-align: center;
		background: #fff;
		font-size: 20rpx;
	}
</style>
