<template>
	<div class="popoverBox">
		<div class="handlerView" ref="buttonRef">
			<span v-if="column.is_search && !column.hide && columnHeaderSetup" class="label" :class="filterModelParams.data && filterModelParams.data[column.prop] && ((typeof filterModelParams.data[column.prop].value === 'boolean' && filterModelParams.data[column.prop].value!=='') || (typeof filterModelParams.data[column.prop].value != 'boolean' && filterModelParams.data[column.prop].value!='')) ?'labelColor':''" style=" cursor: pointer;" @click.stop="clickShow(column)">
				<span class="name">{{ column.label }}</span>
				<el-icon class="sc-trend-icon"><sc-icon-Filter /></el-icon>
			</span>
			<span v-else class="label name" @click.stop>
				{{ column.label }}
			</span>
		</div>

		<div class="customPopperView" v-if="visible">
			<el-popover :visible="visible" placement="bottom-end" :virtual-ref="buttonRef" virtual-triggering :ref="`popover-${columnIndex}`" popper-class="customPopper">
				<!-- text 文本 -->
				<div v-if="column.search_type == 'text'" @click.stop>
					<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" :size="size" clearable v-model="filterValue" placeholder="请输入查询内容" @clear="filterClear"></el-input>
				</div>
				<!-- date 单个日期-->
				<div v-else-if="column.search_type == 'date'" @click.stop>
					<el-date-picker v-model="filterValue" type="date" placeholder="选择日期" :size="size" format="YYYY-MM-DD" @clear="filterClear" />
				</div>
				<!-- datetime 日期时间-->
				<div v-else-if="column.search_type == 'datetime'" @click.stop>
					<el-date-picker v-model="filterValue" type="datetime" :size="size" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss" @clear="filterClear" />
				</div>
				<!-- date_range 日期范围-->
				<div v-else-if="column.search_type == 'date_range'" @click.stop>
					<el-date-picker v-model="filterValue" type="daterange" :size="size" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="dateChange"></el-date-picker>
				</div>
				<!-- radio 单选框-->
				<div v-else-if="column.search_type == 'radio'" @click.stop>
					<el-radio-group :size="size" v-model="filterValue">
						<el-radio :value="true" :label="true">开启</el-radio>
						<el-radio :value="false" :label="false">关闭</el-radio>
					</el-radio-group>
				</div>
				<!-- select 下拉选择-->
				<div v-else-if="column.search_type == 'select'" @click.stop>
					<el-select v-model="filterValue" placeholder="请选择" style="width: 100%" :size="size" clearable filterable filter @clear="filterClear" @visible-change="visibleChange(column,$event)">
						<el-option v-for="(item, index) in column && column.data" :key="index" :label="item.label" :value="item.id"></el-option>
					</el-select>
				</div>
				<!-- select 多选下拉选择-->
				<div v-else-if="column.search_type == 'checkbox'" @click.stop>
					<el-select v-model="filterValue" placeholder="请选择" style="width: 100%" :size="size" clearable filterable filter multiple collapse-tags @clear="filterClear" @visible-change="visibleChange(column,$event)">
						<el-option v-for="(item, index) in column && column.data" :key="index" :label="item.label" :value="item.value || item.id"></el-option>
					</el-select>
				</div>

				<div style="text-align: right;display: flex;justify-content: flex-end;">
					<el-button class="confirm" :size="size" @click="closeVisible">取消</el-button>
					<el-button @click="confirm()" type="primary" :size="size" class="confirm">确定</el-button>
				</div>
			</el-popover>
		</div>
	</div>
</template>
<script>
/**
 *  逻辑 => 希望每次只打开一个 选择的数组都有 filterList 接收 每次只传当前选择的数据过来
 *  */
import { inject } from "vue";
import {eventBus} from "@/utils/eventBus"
export default {
	name: 'typePopover',
	directives: {

	},
	data() {
		return {
			buttonRef:{},
			visible: false,
			size: 'small',
			checkedColumn: {},
			filterValue: '',
			allowedRange: { start: null, end: null }, // 动态允许的日期范围
			defaultTime:[
				new Date(2000, 1, 1, 0, 0, 0),
				new Date(2000, 2, 1, 23, 59, 59),
			],
		}
	},
	computed:{

	},
	watch:{

	},
	props: ['column', 'columnIndex'],  // column 当前表头   columnIndex 弹框下标
	setup() {
		const filterUploadClick = inject('filterUploadClick', () => { });
		const filterUploadParams = inject('filterUploadParams', () => { });
		const filterTagClose = inject('filterTagClose', () => { });
		const filterModelParams = inject('filterModelParams', ()=>{});
		const columnHeaderSetup = inject('columnHeaderParams', true);

		return { filterUploadClick, filterUploadParams, filterTagClose, filterModelParams, columnHeaderSetup};
	},
	created() {
		eventBus.$on('close-all-popovers', this.closePopover);
		eventBus.$on('reset-popovers', this.resetFilter);
	},
	unmounted() {
		eventBus.$off('close-all-popovers', this.closePopover);
		eventBus.$off('reset-popovers', this.resetFilter);
	},
	mounted() {

	},
	methods: {
		clickShow(column) {
			const wasVisible = this.visible;
			eventBus.$emit('close-all-popovers');
			this.visible = !wasVisible;
			if (this.visible) {
				this.buttonRef = this.$refs.buttonRef;
				this.checkedColumn = column;
				if (this.filterModelParams && this.filterModelParams.data && this.filterModelParams.data[column.prop]) {
					switch (column.search_type){
						case "text":
							this.filterValue = this.filterModelParams.data[column.prop].value.replace(/%/g, "");
							break;
						case "date_range":
							this.filterValue = this.filterModelParams.data[column.prop].value.map((date,index)=> index===0? this.$TOOL.getStartTime(date):this.$TOOL.getEndTime(date))
							break;
						default:
							this.filterValue = this.filterModelParams.data[column.prop].value;
							break;
					}
				}
			}
		},
		visibleChange(item,e) {
			if(!(e && this.filterUploadClick)) return
			let params = {
				operator:item.condition,
				value:this.filterValue?this.filterValue:[]
			}
			this.filterUploadClick({data:item,params:{[item.prop]:params}});
		},
		/**
		 *  确定时 判断是选择类型 radio checkbox 获取列表的 name
		 * */
		confirm() {
			this.visible = false;
			if ((!this.filterValue && this.checkedColumn.search_type!='radio') || this.filterValue === "") {
				this.filterValue = "";
				if(this.checkedColumn.search_type !== "text"){
					return
				}
			}
			let params = {
				operator:this.checkedColumn.condition,
				value:""
			}
			switch (this.checkedColumn.search_type){
				case 'text':
					params.value = this.filterValue?this.checkedColumn.condition==="="?this.filterValue:'%'+this.filterValue+'%':""
					break;
				case 'date_range':
					params.value = this.filterValue.map((date,index) => index===0? this.$TOOL.formatStartTime(date):this.$TOOL.formatEndTime(date));
					break;
				default:
					params.value = this.filterValue;
					break
			}
			this.filterUploadParams({[this.checkedColumn.prop]:params});
		},
		closeVisible(){
			this.visible = false;
		},
		closePopover() {
			this.visible = false;
		},
		/** 日期清空的处理 */
		dateChange(val) {
			if (val === null) {
				this.filterClear();
			}
		},
		/** 清空 */
		filterClear() {
			let params = {
				operator: this.checkedColumn.condition,
				value: '',
			}
			switch (this.checkedColumn.search_type){
				case 'text':
					params.value = ""
					break;
				case 'date_range':
					params.value = [];
					break;
				case 'checkbox':
					params.value = [];
					break;
				default:
					params.value = "";
					break
			}
			this.filterValue = "";
			this.filterTagClose({[this.checkedColumn.prop]:params});
		},
		/** 重置输入框值 */
		resetFilter(){
			this.filterValue = "";
			this.visible = false;
		}
	},
}
</script>
<style scoped lang="scss">
.popoverBox {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
	.handlerView{
		width: 100%;
	}
	.label{
		width: 100%;
		.el-icon{
			flex-basis: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #a8abb2;
		}
	}
	.name{
		flex: 1;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.confirm {
	margin-top: 10px;
}

.label {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: flex;
	align-items: center;
}

.labelColor {
	color: var(--el-color-primary);
}

.el-icon-arrow-down {
	cursor: pointer;
}

.el-checkbox-group {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	max-height: 150px;
	overflow-y: auto;
}
</style>
