<template name="index">
	<view>
		<!-- 顶部操作条 -->
		<!-- <cu-custom class="text-left">
			<block slot="left-content">
				<image :src="item.url" v-if="item.type=='image'"></image>
				<text class="padding-left text-xl" style="float: left;">叮咚到家家政服务</text>
			</block>
		</cu-custom> -->
		<!-- 轮播图-->
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="item.id">
				<image mode="aspectFill" :src="item.url" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<!-- 搜索栏 -->
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @confirm="searchGoods" v-model="searchInfo.inputGoodsName" :adjust-position="true" type="text"
					placeholder="输入搜索内容" confirm-type="search"></input>
			</view>
			<!-- 区域筛选picker -->
			<view class="action">
				<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
					:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
					<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
					<text class="cuIcon-location"></text>
				</picker>
			</view>
		</view>
		<view class="margin-bottom-with-bar">
			<view class="margin-lr-sm">
				<!-- 大类 -->
				<view class="flex justify-between text-black">
					<view class="padding text-lg" @click="showProductCategories">
						<text>分类</text>
						<text class="cuIcon-apps text-main-color"></text>
						<text class="cuIcon-triangledownfill"></text>
					</view>
					<view class="flex-twice">
						<scroll-view scroll-x class="nav text-right" :scroll-with-animation="true" :scroll-left="scrollLeft">
							<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-if="index < 2"
								v-for="(item,index) in categories" :key="item.goodsCategoryId" @tap="tabSelect($event, item)" :data-index="index">
								{{item.goodsCategoryName}}
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 热门细类 -->
				<view class="cu-list grid no-border hot-sub-category" :class="['col-5']">
					<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5"
						@click="chooseCategory(item)">
						<view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
							<!-- <view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge}}</block>
							</view> -->
						</view>
						<text>{{item.goodsCategoryName}}</text>
					</view>
				</view>
				<!-- 细类 -->
				<view class="cu-list grid no-border" :class="['col-5']" v-if="subCategories.length > 5">
					<view class="cu-item" v-for="(item,index) in subCategories" :key="index"
						v-if="index < subCategories.length && index > 4" @click="chooseCategory(item)">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
							<!-- <view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge}}</block>
							</view> -->
						</view>
						<text>{{item.goodsCategoryName}}</text>
					</view>
				</view>
				<!-- 超值服务 -->
				<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
					:title="discountGoods.title"></vertical-goods-card> -->
				<!-- 热门服务 -->
				<vertical-card :list="hotCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
			</view>
			<!-- 当前城市服务列表 -->
			<view>
				<view class="margin-top-sm margin-lr-sm waterfall-grid">
					<view @click="showDetails(item)" v-for="(item, index) in productList" class="waterfall-grid-item">
						<flow-goods-card :product="item"></flow-goods-card>
					</view>
				</view>
				<load-status-bar ref="loadStatusBar" @loadMore="loadProductPage"></load-status-bar>
			</view>
		</view>
	</view>
</template>

<script>
	import verticalCard from '@/components/common-card/vertical-card.vue';
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
	import flowGoodsCard from '@/components/goods-card/flow-goods-card.vue';

	export default {
		name: 'index',
		components: {
			verticalCard,
			loadStatusBar,
			flowGoodsCard
		},
		data() {
			return {
				scrollLeft: 0,
				dotStyle: true,
				swiperList: [],
				tabCur: 0,
				categories: [],
				subCategories: [],
				hotCategory: [],
				discountGoods: {},
				InputBottom: 0,
				searchInfo: {},
				areaList: [],
				areaMultiIndex: [0, 0, 0],
				productList: [],
				pageNum: 0,
				pageSize: 0
			}
		},
		mounted() {
			this.bindEvent();
		},
		beforeDestroy() {
			this.offBindEvent();
		},
		async onReady() {
			await this.$request.authAndGetLocation();
			await this.loadData();
		},
		methods: {
			async loadData() {
				this.initBasicData();
				// 加载区域信息
				this.loadRegionList();
				await this.getCurAreaArr();
				// 加载热门类目
				let hotCategoryRes = await this.$request.getHotCategory({
					type: 1
				});
				this.hotCategory = hotCategoryRes.data;
				// 加载品类
				this.loadCategoryList();
				// 加载当前定位城市的服务列表
				this.loadProductPage();

				this.swiperList = await this.$api.data('swiperList');
				// this.categories = await this.$api.data('categories');
				// this.subCategories = await this.$api.data('subCategories');
				this.moduleBarInfos = await this.$api.data('moduleBarInfos');
				// this.hotGoods = await this.$api.data('hotGoods');
				// this.discountGoods = await this.$api.data('discountGoods');
			},
			bindEvent() {
				uni.$on('clickCard', this.clickHotCategory);
			},
			offBindEvent() {
				uni.$off('clickCard');
			},
			async getCurAreaArr() {
				let areaArr = await this.$request.getCurArea();
				if (areaArr) {
					this.searchInfo.area = areaArr;
				} else {
					// 默认选中第一个
					this.searchInfo.area = [regionList[0], subRegionList[0], subSubRegionList[0]];
				}
			},
			async loadCategoryList() {
				let res = await this.$request.getProductCategories();
				this.categories = res[1].data.data;
				this.tabSelect(null, this.categories[0]);
			},
			async loadRegionList() {
				let regionList = await this.$request.areaListByStep();
				regionList = regionList.data;
				let subRegionList = [];
				let subSubRegionList = [];
				if (regionList && regionList.length > 0) {
					subRegionList = await this.$request.areaListByStep({
						parentCode: regionList[0].areaCode
					});
					subRegionList = subRegionList.data;
				}
				if (subRegionList && subRegionList.length > 0) {
					subSubRegionList = await this.$request.areaListByStep({
						parentCode: subRegionList[0].areaCode
					});
					subSubRegionList = subSubRegionList.data;
				}
				this.areaList.push(regionList);
				this.areaList.push(subRegionList);
				this.areaList.push(subSubRegionList);
			},
			regionChange(e) {
				this.areaMultiIndex = e.detail.value;
				let chosenArea = [];
				for (let i = 0; i < this.areaList.length; i++) {
					chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
				}
				this.searchInfo.area = chosenArea;
				this.reloadProductPage();
			},
			async regionColChange(e) {
				let colObj = e.detail;
				if (colObj.column == 0) {
					// 通过一级查二级
					let subAreaList = await this.$request.areaListByStep({
						parentCode: this.areaList[0][colObj.value].areaCode
					});
					subAreaList = subAreaList.data;
					let subSubAreaList = [];
					if (subAreaList.length) {
						subSubAreaList = await this.$request.areaListByStep({
							parentCode: subAreaList[0].areaCode
						});
						subSubAreaList = subSubAreaList.data;
					}
					this.areaList.pop();
					this.areaList.pop();
					this.areaList.push(subAreaList);
					this.areaList.push(subSubAreaList);
					this.areaMultiIndex = [colObj.value, 0, 0];
				} else if (colObj.column == 1) {
					// 通过二级查三级
					let subAreaList = await this.$request.areaListByStep({
						parentCode: this.areaList[1][colObj.value].areaCode
					});
					subAreaList = subAreaList.data;
					this.areaList.pop();
					this.areaList.push(subAreaList);
					this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
				}
			},
			async tabSelect(e, item) {
				this.tabCur = e == null ? 0 : e.currentTarget.dataset.index;
				this.scrollLeft = (this.tabCur - 1) * 60;
				
				let subSubTypeList = [];
				for (let i = 0; i < item.child.length; i++) {
					let stopFlag = false;
					let secondList = item.child[i].child;
					if (secondList && secondList.length) {
						for (let k = 0; k < secondList.length; k++) {
							let thirdList = secondList[k].child;
							if (thirdList && thirdList.length) {
								for (let j = 0; j < thirdList.length; j++) {
									subSubTypeList = subSubTypeList.concat(thirdList[j]);
									if (subSubTypeList.length >= 15) {
										subSubTypeList = subSubTypeList.slice(0, 15);
										stopFlag = true;
										break;
									}
								}
							}
							if (stopFlag) break;
						}
					}
					if (stopFlag) break;
				}
				
				let subCategoryOpt = await this.$api.data('subCategories');
				for(let i = 0; i < subSubTypeList.length; i++) {
					subSubTypeList[i]['cuIcon'] = subCategoryOpt[i].cuIcon;
					subSubTypeList[i]['color'] = subCategoryOpt[i].color;
				}
				this.subCategories = subSubTypeList;
			},
			chooseCategory(item) {
				this.searchInfo.category = item;
				this.searchGoods();
			},
			searchGoods() {
				let params = {
					category: this.searchInfo.category,
					area: this.searchInfo.area,
					inputGoodsName: this.searchInfo.inputGoodsName
				};
				uni.navigateTo({
					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			clickHotCategory(item) {
				console.log(item)
				let params = {
					category: item
				};
				uni.navigateTo({
					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			showProductCategories() {
				uni.navigateTo({
					url: '/pages/product/product-category'
				})
			},
			/* 底部当前城市服务列表 start */
			initBasicData() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
				this.productList = [];
			},
			showDetails(productItem) {
				let params = {
					goodsId: productItem.goodsId
				}
				uni.navigateTo({
					url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
				});
			},
			async reloadProductPage() {
				this.initBasicData();
				this.loadProductPage();
			},
			async loadProductPage(params = {}) {
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				params.status = 0;
				params.areaId = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[this.searchInfo.area.length - 1].areaId : null;
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = await this.$request.qryProductPage(params);
					let rowsLength = res[1].data.rows.length;
					if (rowsLength > 0) {
						this.productList = this.productList.concat(res[1].data.rows);
						this.pageNum++;
						if (rowsLength === this.pageSize) {
							this.$refs.loadStatusBar.showLoadMore();
							return;
						}
					}
					this.$refs.loadStatusBar.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar.showLoadErr();
				}
			}
			/* 底部当前城市服务列表 end */
		}
	}
</script>

<style scoped>
	.screen-swiper {
		height: 500rpx;
	}
	
	.cu-list+.cu-list {
		margin-top: 0;
	}

	.cu-list.grid.no-border {
		padding: 0 10rpx;
	}

	.hot-sub-category .cu-item .hot-sub-category-icon {
		font-size: 80rpx;
	}

	.modal-bottom-oper {
		height: 70rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	.waterfall-grid {
		column-count: 2;
		column-gap: 15rpx;
	}
	
	.waterfall-grid-item {
		break-inside: avoid;
		margin-bottom: 15rpx;
	}
</style>
