<template>
	<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
		<view class="box">
			<view class="header flex">
				<text>礼物</text>
				<u-icon name="close" @click="onClose"></u-icon>
			</view>
			<swiper indicator-dots>
				<swiper-item class="flex" :class="[pers.length >= 5 ? 'flex-around' : '']"
					v-for="(pers,index) in datalist" :key="index+''">
					<view v-for="(item,i) in pers" :key="item.id" class="w-20 flex-col"
						:class="currentIndex == index+i.toString() ? 'active' : ''">
						<view class="image-padding">
							<image :src="item.giftPicUrl" style="width:94rpx;" mode="widthFix"
								@click="giftClick(index,i)">
							</image>
						</view>
						<text v-if="currentIndex == index+i.toString()" @click='send(index,i)'>赠送</text>
						<text v-else>{{item.giftPrice == 0 ? "免费" : item.giftPrice+"币"}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</u-popup>
</template>
<script>
	export default {
		name: "more",
		props: ["show"],
		data() {
			return {
				currentIndex: "",
				total: '00',
				datalist: [
					// {
					// 	title: "免费",
					// 	url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png"
					// },
					// {
					// 	title: "免费",
					// 	url: "/static/images/gift/0ea40b8376ef8157791b928a339ed9c9_tplv-obj 1@2x.png"
					// },
					// {
					// 	title: "免费",
					// 	url: "/static/images/gift/898bc8988a737b909e952854747c8f7e_tplv-obj 1@2x.png"
					// },
					// {
					// 	title: "免费",
					// 	url: "/static/images/gift/a7ccf403bd4b727447d9ab06f1d9231c 1@2x.png"
					// },
					// {
					// 	title: "99币",
					// 	url: "/static/images/gift/e1972046aa7cc5ae870041a655ddf016_tplv-obj 1@2x.png"
					// },
				]
			}
		},
		mounted() {
			let _this = this
			this.$api.getclientgift().then(res => {
				if (res.data.code == 200) {
					let data = res.data.data;
					let total = Math.ceil(data.length / 5);
					_this.total = total
					for (let i = 0; i < total - 1; i++) {
						if (i == total) break;
						let gif = data.splice(i * 5, i * 5 + 5)
						_this.datalist.push(gif)
					}
				}
			})
		},
		methods: {
			onClose() {
				this.$emit("onClose");
			},
			giftClick(index, i) {
				this.currentIndex = index + i.toString();
			},
			send(index, i) {
				if (this.currentIndex != index + i.toString()) return;
				this.onClose()
				this.$emit("specialShow", this.datalist[index][i].giftPicUrl)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inline{
		display: inline-block;
	}
	.mt-1 {
		margin-top: 10rpx;
	}

	.flex {
		display: flex;
	}

	.flex-around {
		justify-content: space-around;
	}

	.image-padding {
		padding: 16rpx;
	}

	.flex-col {
		display: inline-flex;
		flex-direction: column;
		justify-content: left;
		align-items: center;
		width: 126rpx;
		color: #777777;
		font-size: 28rpx;
	}

	.text-center {
		text-align: center;
	}

	.header {
		justify-content: space-between;
		padding: 32rpx 40rpx;
	}

	.box {
		height: 440rpx;
	}

	.active {
		view {
			background-color: #F7F7F7;
			border-radius: 10rpx 10rpx 0 0;
		}

		text {
			display: inline-block;
			width: 100%;
			background-color: #FF506F;
			color: white;
			text-align: center;
			padding: 5rpx 0;
		}
	}
</style>
