<template>
	<view>
		<u-navbar :safeAreaInsetTop="safeAreaInsetTop" :placeholder="placeholder" :fixed="fixed">
			<view class="flex" slot="left" @click="goToAdsChange">
				<u-icon name="map-fill" size="20"></u-icon>
				<view class="flex align-center">
					<view class="margin-xs text-lg overflow-one-lines" style="width:18vw;">{{adsName || '默认'}}</view>
					<!-- <u-icon name="arrow-down" size="5"></u-icon> -->
				</view>
			</view>
			<view class="" slot="center">
				<view class="text-xl" v-show="mode === 'home'">
					首页
				</view>
			</view>
			<view class="" slot="right" v-show="mode === 'store'">
				<u-search v-model="keyword" bgColor="#fff" borderColor="#EC1E19" :clearabled="true" @clear="onSearch"
					placeholder="请输入门店关键词搜索" :actionStyle="actionStyle" @custom="onSearch"></u-search>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "customNavBar",
		props: {
			fixed: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: Boolean,
				default: false
			},
			safeAreaInsetTop: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: "home"
			}
		},
		data() {
			return {
				actionStyle: {
					'color': '#fff',
					'background': '#EC1E19',
					'borderRadius': "15px",
					'width': '60px',
					'height': '25px',
					'line-height': '25px',
				},
				// adsName: this.$store.state.user.adsName,
				keyword: "",
			};
		},
		computed: {
			...mapGetters({
				adsName: 'adsName'
			})
		},
		mounted() {
			// console.log(333333333,this.$store.state);
			// let adsName = uni.getStorageSync('adsName');
			// if(adsName){
			// 	this.adsName = adsName;
			// }
		},
		methods: {
			goToAdsChange() {
				uni.navigateTo({
					url: "/pages/home/addressChange"
				})
			},
			onSearch(e) {
				// console.log("搜索",e);
				this.$emit('search', e)
			}
		}
	}
</script>

<style lang="scss">
	.css {
		width: 50px;
		height: 50px;
		line-height: 25px;
		margin-right: -50px;
	}

	/deep/.u-search__content {
		width: 70vw;
		padding-right: 70px;
	}

	/deep/.u-search__action {
		position: absolute;
		right: 20px;
	}
</style>