<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 flex-around">
					<view v-for="(item,index) in datalist" :key="index+''" class="flex-col"
						:class="currentIndex == index ? 'active' : ''">
						<view class="image-padding">
							<image :src="item.url" style="width:94rpx;" mode="widthFix" @click="giftClick(index)">
							</image>
						</view>
						<text class="">{{currentIndex == index ? "赠送" : item.title}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</u-popup>
</template>
<script>
	export default {
		name: "more",
		props: ["show"],
		data() {
			return {
				currentIndex: "",
				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"
					},

				]
			}
		},
		methods: {
			onClose() {
				this.$emit("onClose", "more");
			},
			giftClick(index) {
				this.currentIndex = index;
			},
		}
	}
</script>

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

	.flex {
		display: flex;
	}

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

	.image-padding {
		padding: 16rpx;
	}

	.flex-col {
		display: 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>