<template>
	<view class="task-form-item">
		<view class="form-lable">
			<text class="form-must" v-if="rule && rule.required">* </text>内容：
		</view>
		<view class="form-textarea">
			<template v-if="!checkPage">
				<textarea class="textarea-box" placeholder="请输入内容" placeholder-class="form-placeholder"
					v-model="content" :maxlength="1000" auto-height></textarea>
				<view class="textarea-num">
					{{content.length || 0}} / 1000
				</view>
			</template>
			<template v-else>
				{{content}}
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'submintContent',
		model: {
			prop: ['submitContent'],
			event: ['onChange']
		},
		props: {
			checkPage: {
				type: Boolean,
				default: false
			},
			rule: {
				type: Object,
				default: null
			},
			submitContent: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				content: ''
			}
		},
		watch: {
			submitContent: {
				handler(newL, oldL) {
					this.content = newL
				},
				immediate: true
			},
			content: {
				handler(newL, oldL) {
					this.$emit('onChange', newL)
				},
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~./submint.scss';
	.form-textarea{
		min-height: 100rpx;
	}
</style>