<template>
	<u-popup :show="show" closeable @close="show = false">
		<view class="w-wx-login">
			<view class="h2 bold" v-if="props.h2">{{props.h2}}</view>
			<view class="h3" v-if="props.h3">{{props.h3}}</view>
			<view class="form">
				<view class="input-item">
					<view class="label" v-if="props.label">{{props.label}} :</view>
					<view class="info" v-if="props.type.toLowerCase()=='textarea'">
						<textarea style="height: 4em; padding: .4rem 0;" class="input" v-model="formValue" placeholder-style="color:var(--w-text-light-2);" :placeholder="props.placeholder" @change="emit('change');"></textarea>
					</view>
					<view class="info" v-else>
						<input :type="props.type" class="input" placeholder-style="color:var(--w-text-light-2);"  v-model="formValue" :placeholder="props.placeholder" @change="emit('change');"/>
					</view>
					
				</view>
			</view>
			<view class="submit" hover-class="w-hover" @click="$u.throttle(submit())">{{props.text}}</view>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref,computed,toRaw } from 'vue'
	
	const props = defineProps({
		modelValue:{
			type:String,
			default:""
		},
		type : {
			type:String,
			default:"input"
		},
		open:{
			type:Boolean,
			default:false
		},
		text:{
			type:String,
			default:"提交"
		},
		label:{
			type:String,
			default:"label"
		},
		h2:{
			type:String,
			default:"请在下面输入"
		},
		h3:{
			type:String,
			default:""
		},
		placeholder:{
			type:String,
			default:""
		}
		
	});
	
	const emit = defineEmits(["submit","update:modelValue","update:open","change"])
	
	const show = computed({
		get(){
			return props.open;
		},
		set(value){
			emit("update:open",value);
		}
	});
	
	const formValue = computed({
		get(){
			return props.modelValue;
		},
		set(value){
			emit("update:modelValue",value);
		}
	});
	
	const submit = ()=>{
		emit("submit",formValue);
	}
</script>


<style lang="scss" scoped>
	.w-wx-login{
		width: 100%;
		padding: 1rem;
		color: var(--w-main-dark);
		box-sizing: border-box;
		.h2{
			font-size: 1rem;
		}
		.h3{
			font-size: .8rem;
			color: var(--w-bg-dark-2);
			line-height: 1.4;
			padding:1rem 0;
		}
		.bold{
			font-weight: bold;
		}
		.form{
			
			&::before {
				content: '';
				display: block;
				background-color: var(--w-bg-dark);
				width: 100%;
				height: 1px;
				transform: scaleY(.5);
			}
			
			.input-item{
				padding: .5rem 0;
				display: flex;
				position: relative;
				&::before {
					content: '';
					position: absolute;
					background-color: var(--w-bg-dark);
					width: 100%;
					height: 1px;
					bottom: 0;
					transform: scaleY(.5);
				}
				.label {
					font-size: 1rem;
					padding: .5rem;
					line-height: 1;
					
				}
				.input {
					width: 100%;
					height: 100%;
					top:0;
					left:0;
					box-sizing: border-box;
					border:none;
					outline: none;
					color:var(--w-text);
					font-size: .95rem;
					background-color: #0000;
				}
				.info {
					flex:1;
					position: relative;
				}
			}
		}
		.submit{
			margin-top: 20px;
			width: 100%;
			border-radius: 0;
			text-align: center;
			line-height: 2.5;
			color: var(--w-bg);
			border-radius: .2rem;
			font-size: 1.1rem;
			letter-spacing: .2rem;
			background: var(--w-main);
			&.w-hover {
				background: var(--w-main-dark);
			}
		}
	}
</style>