<template>
	<view class="content" :style="'background-image: url('+ImgUrl2+'background.png);'">
		<view class="textareabox">
			<textarea v-model="SubmitInfo.messageContent" maxlength="500" :placeholder="placeholder"
				placeholder-class="textareaplace" />
		</view>
		<view class="textareabox2">
			<view class="title" v-if="!keyword">
				<image :src="ImgUrl2+'remarks.png'" mode="aspectFit"></image>
				<text>您可在此备注部分信息</text>
			</view>
			<view class="title2" v-if="keyword">
				<image :src="ImgUrl2+'shuru.png'" mode="aspectFit"></image>
				<text>{{keyword}}</text>
			</view>
			<textarea v-model="SubmitInfo.remark" :placeholder="placeholder2" placeholder-class="textareaplace" />
		</view>
		<view class="envelope" :style="'background-image: url('+ImgUrl2+'envelope2.png);'">
			<image class="toudibtn" @tap="saveOrUpdateMessage" :src="ImgUrl2+'toudi.png'" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ImgUrl2: this.$ImgUrl + 'social_front/',
				ImgUrl: this.$ImgUrl,
				placeholder: "写下您想对孩子说的话，或者分享您与孩子之间发生的真实故事。无论对错，您的故事将被认真倾听和尊重，请避免广告、迷信等违规或不适内容。",
				placeholder2: "如：父亲/母亲等、孩子就读学校、您的所在地",
				// 提交信息
				SubmitInfo: {
					"bindPhone": "", //微信绑定电话
					"classId": 0, //班级id
					"className": "", //班级名称
					"gradeId": 0, //年级id
					"gradeName": "", //年级名称
					"messageContent": "", //投稿内容
					"openId": "", //微信openid
					"remark": "", //投稿备注
					"sourceType": 3, //数据来源：0未知、1公众号、2小程序、3H5页面
					"studentId": 0, //学生id
					"studentName": "", //学生名
					"wechatName": "" //	微信名
				},
				// keyword
				keyword:''
			}
		},
		onLoad() {

		},
		computed: {
			keywordMessageContent: function() {
				console.log(this.SubmitInfo.messageContent);
				return this.SubmitInfo.messageContent.split('').reverse().join('')
			}
		},
		methods: {
			// 投递信箱
			async saveOrUpdateMessage() {
				try {
					if (!this.SubmitInfo.messageContent) {
						uni.showModal({
							title: "温馨提示",
							showCancel: false,
							content: "请写下您对孩子说的话...",
						})
						return
					}
					uni.showLoading({
						title: "请稍后",
						// #ifndef MP-ALIPAY
						mask: true,
						// #endif
					})
					await new Promise((res, rej) => {
						setTimeout(() => {
							res()
						}, 300);
					})
					let url = `https://dev-az-cloud-api.xiaopay.net`
					if (window.location.hostname.includes('uat.xiaopay.net')) {
						url = `https://test-az-cloud-api.xiaopay.net`
					}
					if (window.location.hostname.includes('pay.xiaopay.net')) {
						url = `https://az-cloud-api.xiaopay.net`
					}
					let [err, respes] = await uni.request({
						url: url + '/cloud-gateway/social-web/openApi/bmailboxinfo/saveOrUpdateMessage',
						method: "POST",
						dataType: "json",
						data: this.SubmitInfo
					})
					if (err) {
						uni.showToast({
							icon: "none",
							title: err.errMsg
						})
						return
					}
					uni.hideLoading()
					if (respes.data.code != "10000") {
						uni.showToast({
							icon: "none",
							title: respes.data.message
						})
						return
					}
					uni.showModal({
						title: "温馨提示",
						showCancel: false,
						content: "投递成功！",
						success: () => {
							this.SubmitInfo = {
								"bindPhone": "", //微信绑定电话
								"classId": 0, //班级id
								"className": "", //班级名称
								"gradeId": 0, //年级id
								"gradeName": "", //年级名称
								"messageContent": "", //投稿内容
								"openId": "", //微信openid
								"remark": "", //投稿备注
								"sourceType": 0, //数据来源：0未知、1公众号、2小程序、3H5页面
								"studentId": 0, //学生id
								"studentName": "", //学生名
								"wechatName": "" //	微信名
							}
						}
					})

				} catch (error) {
					uni.showToast({
						icon: "error",
						title: error.message
					})
				}
			}

		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		/* height: 100vh; */
		height: 1624rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.envelope {
		width: 100%;
		height: 330rpx;
		background-repeat: no-repeat;
		background-size: 110% 110%;
		position: fixed;
		/* margin-bottom: 60rpx; */
		background-position: center;
		text-align: center;
		bottom: 0;
	}

	.toudibtn {
		width: 194rpx;
		height: 194rpx;
		position: relative;
		top: 40rpx;
	}

	.textareabox,
	.textareabox2 {
		width: 613rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin: 0 auto;
	}

	.textareabox2 image {
		width: 28rpx;
		height: 28rpx;
		position: relative;
	}

	.textareabox {
		width: 613rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin: 0 auto;
		/* 	position: absolute;
		left: 0;
		right: 0;
		top: 15%; */
		height: 840rpx;
		padding-top: 250rpx;
	}

	.textareabox2 {
		width: 613rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin: 0 auto;
		height: 200rpx;
		/* height: 10vh; */
		margin-top: 30rpx;
	}

	.textareabox2 .title {
		display: flex;
		align-items: center;
	}

	.textareabox2 .title2 {
		display: flex;
		align-items: center;

		background-color: rgba(255, 95, 11, 0.1);
		border-radius: 24rpx;
		padding-left: 18rpx;
	}

	.title2 text {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF5F0B !important;
	}

	.textareabox2 text {
		display: inline-block;
		margin-left: 13rpx;

		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.15);
	}



	textarea {
		line-height: 60rpx;
		height: 100%;
		width: 100%;
	}

	.textareaplace {
		color: rgba(0, 0, 0, 0.15);
		line-height: 60rpx;
	}
</style>
