<template>
	<view class="item" :style="{backgroundColor: props.backColor}" :class="[props.border]">
		
		<!-- 左侧内容 即标题 -->
		<view class="title">
			<text v-if="props.start" class="require">*</text>
			<text style="color:#666f80"> {{ props.text }}</text>
		</view>
		
		<!-- 右侧内容 父组件替换此插槽，可以转变为上传图片等左右结构的布局 -->
		<slot>
			<input type="text" :value="props.value" @input="onChange" :placeholder="placeholderText" :disabled="props.disabled" />
		</slot>
			
	</view>
	<view v-if="props.tipText" class="tipText">
		({{ props.tipText }})
	</view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	value: {type: String, default: ''},
	text: {type: String, default: ''},
	tipText: {type: String, default: ''}, // 自定义的提示文字
	start: {type: Boolean, default: true }, // 代表必填项的小星星
	disabled: {type: Boolean, default: false}, // 是否禁止填写
	backColor: {type: String, default: '#fafbfc'}, // 背景颜色
	border: {type: String, default: 'top-border'}, // border位置 上或下
	tipHolder: {type: String, default: ''} // 自定义placeholder
})

// 自定义placeholder 
let placeholderText = props.tipHolder ? props.tipHolder : `请输入${props.text}`

const emit = defineEmits(['update:value'])

const onChange = e => emit('update:value', e.detail.value)

</script>

<style scoped lang="scss">

.item{
	box-sizing: border-box;
	//height: 110rpx;
	width: 100%;
	// background-color: #fafbfc;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 35rpx 30rpx 35rpx 30rpx;
	font-weight: 500;
	font-size: 28rpx;
	text-align: left;
	color: #000;
	.title{
		text-align: left;
		font-weight: 500;
		font-size: 28rpx;
		color: #666f80;
		margin-right: 20rpx;
		white-space: nowrap;
	}
	input, textarea {
		flex-grow: 1;
		text-align: right;
		font-size: 28rpx;
	}
	.imgupload{
		position: relative;
		height: 120rpx;
		width: 120rpx;
		background-color: #E6E9ED;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delate{
		position: absolute;
		top: 70rpx;
		left: -20rpx;
		height: 40rpx;
		width: 40rpx;
		border-radius: 5rpx;
		background-color: #ff0000;
	}
	
}

// 星号
.require {
	width: 20rpx;
	color: red;
}

// 禁止标题换行
.title {
	display: flex;
	flex-direction: row;
	text {
		white-space: nowrap;
	}
}

.top-border {
	border-top: 1rpx solid #e8e8e8;
}
.bottom-border {
	border-bottom: 1rpx solid #e8e8e8;
}
.tipText {
	margin: 8rpx 20rpx 10rpx;
	color: #808080;
}
</style>