<template>
	<div class="wishPopDivAll">
		<div class="wishContentDiv">
			<div class="titleTopDiv"></div>
			<div class="letterDivAll">
				<div :class="['letterBg', wishType == '1' ? 'letterBg' : 'letterBg1']"></div>
				<div :class="[wishType == '1' ? 'letterCenter' : 'letterCenter1']">
					<img class="wishImage" :src="wishUrl" />
					<div class="wishTextAll">
						<div class="wishText" ref="textareaRef" v-show="wishType == '2'">{{ wishText }}</div>
					</div>
				</div>
				<div class="letterFont" :class="[wishType == '1' ? 'letterFont' : 'letterFont letterFont1']"></div>
			</div>
			<div :class="['bottomZsDiv', wishType == '1' ? 'bottomZsDiv' : 'bottomZsDiv1']"></div>
			<div :class="[wishType == '1' ? 'openWishDiv' : 'openWishDiv1']" @click="openWishClick()"></div>
		</div>
	</div>
</template>

<script>
import apis from '../api/api.js';
let { getWinInfo, saveLog } = apis;

export default {
	props: ['christmasCardId'],
	data() {
		return {
			wishUrl: '', //制作的心愿袜样式
			wishText: null, //祝福语
			wishType: '1' //1 打开TA的心愿祝福 2 我也要制作心愿袜
		};
	},

	created() {
		this.getWinInfo();
	},
	methods: {
		changeHeight() {
			let _this = this;
			// console.log(_this.$refs.textareaRef, 'xxxxxxxxxxxxxx');
			this.$nextTick(() => {
				var textArea = _this.$refs.textareaRef;
				var scrollHeight = textArea.scrollHeight; // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
				var height = textArea.offsetHeight; // 屏幕上显示的高度
				console.log(scrollHeight, 'scrollHeight');
				console.log(height, 'height');

				// if (textArea.scrollHeight < 240) {
				// 	textArea.style.height = 2.4 + 'rem';
				// } else {
					if (height <= scrollHeight) {
						textArea.style.height = 'auto'; // 恢复默认值，这个作用就是根据内容自适应textarea高度
						textArea.style.height = textArea.scrollHeight * 2 * 100 / 10000 + 'rem'; // 拿到最新的高度改变textarea的高度
					}
				// }

			});
		},

		//查询贺卡详情
		getWinInfo() {
			this.wishText = '';
			getWinInfo(this.christmasCardId, callBackData => {
				let content = callBackData.data.content;
				let content1 = JSON.parse(content);
				this.wishUrl = content1.wishImageUrl;
				this.wishText = content1.wishContent;
				// console.log(this.wishText,'this.wishText')
				//埋点接收贺卡人数
				let param1 = {
					eleId: 'receive'
				};
				saveLog(param1, callbackData1 => {});
			});
		},
		//打开TA的心愿祝福
		openWishClick() {
			if (this.wishType == '1') {
				this.wishType = '2';
				// this.changeHeight();
			} else if (this.wishType == '2') {
				let queryData = {
					activityType: sessionStorage.getItem('activityType'),
					templateId: sessionStorage.getItem('templateId'),
					activityId: sessionStorage.getItem('activityId'),
					nodeId: sessionStorage.getItem('nodeId'),
					teamId: sessionStorage.getItem('teamId'),
					giftType: sessionStorage.getItem('giftType'),
					isGiftTrue: sessionStorage.getItem('isGiftTrue'),
					prd: sessionStorage.getItem('prd')
				};
				for (let i in queryData) {
					if (!queryData[i] || queryData[i] == 'null') {
						delete queryData[i];
					}
				}
				var aa = '';
				var lastkey = '';
				for (let i in queryData) {
					lastkey = i;
				}
				for (let i in queryData) {
					if (lastkey == i) {
						aa = aa + `${i}=${queryData[i]}`;
					} else {
						aa = aa + `${i}=${queryData[i]}&`;
					}
				}
				// console.log( 'https://' + location.host + '/interact/index?'+ aa,'aa111111111111');
				// alert('https://' + location.host + '/interact/index?'+ aa)
				location.replace('https://' + location.host + '/interact/index?' + aa);

				// this.$emit('closePop','11')
			}
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.wishPopDivAll {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	// justify-content: center;
	flex-direction: column;
	position: relative;
	.wishContentDiv {
		position: absolute;
		top: calc(50% - 5.765rem);
		left: 0;
	}
	.titleTopDiv {
		width: 7.5rem;
		height: 3.38rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/121813/22/34178/61256/637c7cefE4616dda9/6934711bbd6a2731.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: -0.84rem;
		position: relative;
		z-index: 2;
	}

	.letterDivAll {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		.letterBg {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/139384/33/31143/5198/637c4abaE492aa693/1828d949acb7b4e1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 6.46rem;
			height: 4.63rem;
			margin-top: 1.28rem;
		}
		.letterBg1 {
			// margin-top: 2.58rem;
			transition: 1s linear;
			transform: translateY(0.6rem);
		}
		.letterCenter {
			width: 5.69rem;
			height: 5.5rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/212762/26/23779/4686/637dd47bE91e4af25/f70dc541f43942b1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			.wishImage {
				width: 4.54rem;
				height: 3.08rem;
				// background: #000000;
				border-radius: 0.16rem;
				margin-top: 0.5rem;
				position: relative;
				z-index: 1;
			}
		}
		.letterCenter1 {
			width: 6.46rem;
			height: 7.8rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/179831/21/30287/8538/637c4abaE5cdc916b/97e2a50828ec86b7.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			bottom: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			animation: 1s up ease-in;
			overflow: hidden;
			.wishImage {
				width: 4.54rem;
				height: 3.08rem;
				// background: #000000;
				border-radius: 0.16rem;
				margin-top: 0.5rem;
			}
			.wishTextAll{
				min-height: 3.2rem;
				// min-height: 160px;
				overflow-y: scroll;
				margin-top: 0.32rem;
				
				// margin-bottom: 1.0rem;
			}
			.wishText {
				color: #7c6b40;
				min-height: 3.2rem;
				// min-height: 160px;
				width: 4.82rem;
				font-size: 0.24rem;
				// font-size: 12px;	
				line-height: 0.5rem;
				// line-height: 25px;
				
				text-align: left;
				// background: linear-gradient(rgba(0, 0, 0, 0) 0.48rem, #ae955a 0.2rem);
				// background: linear-gradient(rgba(0, 0, 0, 0) 24px, #ae955a 10px);
				// background-size: 100% 0.5rem;
				overflow: hidden;
				padding-bottom: 2.0rem;
				// margin-bottom: 40px;\
				text-decoration:underline;
				text-underline-offset: 10px;
				// text-decoration-color:red
				word-wrap: break-word;
				word-break: break-all;
				text-align: justify;
				
			}
		}
		.letterFont {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/21005/1/19661/42678/637c4abaE4f2d4f08/eb413e6c9547990b.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 6.62rem;
			height: 3.04rem;
			position: absolute;
			bottom: 0;
		}
		.letterFont1 {
			transition: 1s linear;
			transform: translateY(0.6rem);
		}
	}
	.bottomZsDiv {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/4679/29/20953/48773/637dd14cE47db43b3/a7daf1f84bae0bb7.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 7.5rem;
		height: 2.3rem;
		margin-top: -1.35rem;
		position: relative;
		z-index: 3;
	}
	.bottomZsDiv1 {
		// margin-top: -2.7rem;
		transition: 1s linear;
		transform: translateY(0.4rem);
		// animation: .6 down ease-in;
	}
	.openWishDiv {
		width: 4.82rem;
		height: 0.73rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/117857/40/32099/16748/637ddba2E6762dc03/fa69d15c589b31d8.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-left: calc(50% - 4.82rem / 2);
		margin-top: 0.92rem;
	}
	.openWishDiv1 {
		width: 4.82rem;
		height: 0.73rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/206392/19/29193/17521/637ddcf1E793c609a/9758d5bcdd379c4f.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-left: calc(50% - 4.82rem / 2);
		margin-top: 0.92rem;
	}
}
@keyframes up {
	0% {
		height: 5.5rem;
	}
	100% {
		height: 7.8rem;
	}
}
</style>
