<template>
	<view :class="Fixed ? 'Fixed' : ''">
		<view :style="{ height: statusBarHeight }" v-if="top"></view>
		<view style="height: 44px" v-if="top"></view>
		<view class="search">
			<!-- 			<view class="search_left" :class="Fixed ? 'opacityLeft' : ''">
				<image class="search_left_img" src="/static/icon/xai.png" mode="widthFix"></image>
				<view>郑州市</view>
			</view> -->
			<view class="search_right p30">
				<up-input placeholder="查找地点、电站" confirmType="search" suffixIcon="/static/icon/search.png" border="none" v-model="value" @change="change" @confirm="confirm"></up-input>
			</view>
		</view>
	</view>
</template>

<script setup>

import { ref } from 'vue';
let value = ref('');
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
const emits = defineEmits(['change', 'search']);

const data = defineProps({
	Fixed: {
		type: Boolean,
		default: false
	},
	top: {
		type: Boolean,
		default: true
	}
});

let change = (e) => {
	emits('change', e);
};

let confirm = (e) => {
	emits('search', e);
};
</script>

<style lang="scss">
.Fixed {
	position: fixed;
	left: 0;
	width: 100%;
	padding: 0 30rpx;
	z-index: 99;
}

.search {
	@include flex($space: space-between);

	&_left {
		@include flex;
		font-weight: bold;
		font-size: 40rpx;
		color: #232323;
		height: 86rpx;
		&_img {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;
		}
	}

	.opacityLeft {
		background: rgba(255, 255, 255, 0.27);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 10rpx;
	}

	&_right {
		flex: 1;
		@include flex;
		// max-width: 500rpx;
		height: 86rpx;
		background: #ffffff;
		box-shadow: inset 0rpx 0rpx 22rpx 2rpx #f9fbff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}
</style>
