<template>
	<div class="search">
		<v-menu v-model="menu" @update:model-value="obtain" location="bottom start" :close-on-content-click="false">
			<template v-slot:activator="{ props }">
				<v-text-field v-model="queryParam.condition" :placeholder="$attrs.placeholder || '请输入查询内容'"
					:style="$attrs.styles" class="box" density="compact" variant="outlined" hide-details
					@click:append="search" @keyup.enter="search" @click:clear="(queryParam.condition = ''), search()"
					clearable>
					<template v-slot:append-inner>
						<v-badge dot :content="initialIndex" :model-value="initialIndex > 0" color="error"
							class="advanced-badge">
							<span v-bind="props"
								class="text-blue vtk-cursor-pointer d-inline-flex align-center text-body-2">
								高级
							</span>
						</v-badge>
					</template>
				</v-text-field>
			</template>
			<v-card style="width: 380px;margin-top: 25px;">
				<v-card-title class="pr-3 d-flex justify-space-between align-center pb-5">
					高级搜索
					<v-btn class="mx-0" variant="text" icon @click="close" small>
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-card-title>
				<v-card-text>
					<slot></slot>
				</v-card-text>
				<v-card-actions class="pt-0 px-4 pb-3">
					<slot name="actions"></slot>
					<v-spacer />
					<v-btn @click="search" variant="flat" color="primary">
						<v-icon class="mr-1">mdi-magnify</v-icon>搜索
					</v-btn>
					<v-btn @click="reset" variant="flat" color="error">
						<v-icon class="mr-1">mdi-sync</v-icon>重置
					</v-btn>
				</v-card-actions>
			</v-card>
		</v-menu>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

defineOptions({
	name: "VtkSearch"
});

const props = defineProps({
	value: {
		type: Object,
		default: () => ({})
	}
});

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

// 响应式数据
const user = ref({});
const menu = ref(false);
const queryParam = ref({ ...props.value });
const initialIndex = ref(0);

// 监听 props.value 的变化
watch(
	() => props.value,
	(newVal) => {
		queryParam.value = { ...newVal };
	},
	{ deep: true }
);

onMounted(() => {
	user.value = JSON.parse(localStorage.getItem("user") || "{}");
	initialIndex.value = 0;
});

// 方法
const obtain = () => {
	if (!menu.value) {
		initialIndex.value = 0;
	}
};

const close = () => {
	menu.value = false;
	obtain();
};

const search = () => {
	close();
	emit('update:value', queryParam.value);
	emit("search");
};

// 重置
const reset = () => {
	// 简化版重置逻辑
	Object.keys(queryParam.value).forEach(key => {
		if (key !== 'condition') {
			delete queryParam.value[key];
		}
	});

	delete queryParam.value.condition;
	initialIndex.value = 0;
	emit('update:value', queryParam.value);
	emit("search");
	menu.value = false;
};
</script>

<style lang="scss" scoped>
.search {
	position: relative;
	min-width: 380px;
	min-height: 40px;
}

.box {
	min-width: 380px;
	min-height: 40px;
}


:deep(.box .v-field__append-inner) {
	cursor: pointer;
	padding-left: 16px !important;
	padding-right: 4px !important;
	border-left: 1px #cccccc88 solid;
	min-width: 50px;
	display: flex;
	align-items: center;
}

:deep(.v-overlay__content) {
	top: 285px !important;
	left: unset !important;
	right: 60px !important;
	min-width: 380px;
}
</style>