<template>
	<div class="selectedBox">
		<div class="selected" @click.stop="downClick">
			<span class="name">{{selectedName}}</span>
			<el-icon class="icon" :class="downShow?'selectedIcon':''"><el-icon-arrow-down /></el-icon>
		</div>
		<slot name="down">
			<div class="downMain" v-bind="$attrs" v-if="downShow">
				<div class="item" :class="selectedValue===item.value?'itemTrue':''" @click="itemClick(item)" v-for="(item,index) in list" :key="index">{{item.name}}</div>
			</div>
		</slot>
	</div>
</template>

<script>
import {eventBus} from "@/utils/eventBus";
export default {
	name: "",
	data(){
		return{
			downShow:false,
			selectedName:'',
			selectedValue:'',
			list:[]
		}
	},
	props:{
		listData:{
			type:Array
		},
		name:{
			type:String
		},
		value:{
			type:[String,Number]
		}
	},
	watch:{
		listData:{
			handler(val){
				this.list = val;
			},
			deep:true,
			immediate:true
		},
		name:{
			handler(val){
				this.selectedName = val
			},
			immediate:true
		},
		value:{
			handler(val){
				this.selectedValue = val
			},
			immediate:true
		}
	},
	mounted() {

	},
	methods:{
		downClick(){
			this.downShow = !this.downShow;
			eventBus.$emit('searchDownShow',this.downShow);
		},
		downOut(){
			this.downShow = false;
		},
		itemClick(item){
			this.selectedName = item.name;
			this.selectedValue = item.value;
			this.downShow = false;
			this.$emit('scSelect',{name:this.selectedName,value:this.selectedValue});
		}
	}
}
</script>

<style scoped lang="scss">
	.selectedBox{
		position: relative;
	}
	.selected{
		padding: 0 10px;
		color: #555;
		display: flex;align-items: center;
		height: 30px;
		border-right: 1px solid #e9e9e9;
		cursor: pointer;
		.name{margin-right: 4px;}
		.selectedIcon{
			transform: rotate(180deg);
		}
	}
	.downMain{
		position: absolute;
		left: 0;
		top: 35px;
		z-index: 100;
		background: var(--el-bg-color);
		width: 100%;
		color: #555;
		border-radius: 0 0 4px 4px;
		background-color: var(--el-fill-color-blank);
		transition: var(--el-transition-duration);
		transform: translateZ(0);
		box-shadow: 0 6px 4px rgba(180, 207, 235, 0.25);
		//border: 1px solid var(--el-border-color-light);
		.item{
			padding: 0 10px;text-align: left;
		}
		.item:hover{
			background-color: var(--el-color-primary-light-9);
			color: var(--el-color-primary);
			cursor: pointer;
		}
		.itemTrue{
			color: var(--el-color-primary);
		}
	}
</style>
