<template>
	<view class="main-box">
		<view class="search-box">
			<u-search @custom="search" placeholder="可搜索达人名称/标签" bg-color="#fff" input-align="left" :action-style="actionStyle" v-model="keyword"></u-search>
		</view>
		
		<view class="notice-box">
			<notice-bar></notice-bar>
		</view>
		
		<view class="blind-box">
			<view class="blind-card">
				<view class="icon">
					<image style="width: 88rpx;height: 88rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1d291d514fe8833f941924f273a5deb8f2cc8c06680fd49b6c08c58b16338c93.png"></image>
				</view>
				<view class="avatar-box">
					<image style="width: 320rpx;height: 64rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/41888275859ee7d4663bfcbd322a55ac3da9bbfc3621ca8a1137f39b2fde47bd.png"></image>
					<view @click="blindOrder" class="btn">随机下单</view>
				</view>
			</view>
		</view>
		
		<view>
			<rank-box :femaleWeekTopList="femaleWeekTopList" :maleWeekTopList="maleWeekTopList"></rank-box>
		</view>
		
		<view class="card-box">
			<user-card :newList="newList" :hotList="hotList"></user-card>
		</view>
		
		<view class="category-box">
			<category-card @tabClick="getCategory" :dataList="categoryList"></category-card>
		</view> 
		
		<view>
			<sticky-box @tabClick="tabClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></sticky-box>
		</view>
	</view>
</template>

<script>
	import NoticeBar from '@/pages/tabbar/components/home/noticeBar.vue';
	import StickyBox from '@/pages/tabbar/components/home/stickyBox.vue';
	import RankBox from '@/pages/tabbar/components/home/rankBox.vue';
	import UserCard from '@/pages/tabbar/components/home/userCard.vue';
	import CategoryCard from '@/pages/tabbar/components/home/categoryCard.vue';
	import ClerkApi from '@/sheep/api/worker/clerk';
	import RewardApi from '@/sheep/api/worker/reward';
	import sheep from '@/sheep';
	export default {
		components: {
			NoticeBar, 
			RankBox,
			StickyBox,
			UserCard,
			CategoryCard,
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0,
			},
			stickyTop: {
				type: Number,
				default: uni.upx2px(80),
			},
		},
		data() {
			return {
				actionStyle: {
					backgroundColor: 'var(--ui-BG-Main)',
					borderRadius: '40px',
					padding: '7px',
					color: '#fff',
					fontSize: '28rpx',
					width: '80px',
				},
				keyword: '',
				categoryList: [],
				newList: [],
				hotList: [],
				maleWeekTopList: [],
				femaleWeekTopList: [],
			}
		},
		created() {
			this.getInitData();
		},
		methods: {
			tabClick(e) {
				this.$emit('tabClick', e);
			},
			getCategory(e) {
				ClerkApi.getCategoryListByParentId(e.id).then(res => {
					this.$emit('categoryClick', e);
					if(res.data.length > 0){
						sheep.$store('sys').setCategoryList(res.data);
					}else{
						sheep.$store('sys').setCategoryList(this.categoryList);
					}
				});
			},
			getInitData() {
				ClerkApi.getHomeData().then(res => {
					this.categoryList = res.data.categoryList;
					this.newList = res.data.clerkNewList;
					this.hotList = res.data.clerkHotList;
					sheep.$store('sys').setCategoryList(this.categoryList);
				});
				
				ClerkApi.getWeekTopList().then(res => {
					this.maleWeekTopList = res.data.maleWeekTopList;
					this.femaleWeekTopList = res.data.femaleWeekTopList;
				});
				
			},
			search() {
				this.$emit('search', this.keyword);
			},
			blindOrder() {
				sheep.$router.go('/pages/worker/blind/index');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-box {
		
		.search-box {
			background-color: #fff;
			border-radius: 40px;
			padding: 3px;
			margin: 15px;
		}
		
		.notice-box {
			margin: 15px;
		}
		
	}
	
	.card-box {
		padding: 0 15px;
	}
	
	.category-box {
		padding: 15px;
		padding-bottom: 0;
	}
	
	.blind-box {
		padding: 0 15px;
	}
	
	.blind-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
		
		.icon {
			margin-right: 10px;
		}
		
		.avatar-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			
			.btn {
				color: #fff;
				font-size: 24rpx;
				border-radius: 40px;
				padding: 5px 10px;
				background-color: var(--ui-BG-Main);
			}
		}
	}
	
</style>