<template>
	<view class="uni-popup-share">
		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
		<view class="uni-share-content">
			<view class="uni-share-content-box">
				<view class="section_11 flex-row justify-between">
					<scroll-view scroll-y="true" class="scroll-Y" >
						<view class="scroll-view-item" v-for="scenic in scenicData" :key="scenic.id">
							<view class="region">
								<image class="img_1" :src="'https://res.oss.humengfilms.com/' + scenic.scenicSpotImg" mode="aspectFill" />
								<text class="text_8">{{scenic.scenicSpotName}}</text>
								<text class="text_9" @tap="select(scenic)">选择</text>
							</view>
							<view class="tableLine"></view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="uni-share-button-box" @click="close">
			<view class="uni-share-button" >&times;</view>
		</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import {
	initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {	t	} = initVueI18n(messages)
	export default {
		name: 'UniPopupShare',
		mixins:[popup],
		emits:['select'],
		props: {
			title: {
				type: String,
				default: '选择景区'
			},
			beforeClose: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				scenicData: [],
			}
		},
		created() {},
		computed: {
			cancelText() {
				return t("uni-popup.cancel")
			},
			shareTitleText() {
				return this.title
			}
		},
		methods: {
			setScenicData(data) {
				this.scenicData = data;
			},
			/**
			 * 选择内容
			 */
			select(item, index) {
				this.$emit('select', {
					item
				})
			},
			/**
			 * 关闭窗口
			 */
			close() {
				if(this.beforeClose) return
				this.popup.close()
			}
		}
	}
</script>
<style lang="scss" >
	.uni-popup-share {
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		height: 900rpx;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 80rpx;
	}
	.uni-share-title-text {
		font-size: 16px;
		color: #666;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		height: 95%;
		width: 100%;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		// align-items: center;
		justify-content: center;
	}

	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 20px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}
	
	.img_1 {
		position: relative;
		height: 160rpx;
		width: 280rpx;
		border-radius: 11px;
	}
	
	.model_title {
		position: absolute;
		top: 750rpx;
		left: 170rpx;
		color: #fff;
	}
	
	.section_11 {
		position: relative;
		align-self: center;
		width: 100vw;
		height: 95%;
	}
	
	.section_8 {
	  background-color: rgba(244, 249, 253, 1);
	  border-radius: 10px;
	  padding: 12px 30px 12px 32px;
	  margin-right: 20rpx;
	  height: 200rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.image-text_7 {
	}
	
	.label_1 {
	  width: 40px;
	  height: 40px;
	  margin: 0 23px 0 21px;
	}
	
	.text-group_3 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 14px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 14px;
	  margin-top: 12px;
	}
	
	.section_9 {
	  background-color: rgba(244, 249, 253, 1);
	  border-radius: 10px;
	  padding: 17px 45px 12px 45px;
	  margin-left: 20rpx;
	  height: 200rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.image-text_8 {
	}
	
	.label_2 {
	  width: 40px;
	  height: 30px;
	  align-self: center;
	}
	
	.text-group_4 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 14px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 14px;
	  margin-top: 17px;
	}
	
	.scroll-Y {
		width: 100vw;
		display: flex;
		align-items: center;
	}
	
	.scroll-view-item {
		height: 200rpx;
		width: 95%;
		line-height: 200rpx;
		text-align: center;
		font-size: 36rpx;
		margin: 20rpx;
		display: grid;
		align-items: center;
		padding-top: 10rpx;
	}
	
	.scroll-Y view:last-child {
		padding-bottom: 40rpx;
	}
	
	.box_11 {
	  width: 351px;
	  align-self: center;
	  margin-top: 12px;
	}
	
	.box_3 {
	  border-radius: 8px;
	  background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/5d5a5509867b4d69b9e1b388ead39c20_mergeImage.png);
	  width: 96px;
	  height: 54px;
	  border: 1px solid rgba(151, 151, 151, 1);
	}
	
	.text_8 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 16px;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 14px;
	  margin: 0 0 0 30rpx;
	  width: 200rpx;
	}
	
	.text_9 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 14px;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 90rpx;
	  background: url(https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/btn_%E5%B0%8F%402x.png);
	  background-size: 100% 100%;
	  height: 100rpx;
	  width: 150rpx;
	  margin-top: 10rpx;
	  margin-left: 50rpx;
	}
	
	.tableLine {
	    position: relative;
	    margin: 28rpx 0 0 0;
	    width: 98%;
	    height: 1rpx;
	    text-align: center;
	    font-size: 16px;
		border-top: 1px solid;
	    border-color: rgba(101, 101, 101, 0.2);
	}
	
	.region {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
