<template>
	<view>
		<view class="fb-filter-bar">
			<view v-if="showBatch" class="selection-button bar-button" @click="switchBatch">
				<uv-icon name="batch" custom-prefix="fb-icon" size="22" :color="batchIconColor"></uv-icon>
			</view>
			<view class="filter-container">
				<!-- 横向滚动容器 -->
				<scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
					<FBFilterTitle v-for="(field, index) in queryFields" :key="index"
						:active="currentFilterField?.dataIndex?.join('.') === field.dataIndex?.join('.')"
						:openFilter="openFilter" :fieldInfo="field" v-model="props.modelValue" />
				</scroll-view>
			</view>
			<view class="search-button bar-button">
				<uv-icon name="search" color="#333" size="22"></uv-icon>
			</view>
		</view>
		<view class="filter-overlay" v-if="overlayShow" @click="closeOverlay" />
		<view class="filter-item-panel">
			<FBFilterField v-if="overlayShow && !!currentFilterField" ref="filterFieldRef" :closeOverlay="closeOverlay"
				:fieldInfo="currentFilterField" v-model="props.modelValue" />
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

import type { FieldInfo } from '../../types/basic';
import FBFilterField from './filter/field/index.vue'
import FBFilterTitle from './filter/title/index.vue'

interface FilterBarProps {
	queryFields: FieldInfo[]
	modelValue: any
	switchBatch: () => void
	batch: boolean,
	showBatch: boolean
}

const overlayShow = ref(false)
const currentFilterField = ref<FieldInfo>()
const filterFieldRef = ref()
const batchIconColor = ref('#333')

const props = defineProps<FilterBarProps>()
const closeOverlay = () => {
	overlayShow.value = false
	currentFilterField.value = undefined
}

watch(() => props.batch, (batch) => batchIconColor.value = batch ? '#1456F0' : '#333')

const queryFields = props.queryFields.filter(field => field.display === 'Show')

const openFilter = (field: FieldInfo) => {
	if (currentFilterField.value?.dataIndex?.join('.') !== field.dataIndex?.join('.')) {
		currentFilterField.value = { ...field }
		overlayShow.value = true
	} else {
		overlayShow.value = false
		currentFilterField.value = undefined
	}
}
</script>

<style lang="less" scoped>
.fb-filter-bar {
	width: 100vw;
	padding: 5px 0;
	display: flex;
	background: #fff;

	.bar-button {
		width: 41px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.9);
		z-index: 10;
	}

	.filter-container {
		flex: 1;
		overflow: hidden;

		.scroll-view {
			white-space: nowrap;
		}
	}

	/* 隐藏滚动条 */
	/deep/ ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
}

.fb-filter-gap {
	height: 40px;
}

.filter-overlay {
	position: fixed;
	// #ifdef H5
	top: 84px;
	// #endif
	// #ifndef H5
	top: 40px;
	// #endif
	left: 0;
	right: 0;
	z-index: 999;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	transition: transform 0.3s;
	transition-duration: 0.3s;
}

.filter-item-panel {
	position: fixed;
	// #ifdef H5
	top: 83px;
	// #endif
	// #ifndef H5
	top: 39px;
	// #endif
	left: 0;
	right: 0;
	z-index: 1000;
}
</style>