<template>
	<div
		:class="[
			'es-select-multipart-input',
			{ 'is-focus': isFocus, 'is-disabled': disabled },
		]"
		@click="!disabled && togglePanelState()"
		@mouseover="hoverIcon = true"
		@mouseout="hoverIcon = false"
	>
		<!-- 选中值展示 -->
		<div
			class="es-select-multipart-input__selected-value-list"
			v-if="selectedValue.length"
		>
			<span
				class="es-select-multipart-input__selected-value-list__value"
				v-for="selected in selectedValue"
				:key="selected.value"
			>
				{{ selected.label }}
				<em
					class="es-select-multipart-input__selected-value-list__value__icon el-icon-close"
					@click="removeSelectedValue(selected)"
				></em>
			</span>
		</div>
		<input
			:class="[
				'es-select-multipart-input__selected__placeholder',
				{ 'is-disabled': disabled },
			]"
			v-if="!filterable && !selectedValue.length"
			readonly
			:placeholder="placeholder"
		/>
		<!-- 输入框 -->
		<input
			v-if="filterable"
			ref="inputEl"
			:placeholder="selectedValue.length ? '' : placeholder"
			:value="inputValue"
			@input="onInputChangeEvt"
			@focus="onInputFocusEvt"
			@blur="onInputBlurEvt"
		/>
		<span
			:class="[
				'es-select-multipart-input__icon',
				{ 'is-disabled': disabled },
			]"
		>
			<i
				v-if="hoverIcon && selectedValue.length && !disabled"
				class="el-icon-circle-close"
				@click="clearSelectedValue"
			></i>
			<i
				:class="['el-icon-arrow-up', { 'is-reverse': panelState }]"
				v-else
			></i>
		</span>
	</div>
</template>

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

export default defineComponent({
	name: 'EsSelectInput',
	setup() {
		const parent: esSelectMultipartGlobalType.rootProvide = inject('parent')

		const hoverIcon = ref<boolean>(false)
		const inputEl = ref(null)
		onMounted(() => {
			parent.setInputEl(inputEl.value)
			parent.inputEl = inputEl
		})

		const { placeholder, filterable, disabled } = toRefs(parent.props)

		return {
			// input
			inputValue: parent.inputValue,
			clearSelectedValue: parent.clearSelectedValue,
			onInputChangeEvt(event) {
				parent.onInputChangeEvt(event, {
					sourceList: parent.sourceList,
					originalSourceList: parent.originalSourceList,
				})
			},
			onInputFocusEvt(event) {
				parent.onInputFocusEvt(event, {
					sourceList: parent.sourceList,
					originalSourceList: parent.originalSourceList,
					openPanel: parent.openPanel,
				})
			},
			onInputBlurEvt: parent.onInputBlurEvt,
			isFocus: parent.isFocus,
			// selected list
			selectedValue: parent.selectedValue,
			removeSelectedValue: parent.removeSelectedValue,
			...parent.keyConfig,

			placeholder,
			filterable,
			disabled,
			inputEl,

			panelState: parent.panelState,
			originalSourceList: parent.originalSourceList,
			openPanel: parent.openPanel,
			togglePanelState() {
				parent.togglePanelState(inputEl)
			},
			sourceList: parent.sourceList,
			hoverIcon,
		}
	},
})
</script>
