<template>
	<view class="index" :style="[theme]">
		<view class="onecontent" v-if="listswiper.length != 0">
			<u-swiper indicator :list="listswiper" indicatorMode='dot' height='144' radius='12'></u-swiper>
		</view>
		<!-- clothingmetals服装金刚区 -->
		<clothingmetals v-if="list.goods_type.length != 0 && model_type == 'Dress'" :list='list.goods_type'>
		</clothingmetals>
		<!-- clothingmetals鲜花服装金刚区 -->
		<flower v-if="list.goods_type.length != 0 && model_type == 'Flower'" :list='list.goods_type'></flower>
		<!-- 每日特价 -->
		<specials v-if="list.special.data.length != 0" :img='list.special.img' :list='list.special.data'
			:title='list.special.title'></specials>
		<!-- 限时抢购 -->
		<flashsale v-if="list.panic.data.length != 0" :title='list.panic.title' :list='list.panic.data'></flashsale>
		<!-- 热榜推荐-->
		<view class="contentclothing" v-if="list.is_re.img != null" style="margin-top: 16rpx;">
			<view class="contentclothingimage" v-if="list.is_re.img != null">
				<image :src="list.is_re.img" mode="aspectFill"></image>
			</view>
			<clothing v-if="list.is_re.data.length != 0" :list='list.is_re.data'></clothing>
		</view>
		<!-- 优秀好员工第一份 -->
		<view v-if="list.people.length != 0" style="margin-top: 16rpx;">
			<view class="contenttext">
				<text class="contenttexttext">{{list.position_nickname || ''}}</text>
			</view>
			<employees :list='list.people' :bgbutton='theme.bgbutton'></employees>
		</view>
		<!-- 优秀好员工第二份 -->
		<view v-if="list.people_two.length != 0">
			<view class="contenttext">
				<text class="contenttexttext">{{list.position_nickname_two || ''}}</text>
			</view>
			<employees :list='list.people_two' :bgbutton='theme.bgbutton'></employees>
		</view>
		<!-- 会员卡 -->
		<vipclass v-if="list.vip.length != 0" :list='list.vip'></vipclass>
		<!-- 热门推荐 -->
		<recommend :title='list.mother_goods_type.title' :list='list.mother_goods_type.data'
			v-if="list.mother_goods_type.data.length != 0"></recommend>
		<!-- 秒杀专区 -->
		<salezone :title='list.goods.title' :list='list.goods.data' v-if="list.goods.data.length != 0"></salezone>
		<!-- 热门项目 -->
		<view v-if="list.service.length != 0" style="margin-top: 16rpx;">
			<view class="contenttext">
				<text class="contenttexttext">热门项目</text>
			</view>
			<popula :list='list.service'></popula>
		</view>

		<bottombbar :valuebbar='0'></bottombbar>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import bottombbar from '@/components/bottombbar.vue'
	import clothingmetals from './components/clothingmetals/index.vue'
	import employees from './components/employees/index.vue'
	import clothing from './components/clothing/index.vue'
	import flower from './components/flower/index.vue'
	import vipclass from './components/vipclass/index.vue'
	import recommend from './components/recommend/index.vue'
	import salezone from './components/salezone/index.vue'
	import popula from './components/popula/index.vue'
	import specials from './components/specials/index.vue'
	import flashsale from './components/flashsale/index.vue'
	export default {
		components: {
			bottombbar,
			clothingmetals,
			employees,
			clothing,
			flower,
			recommend,
			salezone,
			popula,
			vipclass,
			specials,
			flashsale
		},
		data() {
			return {
				model_type: '',
				indicators: false,
				list: {
					vip: [],
					service: [],
					people: [],
					people_two: [],
					goods_type: [],
					mother_goods_type: {
						data: [],
						img: null
					},
					goods: {
						data: [],
						img: null
					},
					special: {
						data: [],
						img: '',
						title: '每日特价'
					},
					panic: {
						data: [],
						title: '限时抢购'
					},
					theme_re: {
						data: [],
						img: null
					},
					is_re: {
						data: [],
						img: null
					},
					new: {
						data: [],
						img: null
					}
				},
				listswiper: []
			}
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		async onLoad(e) {
			// #ifdef H5
			await this.$onLaunched
			// #endif
			try {
				if (e.scene) {
					uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
					this.userloginss() //刷新初始数据
				} else {
					// #ifdef MP-WEIXIN
					if (!uni.cache.get('loginuser').userinfo) {
						this.userloginss() //刷新初始数据
					} else {
						this.indexnewappclassindex()
					}
					// #endif
				}
			} catch (e) {}
			// #ifdef H5
			let res = await this.api.userlogin({
				code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ',
				store_id: 74, // 判断显示哪家的作品
				//【2,美容】【62,美发】【63,健身】【65,口腔】【66,足疗按摩】【89,社区】
				//【72,宠物生活】【74,婚纱摄影】【79,服装】【80,鲜花】【82, 送水】【88, 母婴】
			})
			if (res) {
				if (res.model_type == 'Hotel') {
					uni.reLaunch({
						url: '/pages/index/hotel'
					});
				}
				uni.cache.set('loginuser', res);
				uni.cache.set('store_id', res.store_id) // 判断显示哪家的2
				uni.cache.set('openId', res.userinfo.open_id);
				this.indexnewappclassindex()
			}
			// #endif
		},
		methods: {
			click1(a, e) { //优秀员工跳转
				uni.pro.navigateTo('order/orderInfos', {
					id: a.id,
				})
			},
			async userloginss() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: async (data) => {
						try {
							uni.cache.set('weixincode', data.code);
							let res = await this.api.userlogin({
								code: uni.cache.get('weixincode'),
								store_id: uni.cache.get('store_id') // 判断显示哪家的作品
							})
							if (res) {
								if (res.model_type == 'Hotel') {
									uni.reLaunch({
										url: '/pages/index/hotel'
									});
								}
								uni.cache.set('loginuser', res);
								uni.cache.set('store_id', res.store_id) // 判断显示哪家的作品
								uni.cache.set('openId', res.userinfo.open_id);
								// uni.pro.navigateTo('order/orderInfos')
								this.indexnewappclassindex()
							}
						} catch (e) {
							console.log(e)
						}
					}
				});
				// #endif

			},
			onShow() {
				if ( uni.getStorageSync('loginuser').model_type == 'Hotel') {
					uni.reLaunch({
						url: '/pages/index/hotel'
					});
				}
			},
			async clickmemberinfos(e) { //购买会员卡
				if (e.is_user_sec == 0) {
					uni.pro.navigateTo('my/member/memberinfos', {
						id: e.id,
					})
					// async toworder() { //会员卡
					// let res = await this.api.userreceivebalancecar({
					// 	store_id: uni.cache.get('store_id') // 判断显示哪家的作品
					// })
					// uni.showToast({
					// 	title: '领取成功',
					// 	icon: 'none'
					// });
					// setTimeout(() => {
					// 	uni.pro.navigateTo('my/member/index')
					// }, 1500);
					// },
				} else {
					uni.pro.navigateTo('my/member/memberinfo', {
						id: e.id,
					})
				}

			},
			mallInfoInfo(e) { //查看订单详情
				uni.pro.navigateTo('mall/mallInfo', {
					id: e.id,
				})
			},

			eeInfoseries(e) {
				uni.pro.navigateTo('mall/series', {
					id: e.goods_type_id,
				})
			},
			async indexnewappclassindex() { //首页数据
				let res = await this.api.indexnewappclassindex({
					store_id: uni.cache.get('store_id')
				})
				try {
					if (res) {
						//前端模拟数据
						this.list = res
						if (res.vip) { //会员卡
							this.list.vip = res.vip
						} else {
							this.list.vip = []
						}
						if (res.people_two) { ///优秀员工2
							this.list.people_two = res.people_two
						} else {
							this.list.people_two = []
						}
						if (res.service) { //热门项目
							this.list.service = res.service
						} else {
							this.list.service = []
						}
						if (res.people) { //优秀员工1
							this.list.people = res.people
						} else {
							this.list.people = []
						}
						if (res.store.bananer) { //轮播
							this.listswiper = res.store.bananer
						} else {
							this.listswiper = []
						}
						if (res.mother_goods_type) { //热门推荐  母婴
							this.list.mother_goods_type = res.mother_goods_type
						} else {
							this.$set(this.list, 'mother_goods_type', {
								img: null,
								data: []
							})
						}
						if (res.goods) { //秒杀专区
							this.list.goods = res.goods
						} else {
							this.$set(this.list, 'goods', {
								img: null,
								data: []
							})
						}
						if (res.special) { //每日特价
							this.list.special = res.special
							this.list.special.data = res.special.data.slice(0, 4)
						} else {
							this.$set(this.list, 'special', {
								img: null,
								title: '每日特价',
								data: []
							})
						}
						if (res.panic) { //限时抢购
							this.list.panic = res.panic
							var dates = new Date().getTime();
							let recommendList = this.list.panic.data;
							recommendList.forEach((item, index) => {
								var leftTime = item.end_time - dates; //计算两日期之间相差的毫秒数
								if (leftTime >= 0) {
									let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
									let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
									let m = Math.floor(leftTime / 1000 / 60 % 60);
									let s = Math.floor(leftTime / 1000 % 60);
									item.end_times = {
										d: d,
										h: h,
										m: m,
										s: s
									}
								} else {
									item.end_times = 0
								}
							})
							this.list.panic.data = recommendList
						} else {
							this.$set(this.list, 'panic', {
								title: '限时抢购',
								data: []
							})
						}
						if (res.theme_re) { //服装
							this.list.theme_re = res.theme_re
						} else {
							this.$set(this.list, 'theme_re', {
								img: null,
								data: []
							})
						}
						if (res.discount) { //服装
							this.list.discount = res.discount
						} else {
							this.$set(this.list, 'new', {
								discount: null,
							})
						}
						if (res.new) { //服装
							this.list.new = res.new
						} else {
							this.$set(this.list, 'new', {
								img: null,
								data: []
							})
						}
						if (res.goods_type) { //服装金刚区
							this.list.goods_type = res.goods_type
						} else {
							this.$set(this.list, 'goods_type', [])
						}
						if (res.is_re) { //服装
							this.list.is_re = res.is_re
						} else {
							this.$set(this.list, 'is_re', {
								img: null,
								data: []
							})
						}
						uni.cache.set('store_id', res.store.id) // 返回的id
						if (uni.cache.get('store_id')) { //store_id  行业id
							this.$store.dispatch("actionsclassification");
						}
						uni.setNavigationBarTitle({ //定义标题
							title: res.store.title
						});
						this.model_type = uni.cache.get('loginuser').model_type //类别分类

						// this.list.describe = res.describe.replace(/\<img/g,
						// 	'<img style="max-width:100%;height:auto" ');
					}
				} catch (e) {
					//TODO handle the exception
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	::v-deep .u-scroll-list__indicator {
		margin-top: 0 !important;
	}

	.index {
		.onecontent {
			padding: 0 32rpx;
		}

		.contentclothing {
			padding: 8rpx 32rpx;
			width: 100%;

			.contentclothingimageclassimagebuya {
				width: auto;
				margin: 48rpx 0;

				image {
					width: 100%;
					height: auto;
				}
			}

			.contentclothingimageclass {
				margin-top: 50rpx;

				.contentclothingclassimage {
					width: 224.35rpx;
					height: 40rpx;
				}

				.contentclothingimageclassbox {
					position: relative;
					margin-top: 18rpx;
					width: 100%;
					background: #ABAD98;
					border-radius: 18rpx;
					border: 2rpx solid #404136;
					padding: 28rpx 18rpx;

					.contentclothingimageclassboxitem:nth-child(1) {
						border: none;
					}

					.contentclothingimageclassboxitem {
						position: relative;
						border-left: 1rpx dashed #fff;
						padding: 0 18rpx;

						.contentclothingimageclassboxitemone {
							font-size: 48rpx;
							font-family: Roboto, Roboto;
							font-weight: bold;
							color: #1A1A1A;
						}

						.contentclothingimageclassboxitemtow {
							margin-left: 10rpx;

							text:nth-child(1) {
								font-size: 16rpx;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								color: #1A1A1A;
							}

							text:nth-child(2) {
								font-size: 20rpx;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								color: #1A1A1A;
							}
						}

						.contentclothingimageclassboxitemabsolute {
							position: absolute;
							top: 0;
							right: 18rpx;
							width: 28rpx;
							height: 28rpx;
							text-align: center;
							font-size: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							background: #7e8a83;
							border-radius: 50%;
						}
					}
				}

				.contentclothingimageclassbox::after {
					z-index: 10;
					position: absolute;
					content: '';
					display: inline-block;
					left: -11px;
					bottom: 50%;
					transform: translateY(50%);
					width: 22px;
					height: 22px;
					border-radius: 0 11px 11px 0;
					background: #fff;
				}

				.contentclothingimageclassbox::before {
					z-index: 10;
					position: absolute;
					content: '';
					display: inline-block;
					right: -11px;
					bottom: 50%;
					transform: translateY(50%);
					width: 22px;
					height: 22px;
					border-radius: 11px 0 0 11px;
					background: #fff;
				}
			}

			.contentclothingimage {
				width: 130rpx;
				height: 52rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.contentclothingbox {
				.fourcontents {
					.scrollfourcontents {
						padding: 22rpx 0;

						.scrollfourcontenttitems {
							width: 246rpx;
							height: 296rpx;
							margin-left: 30rpx;
							position: relative;

							.scrolltowcontentitem_images {
								width: 100%;
								height: 100%;
								border-radius: 18rpx;
							}

							.scrolltowcontentitem_ones {
								position: absolute;
								padding: 8rpx 10rpx;
								bottom: 12rpx;
								left: 14rpx;
								background: rgba(0, 0, 0, 0.32);
								border-radius: 20rpx;
								font-size: 18rpx;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			.contentclothingboxoone {
				.fourcontentsoneitem {
					width: 100%;
					margin-top: 24rpx;

					.fourcontentsoneitemimage {
						width: 278rpx;
						border-radius: 18rpx;
						height: 194rpx;
					}

					.fourcontentsoneitemtext {
						flex: 1;
						height: 194rpx;
						margin-left: 10rpx;

						.fourcontentsoneitemtextone {
							font-size: 28rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}

						.fourcontentsoneitemtexttow {
							margin-top: 20rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							color: #1A1A1A;
						}
					}
				}

				.fourcontentsoneitemtow {
					width: 100%;

					.fourcontentsoneitemtowitem {
						margin-top: 32rpx;
						width: 330rpx;

						.fourcontentsoneitemtowitemimage {
							border-radius: 18rpx;
							width: 330rpx;
							height: 356rpx;
						}

						.fourcontentsoneitemtowitemone {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 16rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}

						.fourcontentsoneitemtowitemtow {
							margin-top: 10rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							color: #1A1A1A;
						}
					}
				}
			}
		}

		.contenttext {
			padding: 0 32rpx;

			.contenttexttext {
				width: auto;
				position: relative;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			.contenttexttext::before {
				content: '';
				position: absolute;
				bottom: -5rpx;
				right: -6rpx;
				z-index: 0;
				display: inline-block;
				width: 118rpx;
				height: 10rpx;
				background: var(--bgbuttonbackground);
				border-radius: 8rpx;
				opacity: 0.6;
			}
		}

	}
</style>