<template>
	<view>
		<block v-if="shop.shopName">
			<!-- 搜索框 -->
			<view class="shop-banner" v-if="shop.backgroundUrl" :style="'background-image: url('+ shop.backgroundUrl +');background-size: 100%;'">
				<view class="shop-logo">
					<u-avatar :src="shop.logoUrl" :size="120" mode="square" :show-level="true"></u-avatar>
				</view>
				<view class="shop-info">
					<view class="title">{{shop.shopName}}
					<u-icon name="star-fill" color="#fd8008" v-if="shop.follow" @click="onFollow(shop.shopId)"></u-icon>
					<u-icon name="star" v-else @click="onFollow(shop.shopId)"></u-icon>
					</view>
					<!-- <view class="about">联系电话：{{ shop.phone }}</view> -->
					<view class="address">地址：{{ shop.fullAddress }}</view>
				</view>
			</view>
			<view class="shop-banner" v-else>
				<view class="shop-logo">
					<u-avatar :src="shop.logoUrl" :size="120" mode="square" :show-level="true"></u-avatar>
				</view>
				<view class="shop-info">
					<view class="title">{{shop.shopName}} 关注</view>
					<!-- <view class="about">联系电话：{{ shop.phone }}</view> -->
					<view class="address">地址：{{ shop.fullAddress }}</view>
				</view>
			</view>
			<view class="diy-search">
				<view class="inner">
					<view class="search-input">
						<text class="search-icon iconfont icon-search"></text>
						<input v-model="searchValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入关键词"
							type="text"></input>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			tips: {
				type: String,
				default: '搜索商品'
			},
			shop: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				searchValue: ''
			}
		},

		methods: {
			onClick() {
				this.$emit('event')
			},
			onFollow(shopId){
				this.$emit('onFollow',shopId)
			},
			/**
			 * 搜索提交
			 */
			onSearch() {
				const {
					searchValue
				} = this
				if (searchValue) {
					this.$emit('event', searchValue)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shop-banner {
		background-color: #2C71C7;
		height: 200rpx;
		position: fixed;
		top: var(--window-top);
		left: var(--window-left);
		right: var(--window-right);
		z-index: 9;
		display: flex;
		align-items: center;

		.shop-logo {
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
		}

		.shop-logo image {
			width: 140rpx;
			height: 140rpx;
			background-color: #FFFFFF;
		}

		.shop-info {
			width: 100%;
			margin-left: 20rpx;
			height: 140rpx;
			z-index: 10;
			color: #FFFFFF;

			.title {
				font-size: 38rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
			}
		}
	}
	.diy-search {
		width: 750rpx;
		background: #e2f2fb;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		position: fixed;
		z-index: 10;
		top: 200rpx;
		left: var(--window-left);
		right: var(--window-right);
		.inner {
			width: 360rpx;
			height: 60rpx;
			background: #fff;
			border-radius: 100rpx;
			overflow: hidden;
		
			&.radius {
				border-radius: 10rpx;
			}
		
			&.round {
				border-radius: 60rpx;
			}
		}
		
		.search-input {
			height: 60rpx;
			color: #999;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
		
			.search-icon {
				margin-right: 8rpx;
			}
		}
		
		
		.flow-delivery {
			background-color: #2C71C7;
			padding: 10rpx 26rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
		}
		
		.col-title {
			color: #FFFFFF;
		}
		
		.my-order {
			border: 1px solid #fff;
			border-radius: 20rpx;
			padding: 0rpx 20rpx;
		}
	}
</style>
