<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="money-content">
				<view class="pay-money">￥</view>
				<view class="money-size" v-if="selectType == 1">{{ template.fee }}</view>
				<view class="money-size" v-if="selectType == 2">{{ template.printFee }}</view>
			</view>
			<view class="pay-content">
				<view class="name">购买商品&nbsp 【{{ template.templateName }}】</view>
			</view>
			<view class="select-content">
				<view class="box_2">
					<view class="orders" @tap="menuClick(1)">
						<view class="orders-name">{{ template.triesLimit }} 生成次数</view>
						<view :class="selectType == 1? 'orders-selected-icon':'perpetual-icon'"></view>
					</view>
					<view class="perpetual" v-if="template.buyType == 2" @tap="menuClick(2)">
						<view class="perpetual-name">{{ template.printTip }}</view>
						<view :class="selectType == 2? 'orders-selected-icon':'perpetual-icon'"></view>
					</view>
					<view class="perpetual" @tap="menuClick(0)">
						<view class="perpetual-name">永久使用该模板</view>
						<view class="perpetual-icon"></view>
					</view>
				</view>
			</view>
			<view class="pay-btn" @tap="payClick()">
				确认支付
			</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 {
				template: {},
				selectType: 1
			}
		},
		created() {},
		computed: {
			cancelText() {
				return t("uni-popup.cancel")
			},
			shareTitleText() {
				return this.title
			}
		},
		methods: {
			menuClick(e){
				if(e != 0) {
					this.selectType = e;
				} else {
					uni.showToast({
						title: '此模版暂不支持购买此类型!',
						icon: 'none',
						duration: 2000
					})
				}
			},
			setTemplate(data) {
				this.template = data;
			},
			payClick() {
				this.$emit('select', this.selectType)
				// this.close()
			},
			/**
			 * 关闭窗口
			 */
			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: 750rpx;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 110rpx;
	}
	.uni-share-title-text {
		font-size: 16px;
		color: #666;
		font-weight: 700;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 15px 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 {
		height: 720rpx;
		width: 460rpx;
		border-radius: 11px;
	}
	
	.model_title {
		position: absolute;
		top: 750rpx;
		left: 170rpx;
		color: #fff;
	}
	
	
	.money-content {
		display: flex;
		flex-wrap: wrap;
	
		.pay-money {
			position: relative;
			height: 70px;
			font-size: 30px;
			font-weight: 600;
			color: #30334B;
			opacity: 1;
			line-height: 85px;
		}
	
		.money-size {
			position: relative;
			height: 70px;
			font-size: 50px;
			font-weight: 600;
			color: #30334B;
			opacity: 1;
			line-height: 70px;
		}
	}
	
	.select-content {
		width: 80%;
		// height: 240rpx;
		border: rgba(192, 196, 202, 0.7) solid 1px;
		margin-top: 30rpx;
		border-radius: 20px;
	}
	
	.pay-btn {
		width: 80%;
		height: 100rpx;
		background: url(https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/btn%403x.png)
			100% no-repeat;
		background-size: 100% 100%;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
		border-radius: 20px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
	}
	
	.box_2 {
		width: 85%;
		border-radius: 40rpx;
		margin-left: auto;
		margin-right: auto;
	}
	
	.orders{
		width: 90%;
		height: 120rpx;
		border-bottom: 1px solid rgba(192, 196, 202, 0.4);
		position: relative;
		left: 5%;
	}			
	
	.orders-name{
		text-align: left;
		line-height: 120rpx;
		font-size: 16px;
		color: #333333;
		opacity: 1;
	}
	
	.perpetual{
		width: 90%;
		height: 120rpx;
		border-bottom: 1px solid rgba(192, 196, 202, 0.4);
		position: relative;
		left: 5%;
	}			
	
	.perpetual-name{
		text-align: left;
		line-height: 120rpx;
		font-size: 16px;
		color: #333333;
		opacity: 1;
	}
	
	.orders-icon, .perpetual-icon {
		position: absolute;
		right: 0px;
		width: 35rpx;
		top: 40rpx;
		height: 35rpx;
		background-size: 100% 100%;
		background-image: url(https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/unselect_icon.png);
	}
	
	.orders-selected-icon, .perpetual-selected-icon {
		position: absolute;
		right: 0px;
		width: 35rpx;
		top: 40rpx;
		height: 35rpx;
		background-size: 100% 100%;
		background-image: url(https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/select_icon.png);
	}
</style>
