<template>
	<div :class="['es-select-panel']" ref="panelEl" v-show="panelState">
		<template v-if="sourceList.length">
			<div
				:class="[
					'es-select-panel__item',
					{
						'is-selected': item.value === selectedValue.value,
						'is-disabled': item.disabled,
					},
				]"
				v-for="item in sourceList"
				:key="item.value"
				@click="!item.disabled && addSelectedValue(item)"
				@mousedown.prevent
			>
				{{ item.label }}
			</div>
		</template>
		<span v-else class="no-data">
			{{ inputValue.length ? '无匹配数据' : '无数据' }}
		</span>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from 'vue'

export default defineComponent({
	name: 'EsSelect',
	props: {},
	setup() {
		const parent: esSelectGlobalType.rootProvide = inject('parent')
		const panelEl = ref(null)

		return {
			panelEl,
			panelState: parent.panelState,
			sourceList: parent.sourceList,
			selectedValue: parent.selectedValue,
			inputValue: parent.inputValue,
			inputEl: parent.inputEl,
			addSelectedValue(item) {
				parent.closePanel()
				parent.addSelectedValue(item)
			},
			...parent.keyConfig,
		}
	},
})
</script>
