<template>
	<view class="textarea-wrap">
		<textarea class="form-textarea" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
			maxlength="200" @input="$emit('input', $event.detail.value)" />
		<text class="char-count">{{ (value || '').length }}/200</text>
	</view>
</template>

<script>
export default {
	name: 'FormItemTextarea',
	props: {
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入'
		}
	}
};
</script>

<style scoped>
.textarea-wrap {
	width: 100%;
	position: relative;
}

.form-textarea {
	width: 100%;
	height: 150rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 20rpx;
	box-sizing: border-box;
}

.placeholder {
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
}

.char-count {
	position: absolute;
	right: 16rpx;
	bottom: 16rpx;
	font-size: 24rpx;
	color: #999999;
}
</style>
