<template>
	<view class="home-base-bg">
		<InputAndSwiper></InputAndSwiper>
		<view class="home-content">
			<HomeNavCard></HomeNavCard>
			<HomeNoticeBar :text="notice"/>
			<Statistics :data="statisticsNum"/>
			<view class="show-and-search">
				<view class="show-tab list-tab" :class="{ 'tab-activate': chooseIndex === 0 }" @click="this.chooseIndex=0">
					<text>店铺列表</text>
				</view>
				<view class="search-tab list-tab" :class="{ 'tab-activate': chooseIndex === 1 }" @click="this.chooseIndex=1">
					<text>找店列表</text>
				</view>
			</view>
			<SearchShopList v-if="chooseIndex"/><ShowShopList v-else/>
		</view>
		<TabBar :current-page="0"></TabBar>
	</view>
</template>

<script>
	import HomeNoticeBar from "./HomeNoticeBar.vue"
	import HomeNavCard from "./HomeNavCard.vue"
	import Statistics from "./Statistics.vue"
	export default {
		components: {
			HomeNavCard,
			HomeNoticeBar,
			Statistics
		},
		data() {
			return {
				notice: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶',
				chooseIndex: 0,
				statisticsNum: [231753, 1345]
			}
		},
		onLoad() {

		},
		methods: {

		},
		computed: {
			isActive(currentIndex) {
				// 怎么完善此处的代码
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-base-bg {
		background-color: $uni-bg-color-grey;
		width: 100%;
		.home-content {
			margin: 0 10px;
		}
		.show-and-search{
			display: flex;
			.list-tab {
				z-index: 2;
				width: 259rpx;
				height: 70rpx;
				background: #B7EBD2;
				border-radius: 11px 100px 0px 0px;
				color: #fff;
				font-size: 15px;
				line-height: 21px;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.search-tab {
				z-index: 1;
				transform: translateX(-61rpx);
			}
			.tab-activate {
				background: linear-gradient(#E86262,#CC3333);
				z-index: 3;
			}
		}
	}
	
</style>