<template>
	<a-select
		class="my-select"
		:size="size"
		@change="change"
		:defaultValue="defaultValue"
		@dropdownVisibleChange="dropdownVisibleChange"
		:disabled="disabled"
	>
		<a-select-option
			v-for="v in list"
			:key="v.value"
			:value="v.value"
			:title="v.tip"
			@mouseover.stop.prevent="mouseover(v)"
			@mouseleave="mouseleave(v)"
			>{{ v.label }}</a-select-option
		>
	</a-select>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, watch } from "vue";
	const props = defineProps({
		disabled: {
			type: Boolean,
			default: false,
		},
		defaultValue: {
			default: "",
		},
		list: {
			type: Array,
			default: () => [],
		},
		size: {
			type: String,
			default: "small",
		},
	});
	const emit = defineEmits(["change", "active"]);
	const isChange = ref(false);
	const initValue = ref(props.defaultValue);
	const activeValue = ref(props.defaultValue);
	const timeout = ref(null);
	const mouseover = (v) => {
		clearTimeout(timeout.value);
		if (v.value === activeValue.value) return;
		emit("active", v.value, activeValue.value);
		activeValue.value = v.value;
	};
	const mouseleave = () => {
		clearTimeout(timeout.value);
		timeout.value = setTimeout(() => {
			dropdownVisibleChange(false);
		}, 100);
	};
	const change = (v) => {
		isChange.value = true;
		emit("change", v, initValue.value);
	};
	const dropdownVisibleChange = (v) => {
		if (v) {
			isChange.value = false;
			initValue.value = props.defaultValue;
		} else if (!isChange.value) {
			emit("active", initValue.value, activeValue.value);
			activeValue.value = initValue.value;
		}
	};
</script>
