<template>
	<div
		:class="['es-select-multipart-panel']"
		ref="panelEl"
		v-show="panelState"
	>
		<template v-if="sourceList.length">
			<div
				:class="[
					'es-select-multipart-panel__item',
					{
						'is-selected': isSelected(item),
						'is-disabled': item.disabled,
					},
				]"
				v-for="item in sourceList"
				:key="item[valueKey]"
				@click="!item.disabled && toggleSelect(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: esSelectMultipartGlobalType.rootProvide = inject('parent')
		const panelEl = ref(null)

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