<template>
	<div class="efly-select-box">
		<div class="efly-select-item" v-for="(item,index) in list.data">
			<div v-show="search === '' || (searchType === 'front' && item[main].indexOf(search) !== -1) || searchType === 'interface'"
					class="efly-select-item-label"
					:class="{
			    	'disabled': item['efly-select-forbidden'],
			    	'active': item.selected,
			    	'pad-r-default': type === 'tier'
				}"
					:style="{'text-indent': tier * 10 + 'px'}"
					@click="selectItem(item, index)">
				<p>{{item[main]}}</p>
				<p class="text-secondary mar-t-xs" v-if="minor">{{item[minor]}}</p>
				<i v-if="children && item[children] && item[children].length > 0"
				   class="icon"
				   :class="item.groupShow ? downIcon : rightIcon"
				   @click.stop="showGroup(item)"></i>
			</div>
			<efly-select-box
					v-if="children && item[children] && item[children].length > 0 && item.groupShow"
					:type="type"
					:multi="multi"
					:search="search"
					:searchType="searchType"
					:data="item[children]"
					:main="main"
					:minor="minor"
					:children="children"
					:tier="tier+1"
					:downIcon="downIcon"
					:rightIcon="rightIcon"
			></efly-select-box>
		</div>
	</div>
</template>

<script>
    import EflySelectBox from './select-box';

    export default EflySelectBox;
</script>

<style scoped>

</style>
