<template name="index">
	<view>
		<!-- 轮播图-->
		<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 :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-lr-sm margin-bottom-with-bar">
			<!-- 大类 -->
			<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-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-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
			</vertical-goods-card>
		</view>
		<!-- 强制要求用户授权登录的弹窗 -->
		<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl text-left">
					<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
					<view>1.微信昵称</view>
					<view>2.微信头像</view>
				</view>
				<view class="cu-bar bg-white">
					<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
					</navigator>
					<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
				</view>
			</view>
		</view>
		<!-- 手机号授予 -->
		<view class="cu-modal" :class="isAuthWxPhoneModal?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					<view>授予小程序绑定微信手机号码的权限</view>
				</view>
				<view class="cu-bar bg-white">
					<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit" target="miniProgram">拒绝授权
					</navigator>
					<view class="margin-0 flex-sub">
						<button class="margin-0 flex-sub cu-btn bg-white text-main-color"
							open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';

	export default {
		name: 'index',
		components: {
			verticalGoodsCard
		},
		data() {
			return {
				scrollLeft: 0,
				dotStyle: true,
				swiperList: [],
				tabCur: 0,
				categories: [],
				subCategories: [],
				hotGoods: [],
				discountGoods: {},
				InputBottom: 0,
				isAuthWxLoginModal: false,
				isAuthWxPhoneModal: false,
				searchInfo: {},
				areaList: [],
				areaMultiIndex: [0, 0, 0],
			}
		},
		mounted() {
			this.bindEvent();
		},
		beforeDestroy() {
			this.offBindEvent();
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				// 更新缓存中的userInfo
				let res = await this.$request.storageExistUser();
				// 获取缓存中的userInfo
				let curUserInfo = this.$request.getCurUserInfo();
				this.isAuthWxLoginModal = curUserInfo && curUserInfo.openId ? false : true;
				if (this.isAuthWxLoginModal) {
					return;
				}
				this.isAuthWxPhoneModal = !curUserInfo.phone ? true : false;
				if (this.isAuthWxPhoneModal) {
					return;
				}
				uni.hideLoading();

				// 加载区域信息
				this.loadRegionList();
				// 加载热门商品
				let hotGoodsRes = await this.$request.getHotGoods({
					pageNum: 0,
					pageSize: 50
				});
				this.hotGoods = hotGoodsRes.rows;
				// 加载品类
				this.loadCategoryList();

				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('index_showProductDetail', this.showDetails);
			},
			offBindEvent() {
				uni.$off('index_showProductDetail');
			},
			async loadCategoryList() {
				let typeList = await this.$request.listByStep();
				typeList = typeList.data;
				let subTypeList = await this.$request.listByStep({
					goodsCategoryId: typeList[0].goodsCategoryId
				});
				subTypeList = subTypeList.data;
				this.categories = subTypeList;
				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);
				// 默认选中第一个，因此将第一个区域默认加入查询条件中
				this.searchInfo.area = [regionList[0], subRegionList[0], subSubRegionList[0]];
			},
			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;
			},
			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 = await this.$request.listByStep({
					goodsCategoryId: item.goodsCategoryId
				});
				subSubTypeList = subSubTypeList.data;
				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))
				})
			},
			showDetails(productItem) {
				let params = {
					goodsId: productItem.goodsId
				}
				uni.navigateTo({
					url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
				});
			},
			showProductCategories() {
				uni.navigateTo({
					url: '/pages/product/product-category'
				})
			},
			authWxLogin() {
				this.$request.login().then(res => {
					if (res) {
						this.loadData();
					}
				})
			},
			getPhoneNumber(e) {
				this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
					if (res) {
						this.loadData();
					}
				})
			}
		}
	}
</script>

<style scoped>
	.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;
	}
</style>
