<template>
	<common-cell :name="name" :required="required">
		<view class="form-content__wrapper">
			<input :disabled="disableChange" :value="value" :type="inputType" class="form-input" :placeholder="placeholder"
				placeholder-class="form__placeholder" :maxlength="wordLimit" @input="change($event)" />
			<view v-if="appendText" class="appendText"> {{ appendText }}</view>
		</view>
	</common-cell>
</template>
<script setup>
import { computed } from 'vue';

import commonCell from '../common-cell.vue';

const emits = defineEmits(['change']);
const props = defineProps({
	appendText: {
		default: ''
	},
	form: {
		type: Object,
		default: () => ({})
	},
	inputType: {
		default: 'text'
	},
	name: {
		default: ''
	},
	required: {
		type: Boolean,
		default: false
	},
	title: {
		default: ''
	},
	disableChange: {
		type: Boolean,
		default: false
	},
	wordLimit: {
		type: [Number, String],
		default: 20
	},
	placeholder: {
		type: String,
		default: ''
	}
})

const placeholder = computed(() => props.placeholder || `请输入${props.name || ''}`)
const value = computed(() => {
	const v = props.form?.[props.title];
	return v === undefined || v === null ? '' : String(v);
})

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

</script>

<style>
@import '../cell-style.css';

.form-input {
	flex-grow: 1;
	font-size: 30rpx;
}

.appendText {
	margin-left: 10rpx;
	flex-shrink: 0;
}
</style>
