<template>
	<view class="textarea-row">
		<view class="form-row__label">
			{{ name }}<text v-if="required" class="form-cell--required"></text>
		</view>
		<view class="mt-10">
			<textarea 
				:auto-height="autoHeight"
				:disabled="disableChange" 
				:value="value" 
				class="form-textarea" 
				:class="border ? 'form-textarea--border' : ''"
				:style="textareaStyle"
				:placeholder="placeholder"
				placeholder-class="form__placeholder" 
				:maxlength="wordLimit" 
				@input="change($event)" />
			<view v-if="wordLimit > 0" class="form-textarea__count">
				{{ value && value.length ? value.length : 0 }} / {{ wordLimit }}
			</view>
		</view>
	</view>
</template>
<script setup>
import { computed } from 'vue';

const emits = defineEmits(['change']);
const props = defineProps({
	border: {
		type: Boolean,
		default: true
	},
	form: {
		type: Object,
		default: () => ({})
	},
	name: {
		default: ''
	},
	required: {
		type: Boolean,
		default: false
	},
	title: {
		default: ''
	},
	disableChange: {
		type: Boolean,
		default: false
	},
	wordLimit: {
		type: [Number, String],
		default: 100
	},
	autoHeight: {
		type: Boolean,
		default: false
	},
	rows: {
		type: [Number, String],
		default: 3
	}
})

const placeholder = computed(() => `请输入${props.name || ''}`)
const value = computed(() => {
	const v = props.form?.[props.title];
	return v === undefined || v === null ? '' : String(v);
})
const wordLimit = computed(() => {
	if (typeof props.wordLimit === 'string' && Number(props.wordLimit) > 0) {
		return Math.ceil(Number(props.wordLimit))
	}
	if (typeof props.wordLimit === 'number' && props.wordLimit > 0) {
		return props.wordLimit
	}
	return 100
})

const textareaStyle = computed(() => {
	const rowCount = typeof props.rows === 'number' ? props.rows : (Number(props.rows) || 3);
	// 每行大约42rpx高度（28rpx字体 + 14rpx行距）
	const minHeight = rowCount * 42;
	return `min-height: ${minHeight}rpx;`;
})

function change(e) {
	emits('change', {
		title: props.title,
		value: e.detail.value
	})
}

</script>

<style lang="scss" scoped>
.textarea-row {
	padding: 24rpx 30rpx;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;
}

.form-textarea {
	width: 100%;
	font-size: 28rpx;
	padding: 20rpx;
	border-radius: 8rpx;
	box-sizing: border-box;
}

.form-textarea--border {
	border: 1px solid #eee;
}

.form-textarea__count {
	padding-top: 20rpx;
	text-align: right;
	color: #666;
	font-size: 24rpx;
}
</style>
