<template>
	<view class="mask fid-all col_e" @click="close" v-if="isShow">
		<scroll-view scroll-y="true" class="scroll-Y" style="height: 600rpx;">
			<view class="share-page col_c yup">
				<view class="share-list row_s">
					<view class="video-episodes-url ree row_c"
						:class="limpidIndex==index?'limpid-box-act':'limpid-box-nor'" v-for="(item,index) of list"
						:key="index" @click="click(index)">
						<text class="limpid-text"
							:class="limpidIndex==index?'limpid-green':'limpid-hui'">{{item.name}}</text>

						<view class="vip-box abe-t-r row_c" v-if="item.badge&&item.badge.value">
							<text class="vip-text">{{item.badge.value}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			isShow: {
				type: Boolean,
				default: false,
			},
			limpidIndex: {
				type: Number,
				default: 0,
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		onLoad() {


		},
		methods: {

			close() {
				this.$emit('close')
			},

			click(index) {
				this.$emit('click', index)
				this.$emit('close')
			},
		}
	}
</script>

<style>
	@import "uni.scss";

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.mask {
		background-color: rgba(0, 0, 0, .6);
		width: 750rpx;
		z-index: 188;
	}

	.share-page {
		width: 750rpx;
		padding: 0 30rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

	}

	.share-title {
		width: 690rpx;
		height: 80rpx;
	}

	.share-title-t {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.share-list {
		margin-top: 30rpx;
		width: 690rpx;
		flex-wrap: wrap;
	}


	.video-episodes-url {
		margin: 20rpx 14rpx;
		width: 202rpx;
		height: 78rpx;
	}

	.soure-text {
		font-size: 28rpx;
		font-weight: 400;
	}

	.green {
		color: #74d852;
		font-weight: bold;
	}

	.hui {
		color: #716a6e;
	}

	.limpid-green {
		color: #ffffff;
		font-weight: bold;
	}

	.limpid-hui {
		color: #716a6e;
	}

	.soure-line {
		height: 4rpx;
		border-radius: 2rpx;
		width: 30rpx;
		background: #74d852;
		left: 45rpx;
	}



	.limpid-box-act {
		background: #DA2538;
	}

	.limpid-box-nor {
		background: #f1f1f1;
	}

	.limpid-text {
		font-size: 28rpx;
		font-weight: 400;
	}


	.yup {
		animation: yup .3s;
	}

	@-webkit-keyframes yup {
		0% {
			-webkit-transform: translateY(200%);
		}

		100% {
			-webkit-transform: translateY(0%);
		}
	}


	@keyframes yup {
		0% {
			transform: translateY(200%);
		}

		100% {
			transform: translateY(0%);
		}
	}
</style>