<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 :disabled="disableChange" :value="value" class="form-textarea" :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({
	form: {
		type: Object,
		default: () => ({})
	},
	name: {
		default: ''
	},
	required: {
		type: Boolean,
		default: false
	},
	title: {
		default: ''
	},
	disableChange: {
		type: Boolean,
		default: false
	},
	wordLimit: {
		type: [Number, String],
		default: 100
	}
})

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

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: 30rpx;
}

.form-textarea {
	width: 100%;
	font-size: 30rpx;
	border: 1px solid #eee;
	padding: 20rpx;
	border-radius: 8rpx;
	box-sizing: border-box;
}

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