<template>
	<view class="container">
		<view class="content">
			<textarea v-model="remarks" maxlength="50" @input='setLength' placeholder="如您有特殊需求,请备注告知" />
			<view class="contentSize">
				限制字数{{num}}/50
			</view>
		</view>
		<view class="sub-btn" :style="{'background-color':setColor}" @click="onSubmit">完成</view>
	</view>
</template>

<script>
	
	/*
	 * param str 要截取的字符串
	 * param L 要截取的字节长度，注意是字节不是字符，一个汉字两个字节
	 * return 截取后的字符串
	 */
	function cutStr(str,L){
	    var result = '',
	        strlen = str.length, // 字符串长度
	        chrlen = str.replace(/[^\x00-\xff]/g,'**').length; // 字节长度
	
	    if(chrlen<=L){return str;}
	    
	    for(var i=0,j=0;i<strlen;i++){
	        var chr = str.charAt(i);
	        if(/[\x00-\xff]/.test(chr)){
	            j++; // ascii码为0-255，一个字符就是一个字节的长度
	        }else{
	            j+=2; // ascii码为0-255以外，一个字符就是两个字节的长度
	        }
	        if(j<=L){ // 当加上当前字符以后，如果总字节长度小于等于L，则将当前字符真实的+在result后
	            result += chr;
	        }else{ // 反之则说明result已经是不拆分字符的情况下最接近L的值了，直接返回
	            return result;
	        }
	    }
	}
	
	export default {
		data() {
			return {
				remarks: "",
				setColor: "",
				num: 0,
			}
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
			this.remarks = options.remarks;
			this.num = options.remarks.length;
			this.setColor = this.$store.state.color;
		},
		
		methods: {
			setLength(e) {
				this.num = this.remarks.length;
				if (this.num >= 50) {
					this.num =50;
					uni.showToast({
						icon: 'none',
						title: '最多只能輸入50個字'
					});
				}
			},
			onSubmit() {
				
				let remarks =cutStr(this.remarks,100)
				console.log(remarks,"remarks")
				let pageList = getCurrentPages()
				if (pageList.length > 1) {
					let prePage = pageList[pageList.length - 2]
					console.log(prePage)
					prePage.$vm.remarks = remarks
					uni.navigateBack()
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #eee;
	}

	.container {
		padding: 30rpx;
	}

	.content {
		width: 100%;
		height: 376rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.content textarea {
		width: 100%;
		height: 300rpx;
	}

	.contentSize {
		font-size: 28rpx;
		color: #999;
		text-align: right;
	}

	.sub-btn {
		height: 100rpx;
		background-color: $theme-color;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #fff;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}
</style>
