<!--
 * @Author: your name
 * @Date: 2021-03-11 08:49:02
 * @LastEditTime: 2021-04-07 11:13:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \efly-ui\src\components\efly\select\select.vue
-->
<template>
	<div class="efly-select" :class="{
	    disabled : status.disabled,
	    'efly-select-small': size === 'small',
	    'efly-select-mini': size === 'mini',
	    'efly-select-center': align === 'center',
	}" @mouseenter.stop="hover" :style="'width:'+width">
		<div>
			<div v-if="this.status.multi"
				 class="efly-select-multi"
				 :class="{
			    	'pad-t-xs': list.multi.length !== 0,
			    	'danger': border === 'danger'
					}">
				<span class="efly-select-multi-placeholder" v-if="list.multi.length === 0">{{placeholder}}</span>
				<div class="efly-select-multi-item" :class="{
				    'forbidden': item[forbidden] || disabled
				}" v-for="(item, index) in list.multi">
					<span>{{item[main]}}</span>
					<i class="icon" :class="cancelIcon" @click="deleteMultiOption(item,index)" v-if="!item[forbidden] && !disabled"></i>
				</div>
			</div>
			<input v-if="!this.status.multi"
				   type="select"
				   :placeholder="placeholder"
				   :class="{
				       'danger': border === 'danger'
				   }"
				   v-model="input"
				   disabled
			/>
			<i class="icon" :class="downIcon" v-if="list.data.length > 0 || defShowDownIcon"></i>
			<div class="efly-select-data"
				 v-show="status.content"
				 :style="{
				     'width': location.selectWidth,
				     'left': location.x,
				     'top': !isTop ? location.y : 'unset',
				     'bottom': !isTop ? 'unset' : location.y ,
				     'border': list.data.length === 0 && type !== 'search' && !showNodata ? 'none' : '',
				 }"
			>
				<div class="efly-select-search" v-if="type === 'search'">
					<input type="text" v-model="search" @input.stop="getSerach($event)">
					<i class="icon" :class="searchIcon"></i>
				</div>
				<div class="efly-select-content" :style="'max-height:'+ height" @click.stop="listShow()"
					 @scroll="scroll($event)">
					<div class="efly-select-content-nodata" v-if="list.data.length <= 0 && showNodata">
						{{nodataMessage}}
					</div>
					<efly-select-box
						v-if="list.data.length > 0"
						:type="type"
									 :multi="status.multi"
									 :search="search"
									 :searchType="searchType"
									 :data="list.data"
									 :main="main"
									 :minor="minor"
									 :tier="tier"
									 :children="children"
									 :downIcon="downIcon"
									 :rightIcon="rightIcon"
					></efly-select-box>
					<slot></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import EflySelect from './select';

    export default EflySelect;
</script>

<style lang="scss" scoped>
</style>
