<template>
	<div
		:class="{
			'es-select-input': true,
			'is-focus': isFocus,
			'is-disabled': disabled,
		}"
		@click="!disabled && togglePanelState()"
		@mouseover="hoverIcon = true"
		@mouseout="hoverIcon = false"
	>
		<input
			:class="[
				'es-select-input__selected__placeholder',
				{ 'is-disabled': disabled },
			]"
			v-if="!inputValue.length && !filterable"
			readonly
			:value="selectedValue.label"
			:placeholder="placeholder"
		/>
		<!-- 输入框 -->
		<input
			v-else
			ref="inputEl"
			:placeholder="
				isFocus && selectedValue.label
					? selectedValue.label
					: placeholder
			"
			:value="isFocus && panelState ? inputValue : selectedValue.label"
			@input="onInputChangeEvt"
			@focus="onInputFocusEvt"
			@blur="onInputBlurEvt"
		/>
		<span :class="['es-select-input__icon', { 'is-disabled': disabled }]">
			<i
				v-if="hoverIcon && selectedValue.value && !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: esSelectGlobalType.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.inputValue.value = ''
				parent.togglePanelState(inputEl)
			},
			sourceList: parent.sourceList,
			hoverIcon,
		}
	},
})
</script>
