<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="top" :round="0">
		<view class="u-p-32 box u-font-28">
			<view style="display: flex;align-items: center;">
				<up-search v-model="searchVal" actionText="" @search="search" @clear="search"></up-search>
				<text @tap="search">搜索</text>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		watch,
		nextTick
	} from 'vue';

	const refForm = ref(null)
	let searchVal = ref('')

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})
	let data = ref(props.goods)
	const emits = defineEmits(['update:show', 'search'])
	const form = reactive({
		note: ''
	})
	let popShow = ref(props.show)
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = {
				...props.goods
			}
		}
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
	}

	function open() {

	}

	function search() {
		console.log(searchVal.value, '值啊啊啊啊 ')
		emits('search', searchVal.value)
		close()
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 556rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}

	.close {
		position: absolute;
		right: 0;
	}

	.number {
		color: #EE4646;
	}
</style>