<template>
	<view class="flex_searchbar" :style="{'background':wrapper_props.bg_color}">
		<i class="logo" :style="{'background-image': 'url('+wrapper_props.logo_url+')'}"></i>
		<view class="search_view flex">
			<i class="search_icon" @click="search"></i>
			<input type="text" class="search_input" v-model="keyword" :placeholder="wrapper_props.placeholder">
		</view>
		<text class="login_btn" @click="jumpPhpPage('app=member&act=login')" v-if="!isLogin">登录</text>
		<uni-icons v-else  type="person" size="30" @click="jumpPhpPage('app=member')"></uni-icons>
	</view>
</template>

<script>
	import { php } from '../../../common/host.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		props: {
			wrapper_props: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				isLogin: 0,
				keyword: ''
			}
		},
		methods: {
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href =  link;
			}
		},
		components: {
			uniIcons
		}
	}
</script>

<style lang="less" scoped>
	.flex_searchbar {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		.flex {
			display: flex;
		}
		.logo {
			width: 192rpx;
			height: 60rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.search_view {
			width: 380rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 30rpx;
		}
		.search_icon {
			display: inline-block;
			width: 56rpx;
			height: 56rpx;
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAAAAAA5AE8dAAACh0lEQVRYw83ZMW/aQBTAcb7K3xaGDcQUIUWtEFKmMKRbVT5AEBOV+gFgZmEh6tatH4HIK8qUISGIFgllyFQhaqlyLjRpIR1I0jTCl9p5r81t9sk/2Xe+u3fvUtdryvLH3DylpNaQV08j16DLqwtjhNHF3BhhdHFpjDT688JIoxKt+RBdfjdGGl3OjTi6EDRvUVHzBl2KmitU2DQp2X7/jV4ZeVRqHN1HF+KmSV1fGnl0YRTQuQZq/hc6nYyGJ8PRZCqGBvudWimX9bK5Uq2zH0igYbecd7ktbr7cDZ+KBv2Kw5/FqfQfe9svVvS05d1Z7p3utU7t6AcbelZNr5hi0x8MBn6zuLpMV8+s6HsLelYCoFAf390a1wsAlKzqx2j0tArgNfz7PRP6DQ+gamuBb5Fo0EoDmfbswf1ZOwOkW0GS3u97QGZvTc1eBvD6CdCwAnjttXVtD6iE8dGuAzRma+tmDcDpxkaDMlDwIx7yC0A5iIv28kA96gvDOpDvxUU7LjCOfGoMuJ2Y6HQXKFr6twjUpvHQSQloWtAmUJrEQ0c5wLegPpAbxUOHWXAGFnTgQHYYDz3xwLWiLngnz+BNVdpUpfenNYX/VGVE/dXY338Ws5TKfKoz86usUY+sprxLtJra1312hskCNEuEAs6LSbKoLyqWWpXNo/NEoWRE1Pd2C4DtQ8n49OvBxuoDjkUj6eNVQ2wchElj/l5n9ybm3+30bv6kw20Atg4kdyfnR5sAvJTdR01eOIAjvDkbvnLgjTB6/mnHef35H24jVTa8KltzlSSCTrpDJTGjk0LSSXappOV0Eog6qU6dpKxO+lgn0a2Tktc5PFA65tA5kFE6OtI55JI4jvsF01XE0L1M7eEAAAAASUVORK5CYII=) no-repeat;
			background-size: 100% 100%;
		}
		.search_input {
			height: 60rpx;
		}
		.login_btn {
			width: 92rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFCD00;
			border-radius: 16rpx;
			color: #212121;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>