<template>
	<view style="position: relative;">
		<!-- 新增分类科目 -->
		<view class="drop-down">
			<view class="classification">
				<view class="classification-box" :style="{
				  color: classification==i  ? mainColor : '',
				  'border-color': classification == i ? 'mainColor' : '#F0F0F0',
				}" v-for="(item, i) in Theclass" :key="i" @click="subjects(item,i)">
					<view class="classification-text">{{item.name}}</view>
					<u-icon name="arrow-down" size="26"></u-icon>
				</view>
			</view>
			<!-- 内容 -->
			<!-- <u-popup  mode="top" length="auto"  v-model="mask"> -->
			<scroll-view scroll-y="true" style="max-height: 300rpx;" v-show="mask">
				<view class="drop-down-content">
					<!-- 年级不限 -->
					<view v-show="classification==0" class="content-box" @click="content()" :style="{
				  color: index  ? mainColor : '',
				  'border-color': index == i ? 'mainColor' : '#F0F0F0',
				}">
						<view class="content-tetx">不限</view>
					</view>

					<!-- 类型不限 -->
					<view v-show="classification==1" class="content-box" @click="content33()" :style="{
					  color: indexx  ? mainColor : '',
					  'border-color': indexx == i ? 'mainColor' : '#F0F0F0',
					}">
						<view class="content-tetx">不限</view>
					</view>
					<!-- 年级内容 -->
					<view class="content-box" v-show="classification==0" :style="{
					  color: index22 == i ? mainColor : '',
					  'border-color': index22 == i ? 'mainColor' : '#F0F0F0',
					}" v-for="(item, i) in d" :key='i' @click="content2(item,i)">

						<view class="content-tetx">{{item.Name}}</view>
					</view>
					<!-- 类型内容 -->
					<view class="content-box" v-show="classification==1" :style="{
        color: index2 == i ? mainColor : '',
        'border-color': index2 == i ? 'mainColor' : '#F0F0F0',
      }" v-for="(item, i) in subjectslist" @click="content3(item,i)">

						<view class="content-tetx">{{item.CateName}}</view>
					</view>
				</view>
			</scroll-view>
			<!-- 	</u-popup> -->
			<!-- 内容 -->
		</view>
		<!-- 新增分类科目结束 -->
		<view class="catstyle4" style="height: 100%;">
			<!-- <div class="left-slider">
				<sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d"
					@change="changeHandler" @change2="changeHandler2"></sidebar>
			</div> -->
			<div class="right-slider">
				<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
					:style="{ height: '100%' }">
					<div class="adbox" v-if="d[tid].advert_pic" @click="clickHandler(d[tid].advert_url)">
						<image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
					</div>
					<div class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
						<!-- 	新加div -->
						<view class="cent-box">
							<div class="good-img" style="position: relative;">
								<image mode="aspectFill" :src="cx.cover_pic" style="width: 100%; height: 100%;border-radius: 10rpx;">
									<image
										src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/plugins-out.png"
										v-if="cx.totalStock==0"
										style="width: 100%; height: 100%;position: absolute;left:0;top:0;background: #000;opacity: 0.6;" />
								</image>
							</div>
							<div class="good-info">
								<div class="good-name" :class="[cx.edudata.ClassCondition.length>0?'good-namee2':'']">
									<view
										v-if="cx.marketingLogo.iswords && cx.marketingLogo.iswords==1&& cx.marketingLogo.words!=''"
										class="Logo" :style="{color: cx.marketingLogo.wordsColor,
								background:cx.marketingLogo.wordsBack ,}">{{cx.marketingLogo.words}}</view>
									<image
										v-if="cx.marketingLogo.iswords&&cx.marketingLogo.iswords==2&& cx.marketingLogo.ico!=''"
										mode="heightFix" :src="cx.marketingLogo.ico"
										style=" height: 12px;margin-right: 5px" />
									<view
										style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;height: 32rpx;font-size: 20rpx;margin-right: 5rpx;"
										v-if="cx.freeShippingFullMoneyPinkage>0 || cx.freeShippingFullNumPinkage>0">
										{{cx.freeShippingFullMoneyPinkage>0 && cx.freeShippingFullNumPinkage==0?cx.freeShippingFullMoneyPinkage+'元包邮':''}}
										{{cx.freeShippingFullMoneyPinkage==0 && cx.freeShippingFullNumPinkage>0?cx.freeShippingFullNumPinkage+'件包邮':''}}
									</view>
									<view class="The-title">
										{{ cx.name }}
									</view>
									
									<view v-if="cx.edudata.ClassCondition.length>0" class="limit"  @touchstart="mouseover()" @touchend="mouseLeave()">
										<u-icon name="lock" size="44" :color="mainColor" />
										<view class="limit-box" v-show="limitShow">
											此课程有报名限制，请点击详情查看
										</view>
									</view>
								</div>
								<div class="goodprice">
									<div class="left">
										<!-- 新增上课日期固定日期 -->
										<view v-if="cx.edudata.ClassTimeList.length>0&&u.TenantId==27" class="sell">
											<view v-if="!cx.show">
												<view style='display: flex;
											justify-content: space-between;width: 100%;' v-if="cx.edudata.ClassTimeList[0].TypeStr=='固定日期'">
													<view>
														{{cx.edudata.ClassTimeList[0].TypeStr}}:&nbsp
														{{cx.edudata.ClassTimeList[0].DateList[0]}}
														&nbsp{{cx.edudata.ClassTimeList[0].TimeStr}}
													</view>
													<view v-if='cx.edudata.ClassTimeList.length>1'
														@click.stop="remaining(cx)" :style="{ color: mainColor }"
														class="remaining">点击更多
													</view>
												</view>
												<!-- 非固定 -->
												<view style='display: flex;
											justify-content: space-between;width: 100%;' v-if="cx.edudata.ClassTimeList[0].TypeStr!='固定日期'">
													<view>
														{{cx.edudata.ClassTimeList[0].TypeStr}}
														<text v-for="(itm,i3) in cx.edudata.ClassTimeList[0].DateList"
															:key="i3">
															{{itm}}
															<text v-if="cx.edudata.ClassTimeList[0].DateList.length>1">
															{{i3 === cx.edudata.ClassTimeList[0].DateList.length-1 ? ":":"、"}}</text>
															<text v-else>&nbsp:</text>
														</text>
														&nbsp{{cx.edudata.ClassTimeList[0].TimeStr}}
													</view>

													<view v-if='cx.edudata.ClassTimeList.length>1'
														@click.stop="remaining(cx)" :style="{ color: mainColor }"
														class="remaining">点击更多
													</view>
												</view>
											</view>
											<!-- 显示全部 -->
											<!-- <view v-else>{{cx.edudata.show}}</view> -->
											<view v-if="cx.show"
												:class="[cx.edudata.ClassTimeList[0].TypeStr!='固定日期'?'rema':'']">
												<view v-for="(item,i) in cx.edudata.ClassTimeList" :key="i" :class="[cx.edudata.ClassTimeList[0].TypeStr=='固定日期'?'rema3':'']">
													<text v-if="item.TypeStr=='固定日期'">
														{{item.TypeStr}} :&nbsp
													</text>
													<text v-if="item.TypeStr!='固定日期'">
														{{item.TypeStr}}
													</text>
													<text v-for="(item2,i2) in item.DateList">
														{{item2}}
														<text>{{i2 === item.DateList.length-1 ? ":":"、"}}</text>
													</text>
													<text style="margin-right: 10px;">&nbsp{{item.TimeStr}}</text>
												</view>
												<text @click.stop="remaining2(cx)" :style="{ color: mainColor }"
													class="remaining">收起</text>
											</view>
										</view>
										<!-- 上课次数 -->
										<div v-if="cx.edudata.ClassNum&&u.TenantId==27" class="sell" style="margin-top: 8rpx;" >
											{{cx.edudata.ClassNum}}次
										</div>
										<div v-if="cx.is_level==1&&u.TenantId!=27">
											<!-- todo VIP价格显示-->
											<u-tag size="mini" shape="circle" text="会员价" type="warning" />
											<!-- <u-tag color="#f39800" type="warning">会员价</u-tag> -->
											<span class="vip" v-if="u.TenantId!=27">￥{{cx.level_price}}</span>
										</div>
										<div v-if="u.TenantId!=27" class="price" :style="{ color: mainColor }">
											{{ cx.price_content }}
										</div>
										<div v-if="u.TenantId!=27" class="sell">{{ cx.sales }}</div>
									</div>
									<div v-if="u.TenantId!=27" @click.stop="showSkuHandler(cx)" class="right">
										<!-- todo 点击加入购物车-->
										<u-icon name="cart-circle-o" size="44" :color="mainColor" />
									</div>
								</div>
							</div>
						</view>
						<!-- 新加div -->
						<template v-if="u&&u.TenantId==27">
							<view class="Teachers">
								<view class="portrait-box">
									<image v-if="cx.edudata.TeacherIcon" class="portrait" mode="aspectFill"
										:src="cx.edudata.TeacherIcon" />
									<view v-if="cx.edudata.TeacherName" class="sell2">{{cx.edudata.TeacherName}}</view>
								</view>
								<!-- 价格 -->
								<view class="cart-box">
									<view class="vip2" :style="{ color: mainColor }">
										{{ cx.price_content }}
									</view>

									<div @click.stop="showSkuHandler(cx)" class="right">
										<!-- todo 点击加入购物车-->
										<u-icon name="cart-circle-o" size="44" :color="mainColor" />
									</div>
								</view>
							</view>
						</template>
					</div>
					<u-divider class="The-tail" v-if="isover" :margin-top="20" :margin-bottom="20">没有更多商品了</u-divider>
				</scroll-view>
			</div>
			<template v-if="u&&u.TenantId==27">
				<good-sku2 v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku2>
			</template>
			<template v-else>
				<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
			</template>
			<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-show="mask" @click="masks()">

		</view>
	</view>
</template>

<script>
	import goodSku from '../goods/goodsku';
	import goodSku2 from '../goods/goodsku2';
	import sidebar from "../sidebar/index";
	import auth from '@/components/auth/index.vue';
	export default {
		props: ["d", "h"],
		data() {
			return {
				limitShow:false,
				ind: 1,
				show: false,
				Theclass: [{
						name: '年级',
						id: '0',
					},
					{
						name: '类型',
						id: "1"
					}
				],
				obj2: {
					EduClassTypeId: ''
				},
				subjectslist: [],
				classification: -1,
				index: true,
				indexx: true,
				index2: -1,
				index22: -1,
				textColor: "#F0F0F0",
				mask: false,
				mainColor: "",
				activeStyle: "",
				page: 1,
				page_count: 1,
				mh: 0,
				g: [],
				isover: false,
				loading: false,
				tid: -1,
				active: 0,
				msg: {
					pageIndex: 1,
					pageSize: 14,
					Name: '',
					GoodsType: 0,
					CategoryIds: '',
					OrderBy: 1,
					UserId: 0,
					StoreId: 0,
					EduClassTypeId: '',
				},
				sku: {},
				showSku: false,
				showAuth: false,
				u: {},
				IsEducation: 0,
			};
		},
		components: {
			sidebar,
			goodSku,
			goodSku2,
			auth
		},
		created() {
			this.u = uni.getStorageSync('mall_UserInfo');
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
			this.IsEducation = uni.getStorageSync('basedata') ?
				(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall
					.setting.mallStyle
					.IsEducation : 0) :
				0;
		},
		mounted() {
			this.init();
			this.initlist()
			// this.u = uni.getStorageSync('mall_UserInfo5')
		},
		methods: {
			// 鼠标移进时间
			mouseover(){
				// console.log('44444')
				this.limitShow = true
			},
			mouseLeave() {
				this.limitShow = false
			},
			remaining(i) {
				this.$nextTick(function() {
					i.show = !i.show
				})
			},
			remaining2(i) {
				i.show = !i.show
			},
			// 接口
			initlist(i) {
				this.isover = false;
				this.loading = true;
				this.msg.StoreId = uni.getStorageSync("storeId") ? uni.getStorageSync("storeId").storeId : 0;
				let IsOpenReserve = uni.getStorageSync("GetAppConfig") ? uni.getStorageSync("GetAppConfig").IsOpenReserve :
					0
				if (IsOpenReserve == 0) { //如果没开启 门店id赋值为0 
					this.msg.StoreId = 0
				}
				let url
				let date = {
					pageIndex: this.msg.pageIndex,
					pageSize: 1000,
					Name: this.msg.Name,
					GoodsType: this.msg.GoodsType,
					CategoryIds: this.msg.CategoryIds,
					OrderBy: this.msg.OrderBy,
					UserId: this.msg.UserId,
					StoreId: this.msg.StoreId,
					// EduClassTypeId: '',
				};
				this.request2({
						url: '/api/AppletGoods/GetClassTypeList',
						data: date
					},
					res => {
						this.loading = false;
						// console.log("resggg4444444", res);
						if (res.resultCode == 1) {
							this.subjectslist = res.data
						}
						uni.hideNavigationBarLoading();
					}
				);
			},
			// 弹窗
			masks() {
				this.mask = false
				this.classification = -1
			},
			// 科目类型点击
			subjects(item, i) {
				this.classification = i
				if (this.classification == i) {
					this.mask = true
				} else {
					this.mask = false
				}
			},
			// 内容点击
			// 年级不限
			content() {
				this.index = !this.index
				if (this.index) {
					// this.index =true
					this.index22 = -1
					this.msg.CategoryIds = ''
					this.msg.page = 1;
					// this.subjectslist = [];
					this.g = [];
					this.init()
					this.mask = false
					this.classification = -1
					this.Theclass[0].name = '年级'
				}
			},
			// 类型不限
			content33() {
				this.indexx = !this.indexx
				if (this.indexx) {
					// this.indexx =true
					this.index2 = -1
					this.msg.EduClassTypeId = ''
					this.msg.page = 1;
					// this.subjectslist = [];
					this.g = [];
					this.init()
					this.mask = false
					this.classification = -1
					this.Theclass[1].name = '类型'
				}
			},
			// 年级内容
			content2(item, i) {
				this.index22 = i
				this.index = false
				this.classification = -1
				this.mask = false
				this.msg.page = 1;
				this.g = [];
				this.msg.CategoryIds = item.Id
				this.Theclass[0].name = item.Name
				this.init()

			},
			// 类型内容
			content3(item, i) {
				this.index2 = i
				this.indexx = false
				this.classification = -1
				this.mask = false
				this.msg.page = 1;
				this.g = [];
				this.msg.EduClassTypeId = item.CateId
				this.Theclass[1].name = item.CateName
				this.init()

			},
			// 购物车
			showSkuHandler(g) {
				this.sku = g;
				this.u = uni.getStorageSync('mall_UserInfo');
				if (!this.u) {
					this.u = {
						nickName: '未登录',
						avatarUrl: ''
					};
					this.showAuth = true;
				} else {
					this.showSku = true;
				}
			},
			changeHandler(i) {
				this.msg.CategoryIds = this.d[i].Id + '';
				this.msg.page = 1;
				this.tid = i;
				this.g = [];
				this.init();
			},
			changeHandler2() {
				this.msg.CategoryIds = ''
				this.msg.page = 1;
				this.tid = -1;
				this.g = [];
				this.init();
			},
			clickHandler(item) {
				if (this.IsEducation == 1) {
					uni.navigateTo({
						url: '/pages/school/courseInfo?GoodsId=' + item.id
					});
				} else {
					if (item.goodsclassify == 3) {
						uni.navigateTo({
							url: "/pages/reserve/goodsDetails?GoodsId=" + item.id
						});
					} else {
						uni.navigateTo({
							url: "/pages/goods/goods?GoodsId=" + item.id
							// url: "/pages/goods/goods?id="
						});
					}
				}
			},
			init() {
				let obj = {
					show: false
				}
				this.isover = false;
				this.loading = true;
				this.msg.StoreId = uni.getStorageSync("storeId") ? uni.getStorageSync("storeId").storeId : 0;
				let IsOpenReserve = uni.getStorageSync("GetAppConfig") ? uni.getStorageSync("GetAppConfig").IsOpenReserve :
					0
				if (IsOpenReserve == 0) { //如果没开启 门店id赋值为0 
					this.msg.StoreId = 0
				}
				let url
				if (this.IsEducation == 1) {
					url = '/api/AppletSchool/GetAppletCoursePageList'
				} else {
					url = '/api/AppletGoods/GetAppletGoodsPageListForZY'
				}
				this.request2({
						url: url,
						data: this.msg
					},
					res => {
						this.loading = false;
						console.log("resggg", res);
						if (res.resultCode == 1) {
							res.data.pageData.forEach(x => {
								x.marketingLogo = JSON.parse(x.marketingLogo)
								x.totalStock = 0;
								if (x.attr && x.attr.length > 0) {
									x.attr.forEach(j => {
										x.totalStock += j.stock
									})
								}
							})
							let list = this.g.concat(res.data.pageData);
							let addList = function(arr) {
								arr.forEach(item => {
									item.show = false
								});
							};
							addList(list);
							this.g = list
							// console.log((this.g, '==='))
							this.page_count = res.data.pageCount;
							if (this.page_count == 1 || this.page_count == 0) {
								this.isover = true;
							}

						}

						uni.hideNavigationBarLoading();
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					if (!this.loading) {
						this.msg.pageIndex++;
						this.init();
					}
				} else {
					this.isover = true;
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync('mall_UserInfo');
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			}
		},
	};
</script>

<style >
	.The-tail .u-divider{
		background-color: transparent !important;
	}
	.The-title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.limit{
		/* position: relative; */
	}
	.limit-box{
		position: absolute;
		    right: 0px;
		    font-size: 12px;
		    color: #fff;
		    background-color: rgba(0, 0, 0, 0.6);
			padding: 10px;
			    border-radius: 10rpx;
	}
	.good-namee2{
		display: flex !important;
		position: relative;
	}
	.rema3{
		margin-bottom: 8rpx;
	}
	.rema {
		display: flex;
		flex-wrap: wrap;
	}

	.remaining {
		display: inline-block;
		flex: 1;
		text-align: right;
	}

	.classification-text {
		font-weight: 600;
		font-size: 28rpx;
		margin-right: 6rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4)
	}

	.drop-down-content {
		display: flex;
		/* justify-content: center; */
		/*  justify-content: space-between; */
		flex-wrap: wrap;
		padding-left: 20rpx;
		padding-top: 25rpx;
	}

	.drop-down {
		background-color: #fff;
		width: 100vw;

		padding-top: 30rpx;
		z-index: 1000;
		position: relative;
	}

	.content-box {
		height: 50rpx;
		background-color: #F0F0F0;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 0 20rpx;
		margin-right: 25rpx;
		margin-bottom: 25rpx;
		border-radius: 10rpx;
	}

	.classification {
		display: flex;
		width: 100%;
		justify-content: space-around;
		height: 80rpx;
		align-items: center;
		border-bottom: 1px solid #F0F0F0;

	}

	.classification-box {
		display: flex;
		align-items: center;
	}

	.vip2 {
		font-size: 16px;
		margin-right: 10rpx;
	}

	.Teachers {
		display: flex;
		justify-content: space-between;
		height: 110rpx;
	}

	.cart-box {
		display: flex;
		/* align-items: center; */
		align-items: flex-end;
	}

	.portrait-box {
		display: flex;
		/* align-items: center; */
	}

	.portrait {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.cent-box {
		/* background: yellow; */
		width: 100%;
		display: flex;
	}

	.catstyle4 {
		display: flex;
	}

	.catstyle4 .left-slider {
		width: 85px;
		height: 100%;
		background: #f5f5f5;
	}

	.catstyle4 .right-slider {
		padding: 10px;
		height: 100%;
		width: 1px;
		flex: 1;
		background-color: #F0F0F0;
	}

	.catstyle4 .van-tabs__line {
		display: none;
	}

	.catstyle4 .van-tab {
		height: 24px;
		line-height: 24px;
		margin-top: 10px;
	}

	.catstyle4 .van-tab--active {
		border-radius: 24px;
		color: #fff !important;
		font-weight: 400 !important;
	}

	.catstyle4 .van-tabs__wrap {
		padding: 0 10px;
	}

	.catstyle4 .good {
		/* border-bottom: 1rpx solid #f1f1f1; */
		/* display: flex; */
		padding: 20rpx 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.catstyle4 .good .good-img {
		width: 120rpx;
		height: 90rpx;
	}

	.catstyle4 .good .good-info .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 30rpx;
		/* height: 36px; */
		margin-bottom: 5px;
		font-weight: bold;
	}

	.catstyle4 .good .good-info {
		margin-left: 20rpx;
		width: 1px;
		flex: 1;
		min-height: 70px;
	}

	.catstyle4 .good .good-info .goodprice {
		display: flex;
		align-items: flex-end;
	}

	.catstyle4 .good .good-info .left {
		flex: 1;
		width: 1px;
	}

	.catstyle4 .good .good-info .right {
		width: 30px;
		height: 30px;
		display: flex;
		justify-items: right;
		align-items: flex-end;
	}

	.catstyle4 .good .good-info .left .vip {
		font-size: 14px;
		font-weight: 600;
		color: #f39800;
	}

	.catstyle4 .good .good-info .goodprice .left .price {
		font-size: 16px;
	}

	.catstyle4 .good .good-info .goodprice .left .sell {
		font-size: 12px;
		color: gray;
	}

	.sell2 {
		font-size: 12px;
		color: gray;
		margin-top: 10rpx;
	}

	.catstyle4 .right-slider .adbox {
		width: 100%;
		height: calc(100vw - 105px / 3.37);
	}

	.catstyle4 .Logo {
		padding: 1px 5px;
		display: inline-block;
		font-size: 22rpx;
		margin-right: 5rpx;
		border-radius: 4px;
	}
</style>
