<template>
	<div class="headerSearch" v-for="(item,index) in columnList" :key="item" @click="hidePopover">
		<div class="searchItem" v-if="item.search_type == 'date_range' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
			<label class="name">{{item.label}}</label>
			<scDatePicker :size="size" v-model:activation_date="params[item.prop]" @change="changeData" @visible-change="getSelect(item,$event)" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
		</div>
		<div class="searchItem" v-if="item.search_type =='checkbox' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
			<label class="name">{{item.label}}</label>
			<scMultipleSelect :size="size" v-model:activation_select="params[item.prop]" @changeSelectData="changeData" @fetchData="getSelect(item,$event)" :placeholder="'请选择'+item.label" multiple collapse-tags filterable clearable>
				<el-option v-for="em in item.data" :key="em" :label="em.label" :value="em.value || em.id"></el-option>
			</scMultipleSelect>
		</div>
		<div class="searchItem" v-if="item.search_type == 'radio' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
			<label class="name">{{item.label}}</label>
			<el-select class="input" :size="size" v-if="params[item.prop]" v-model="params[item.prop].value" @change="changeData" @visible-change="getSelect(item,$event)" :placeholder="'请选择'+item.label" filterable clearable>
				<el-option label="开启" :value="true"></el-option>
				<el-option label="关闭" :value="false"></el-option>
			</el-select>
			<el-select class="input" :size="size" v-else v-model="params[item.prop]" :placeholder="'请选择'+item.label" filterable clearable>
				<el-option label="开启" :value="true"></el-option>
				<el-option label="关闭" :value="false"></el-option>
			</el-select>
		</div>
		<div class="searchItem" v-if="item.search_type == 'select' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
			<label class="name">{{item.label}}</label>
			<el-select class="input" :size="size" v-model="params[item.prop]" @change="changeData" @visible-change="getSelect(item,$event)" :placeholder="'请选择'+item.label" filterable clearable>
				<el-option v-for="em in item.data" :key="em" :label="em.label " :value="em[item.code[0]] || em.active_status"></el-option>
			</el-select>
		</div>
		<div class="searchItem" v-if="item.search_type == 'text' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
			<label class="name">{{item.label}}</label>
			<div>
				<scVgInput class="input" v-model:activation_text="params[item.prop]" @fetchData="getText(item,$event)" :placeholder="'请输入'+item.label" :size="size"></scVgInput>
			</div>
		</div>
	</div>
</template>

<script>
import {eventBus} from "@/utils/eventBus";

export default {
	name: "headerSearch",
	emits: ['fetchSelectData','changeHeaderData'],
	props:{
		searchList:{type: Array},
		paramsData:{type: Object,default:()=>{}},
		searchShow:{type: Boolean,default:false},
	},
	watch:{
		searchList:{
			handler(val){
				if(val && val.length>0){
					this.columnList = this.sortData(this.$TOOL.objCopy(val.filter(em=> !em.hide && em.is_search)));
					this.params = this.groupByType(val);
				}
			},
			immediate:true,
			deep:true
		},
		paramsData:{
			handler(val){
				if(val){
					this.params = val;
				}
			},
			immediate:true,
			deep: true,
		},
		keywordParams:{
			handler(val) {
				for(let i in this.params){
					if(this.params[i].keyword){
						this.params[i].value = val===""?"":'%'+val+'%';
					}
				}
			},
			immediate:true
		}
	},
	data(){
		return{
			size:"small",
			columnList:this.searchList,
			selectItem:'',
			selectShow:false,

			params:{},
			keywordParams:"",
		}
	},
	mounted() {

	},
	methods:{
		changeData(){
			this.$emit('changeHeaderData',this.params);
		},
		getSelect(item,e){
			if(!e) return
			this.$emit('fetchSelectData',{data:item,params:this.params});
			eventBus.$emit('close-all-popovers');
		},
		getText(item){
			this.$emit('fetchSelectData',{data:item,params:this.params});
		},
		hidePopover(){
			eventBus.$emit('close-all-popovers');
		},
		reload(){
			this.keywordParams = "";
			for(let i in this.params){
				if(typeof this.params[i] === "object" && this.params[i] !=null){
					if(typeof this.params[i].value == "string"){
						this.params[i].value = "";
					}else if(typeof this.params[i].value == "boolean"){
						this.params[i].value = "";
					}else{
						this.params[i].value = [];
					}
				}else{
					this.params[i] = "";
				}
			}
		},
		// 排序
		sortData(list){
			const sortedArray = list.sort((a, b) => {
				const priority = ['date_range', 'date'];

				// 获取a和b的search_type在优先级数组中的索引
				const aPriority = priority.indexOf(a.search_type);
				const bPriority = priority.indexOf(b.search_type);

				// 如果a在优先级数组中而b不在，a排在前面
				if (aPriority !== -1 && bPriority === -1) return -1;
				// 如果b在优先级数组中而a不在，b排在前面
				if (bPriority !== -1 && aPriority === -1) return 1;
				// 如果都在优先级数组中，按优先级数组中的顺序排序
				if (aPriority !== -1 && bPriority !== -1) return aPriority - bPriority;
				// 如果都不在优先级数组中，保持原顺序
				return 0;
			});
			return sortedArray;
		},

		groupByType(list){
			const grouped = {};
			list.forEach(item=>{
				if (!grouped[item.prop]) {
					if(typeof item.prop == 'string'){
						grouped[item.prop] = {};
					}
				}
				if (item.search_type === 'text' && Array.isArray(item.prop)) {
					item.code.forEach(code => {
						if(!grouped[code]){
							grouped[code] = {};
						}

						let params = {};
						if(item.keyword){
							params = {
								keyword:true,
								operator:'like',
								value:""
							}
						}else{
							params = {
								operator:'like',
								value:""
							}
						}
						grouped[code] = params;
					});
				} else {
					let params = {
						operator:item.condition,
						value:item.condition=='like' || item.condition == "="?"":[]
					}
					grouped[item.prop] = item.condition=='' || item.condition== 'link'?"":params;
				}
			})
			for(let i in grouped){
				if(this.params[i]){
					if(i === 'active_status'){
						grouped[i].value = this.params[i]
					}
					grouped[i].value = this.params[i].value
				}
			}
			return grouped
		},
	}
}
</script>

<style scoped lang="scss">

</style>
