<template>
  <view class="msg_l_wrapper" :class="{ active: visible }">
	<view class="zd-row header">
		<span class="page_name">{{$t('button.search')}}</span>
		<uni-icons type="closeempty" size="20" @tap="handleClose"></uni-icons>
	</view>
	<view class="search-container">
		<view class="mgb40" v-for="e in conditions" :key="e.label">
			<view class="fil_name">{{e.label}}<span v-show="e.required" style="color: #D7592F;font-weight: 700;">*</span></view>
			<view v-if="e.key === 'scan'">
				<search-box v-model="e.value"
				/>
			</view>
		</view>
		<slot></slot>
	</view>
	<view class="zd-row submitbar">
		<view class="zd-col-4">
			<button class="btn-submit btn-cancle" @tap="handleClear">{{$t('button.clear')}}</button>
		</view>
		<view class="zd-col-4">
			<button class="btn-submit btn-success" @tap="handleSearch">{{$t('button.search')}}</button>
		</view>
	</view>
  </view>
</template>

<script>
import SearchBox from '@/components/SearchBox.vue'
export default {
	components: {
		SearchBox
	},
	props: {
		conditions: {
		  type: Array,
		  default: () => [],
		},
	},
	data() {
		return {
			visible: false
		};
	},
	methods: {
		init () {
			this.visible = true
		},
		handleClose () {
			uni.setNavigationBarColor({
			  frontColor: '#000000', // 导航栏文字颜色，只能是 '#ffffff' 或 '#000000'
			  backgroundColor: '#d7592f', // 导航栏背景颜色
			  animation: {
			    duration: 300, // 动画持续时间（毫秒）
			    timingFunc: 'ease-in-out' // 动画效果
			  }
			});
			this.visible = false
		},
		handleClear () {
			this.$emit('clear')
		},
		handleSearch () {
			this.$emit('search')
			this.handleClose()
		},
		filterResults(key) {
		  // 根据条件过滤结果
		  const query = this.conditions.find((c) => c.key === key).value;
		  this.searchResults = this.filterData(query, key);
		},
		filterData(query, key) {
		  // 模拟数据过滤逻辑
		  const allItems = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']; // 示例数据
		  return allItems.filter((item) => item.includes(query));
		},
		search() {
		  this.$emit('search', this.conditions);
		  this.$emit('update:visible', false); // 隐藏弹窗
		},
		selectItem(item) {
		  this.$emit('select', item);
		  this.searchQuery = item;
		  this.searchResults = [];
		}
	}
};
</script>

<style lang="stylus" scoped>
@import '@/common/style/mixin.styl';
.msg_l_wrapper
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	padding: 14rpx;
	z-index: 301;
	transition: all .3s;
	height: calc(100% - var(--status-bar-height));
	background-color: #ffffff;
	overflow: auto;
	transition: right 0.3s ease;
.msg_l_wrapper.active {
  right: 0;
}
.header
	position absolute
	top 0
	left 0
	z-index: 301;
	_wh(100%, calc(var(--status-bar-height) + 88rpx))
	padding var(--status-bar-height) 20rpx 0 20rpx
	background-color #fff
	border-bottom 1px solid #f6f6f6
.page_name
	_font(32rpx, 32rpx, #000,700,center)
.fil_name
	line-height: 80rpx;
	font-size: 28rpx;
	color: #323232;
.submitbar
	position absolute
	z-index: 301;
	background-color: #fff;
	padding: 20rpx 28rpx;
	box-shadow: none;
	border-top 1px solid #f6f6f6
.search-container
	width 100%
	padding calc(var(--status-bar-height) + 108rpx) 28rpx 120rpx 28rpx;
</style>