<template>
	<view class="creatorDetail">
		<view class="avatar-box">
			<view class="avatar-top">
				<view class="avatar-left-box">
					<image :src="creatorInfo.img" mode=""></image>
					<text>{{creatorInfo.scanCode}}</text>
				</view>
				<view class="avatar-right-box">
					<button open-type="share" size="mini" type="default" style="background-color:#11A8FD;outline：none;">
						<image src="../../static/img/share.svg" mode=""></image>
					</button>
				</view>
			</view>
			<view class="avatar-box-text">
				<text>{{creatorInfo.intro}}</text>
			</view>
			<view class="avatar-box-tag">
				<view class="avatar-box-tag-left">
					<view class="tag-left-box">
						<text>{{creatorInfo.imgTotalNum}}</text>
						<text>图片</text>
					</view>
					<view class="tag-left-box">
						<text>{{creatorInfo.imgCollectionNum}}</text>
						<text>收藏</text>
					</view>
					<view class="tag-left-box">
						<text>{{creatorInfo.imgLikeNum}}</text>
						<text>喜欢</text>
					</view>
				</view>
				<view class="avatar-box-tag-right">
				</view>
			</view>
		</view>
		<view class="middle">
			<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text"
				activeColor="#11A8FD"></uni-segmented-control>
		</view>
		<swiper class="swiper" :circular="false" :current="current" :indicator-dots="false" :autoplay="false"
			@change="changeItem" :duration="500" :style="'height:'+swiperHeight+'rpx'">
			<swiper-item v-for="(item,index) in arrList" :key="index">
				<view class="swiper-item bottom">
					<image :src="val.imgUrl" mode="" :style="'width:'+imgWidth+'rpx;height:'+imgHeight+'rpx'"
						@click="targetDetail(val)" v-for="(val,index) in imgList" :key="val"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	</view>
</template>

<script>
	import {
		getTypeImgsPage
	} from '@/api/creator.js'
	export default {
		data() {
			return {
				creatorInfo: {},
				current: 0,
				typeId: 1,
				typeIdList: [],
				arrList: [],
				imgList: [],
				imgWidth: 0, // 图片宽
				imgHeight: 0, // 图片高
				swiperHeight: 0, // swiper高
				pageNum: 1,
				pageSize: 4,
			}
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					this.imgWidth = res.windowWidth - 60
					this.imgHeight = (res.windowWidth - 60) * 2 - 30
					console.log('this.imgHeight', this.imgHeight)
				}
			})
			uni.getStorage({
				key: 'creatorDetail',
				success: res => {
					this.creatorInfo = res.data
					this.creatorInfo.typeList.forEach(item => {
						this.arrList.push(item.typeName)
						this.typeIdList.push(item.typeId)
					})
					this.typeId = this.typeIdList[0]
					this.getTypeImgsPage(this.typeId)
				}
			})
		},
		// 上划加载更多
		onReachBottom() {
			console.log(111)
			if (this.imgList.length > 1) {
				this.pageNum += 1
				this.getTypeImgsPage(this.typeId)
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res)
			}
			return {
				title: `来看看艺术家${this.creatorInfo.scanCode}精心准备的图片吧~`,
				path: `/pages/creator/imgDetail?id=${this.creatorInfo.id}`
			}
			uni.showToast({
				title: '分享成功',
				icon: 'none'
			})
		},
		watch: {
			current(n, o) {
				console.log('current', this.current, n, o)
				this.typeId = this.typeIdList[n]
				this.imgList = []
				this.getTypeImgsPage(this.typeId)
				immediate: true
			}
		},
		methods: {
			// 标签栏点击
			onClickItem(e) {
				this.current = e.currentIndex
			},
			// 内容滑动
			changeItem(e) {
				this.pageNum = 1
				this.current = e.detail.current
				// this.getTypeImgsPage(this.typeId)
			},
			// 前往详情页
			targetDetail(item) {
				console.log('item', item)
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							uni.navigateTo({
								url: './imgDetail'
							})
						}
					})
				}
			},

			//获取图片分页
			async getTypeImgsPage(typeId) {
				console.log('typeId', typeId)
				uni.showLoading({
					title: '加载中'
				});
				const params = {
					scanCode: this.creatorInfo.scanCode,
					typeId: typeId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				const res = await getTypeImgsPage(params)
				if (res.data.code === 200) {
					this.imgList.push(...res.data.rows)
					this.swiperHeight = (this.imgHeight + 40) * Math.ceil(this.imgList.length / 2) + 40
					console.log('this.imgList', this.swiperHeight)
					uni.hideLoading()
				} else {
					uni.hideLoading()
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.creatorDetail {
		.avatar-box {
			padding: 20rpx 20rpx;
			background: #11A8FD;

			.avatar-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;

				.avatar-left-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 80rpx;
					}

					text {
						font-size: 14px;
						color: #fff;
						margin-left: 20rpx;
					}
				}

				.avatar-right-box {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					button::after {
						border: none;
					}
				}
			}

			.avatar-box-text {
				color: #fff;
				font-size: 12px;
			}

			.avatar-box-tag {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;

				.avatar-box-tag-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tag-left-box {
						width: 120rpx;

						text {
							display: block;
							color: #fff;
							font-size: 12px;
						}

						text:last-child {
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.middle {
			.segmented-control {
				border-radius: 8rpx 8rpx 0 0;
				background-color: rgba(17, 168, 253, 0.1);
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 20px;

			image {
				margin-top: 40rpx;
				margin-left: 40rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>
