<template>
	<view class="todo-remark">
		<view class="remark-title">{{title}}:</view>
		<u-textarea v-model="value" :placeholder="isReadonly ? '' : placeholder" :count="!isReadonly" autoHeight
			:disabled="isReadonly" maxlength="200" border="none" @blur="onBlur" holdKeyboard/>
	</view>
</template>

<script>
	export default {
		name: "bs-todoRemark",
		options: { styleIsolation: 'shared' },
		props: {
			placeholder: {
				type: String,
				default: "请输入备注......"
			},
			title: {
				type: String,
				default: "备注"
			},
			isReadonly: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: ""
			};
		},
		methods: {
			onBlur(e) {
				const { value } = e.detail
				this.setValue(value)
			},
			//设置默认值
			setValue(value) {
				this.value = value
			}
		}
	}
</script>

<style lang="scss">
	.todo-remark {
		font-size: 28rpx;
		margin-top: 32rpx;

		.remark-title {
			color: #8C8C8C;
			margin-bottom: 24rpx;
		}

		.u-textarea {
			min-height: 150rpx;
			background-color: #FAFAFA;
			
			.u-textarea__field{
				min-height: 120rpx;
			}
		}
	}
</style>