/*
 * @Description: 编辑文字组件
 * @Author: wanqian
 * @Date: 2022-09-05 16:43:52
 */
<template>
	<view class="body">
		<view class="bk-content">
			<u-input v-model="value" type="textarea" :clearable="false" :maxlength="maxLength" 
				:placeholder="placeholder" :auto-height="false" :height="522"
				:placeholder-style="placeholderStyle" :custom-style="textAreaCustomStyle" />
			<view class="view-limit-word">{{wordLimit}}</view>
		</view>
		<view class="bk-btn">
			<view class="view-btn" @click="handleSubmit">保 存</view>
		</view>
	</view>
</template>

<script>	
export default {
	props : {
		mode: {type: String, default: ''},
		//输入框内容
		text: {type: String, default: ''},
		// 输入框的提示文字	
		placeholder: {type: String, default: '请输入'},
		// 限制内容最大长度
		maxLength: {type: Number, default: 300},
		// 提交内容是否必填
		textRequired: {type: Boolean, default: true},
	},
	
	data() {
		return {
			value: this.text,
			placeholderStyle: 'font-size: 12px; color: #898888;',
			textAreaCustomStyle: {
				'font-size': '13px',
				'color': '#000000',
				'margin-top': '20rpx',
			},
		}
	},
	
	computed: {
		wordLimit() {
			if (!this.value || this.value.length == 0) {
				return '0/' + this.maxLength;
			}
			return this.value.length + '/' + this.maxLength
		},
	},
	
	methods: {
		handleSubmit() {
			if (this.textRequired && (!this.value || this.value.length == 0)) {
				uni.showToast({icon: 'none', title: this.placeholder, duration: this.commonConst.TOAST_DURATION});
				return;
			}
			this.$emit("save", this.value);
		},
	}
}
</script>

<style scoped lang="scss">
.body {
	margin: 0 30rpx;
	min-height: 100%;
	background-color: #F3F5F8;
	.bk-content {
		margin-top: 32rpx;
		padding: 0 26rpx;
		height: 646rpx;
		background: #FFFFFF;
		.view-limit-word {
			margin-top: 20rpx;
			text-align: right;
			width: 100%;
			font-size: 13px;
			color: #999999;
		}
	}
	.bk-btn {
		position: absolute;
		left: 30rpx;
		bottom: 90rpx;
		background-color: #F3F5F8;
		.view-btn {
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #3377FF;
			border-radius: 26rpx;
			font-size: 15px;
			color: #FFFFFF;
			text-align: center;
		}
	}
}
</style>