<!--
 * @Descripttion: 多选框组件
 * @Author: 龙运模
 * @Date: 2024年07月11日
 * @LastEditors: 龙运模
 * @LastEditTime:
-->

<template>
	<div class="scSelect">
		<el-select v-bind="$attrs" v-model="localData" class="input" :size="size" @visible-change="getDataList" @change="selectChange" :placeholder="placeholder" clearable>
			<slot></slot>
		</el-select>
	</div>
</template>

<script>
export default {
	name: "index",
	props:{
		activation_select: {
			type: Object,
			default: () => ({ operator: "in", value: [] })
		},
		size:{ type: String, default: "small" },
		placeholder:{type:String, default:"请选择"},
	},
	watch:{
		activation_select:{
			handler(val){
				if(!val || val.value.length == 0){
					this.localData = [];
				}else{
					this.localData = val.value
				}
			},
			immediate:true,
			deep:true
		}
	},
	data(){
		return{
			localData:[],
		}
	},
	mounted() {

	},
	methods:{
		getDataList(val){
			this.$emit('fetchData',val);
		},
		selectChange(e){
			this.localData = e;
			this.emitActivationSelect();
		},
		emitActivationSelect() {
			this.$emit('update:activation_select', {
				operator: this.activation_select.operator,
				value: this.localData? this.localData:[]
			});
			this.$emit('changeSelectData');
		}
	}
}
</script>

<style scoped lang="scss">
.scSelect{
	width: 100%;
	height: 100%;
	:deep(.el-input){
		height: 28px;
	}
}
</style>
