<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="课程价格"></z-nav-bar>
		<view class="addVip">
			<u-alert v-if="isAndorid" style="
			    width: 100%;
			  " :title="goBuyTitle" type="warning" :show-icon="true">
				<template slot="rightSlot" slot-scope="slotProps">
					<text class="saveBtn vipBtn flexbox buyBtn" style="color: #fff;"
						@click="onPageJump('/pages/mine/vip/index')">
						开通VIP
					</text>
					<view> </view>
				</template>
			</u-alert>
		</view>
		<!-- 新的 -->
		<uni-collapse accordion @change="collapseChange">
			<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
				:thumb="item.courseMedicine.icon">
				<view class="content" v-show="item.courseList.length > 1" style="padding:20rpx;">
					<view :class="['courseItemleve1',userMsg.vip != 0 ? 'isVip' :'']"
						v-for="(item1, index1) in item.courseList" :key="index1"
						@click="onPageJump('/pages/course/courseDetail',item1.id)">
						<view class="vipSee" v-if="userMsg.vip != 0 && userMsg.vip != 3">
							<text>VIP畅学权益生效中</text>
						</view>
						<view :class="['text','courseItem','flexbox']"><u-icon name="pushpin" color="#2979ff"
								size="24"></u-icon><text style="font-size: 32rpx;">{{item1.title}}</text>
						</view>
						<template v-if="item1.courseCatalogueEntityList && item1.courseCatalogueEntityList.length > 0">
							<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
								<view :class="['priceItem', item2.isBuy == 1 && userMsg.vip == 0 ? 'isBuy' : '']">
									<text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1"
										style="font-weight: bold; margin-right: 10rpx;">【{{item2.title}}】</text>
									<view class="pbox flexbox">
										<text v-if="item2.type == 2" style="border: #ffb861 1px solid ; border-radius: 40rpx; font-size: 28rpx; display:inline-block; width: 40rpx;
										 height: 40rpx; text-align: center; line-height: 40rpx; color: #ffb861;">V</text>
										<text class="text">半年：￥{{item2.halfFee}} 元</text><text class="text"
											style="margin-left: 20rpx;">整年：￥{{item2.fee}} 元</text>
										<text class="buybtns" @click.stop="goBuy(item2)"
											v-if="item2.isBuy == 0 && userMsg.vip == 0">立即购买</text>
									</view>
									<i class="haveBuy" v-if="item2.isBuy == 1 && userMsg.vip == 0">已购买</i>

								</view>
							</view>
						</template>
						<!-- <view class="buyBox" v-if="!item1.allBuy">
															<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
																<u-icon name="bag" color="#fff" size="24"></u-icon>
																<text>立即购买</text>
															</view>
														</view> -->
					</view>
					<view class="" style="text-align: center; margin-bottom: 20rpx;">
						<text class="" v-if="item.subpage < item.pages" style="color: #55aaff; display: inline-block; font-size: 28rpx;"
							@click="loadMoreCourse(item, index)">加载更多</text>
						<text class="" v-else style="color: #55aaff; display: inline-block; font-size: 28rpx;"
							>已全部加载完毕</text>
					</view>

				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!--  -->
		<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
		<z-navigation></z-navigation>
		<buy-pup v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import buyPup from '@/components/buyPup.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				goBuyTitle: "购买VIP,即可免费观看吴门医述所有课程",
				courseList: [],
				courseList1: [], // 新的
				status: 0,
				scrollTop: 0,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				proPriceList: [],
				pricespop: false,
				userMsg: {},
				cartList: [],
				isAndorid:true
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// console.log(e, '------')
			this.getUserInfo()
			this.getCoursePriceList1()
			this.getOS()
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();			
			// this.getCoursePriceList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		components: {
			// musicPlay
			buyPup
		},
		//方法
		methods: {
			// 获得操作系统
			getOS() {
			  let oprateOs = "";
			  oprateOs = uni.getSystemInfoSync().platform;
			  // console.log(oprateOs)
			  if (oprateOs == "android") {
			    this.isAndorid = true;
			  } else {
			    this.isAndorid = false;
			  }
			},
			loadMoreCourse(val, i) {
				console.log(val, 'val',i,'++++++++++++++++')
				let _page = val.subpage
				_page += 1
				this.getSubCourse(this.courseList[i].medicineList, i, _page)
			},
			collapseChange(e) {
				console.log('e', e)
				if (e && this.courseList[e].medicineList.length > 0) {
					if (this.courseList[e].courseList.length <= 0)
						this.getSubCourse(this.courseList[e].medicineList, e,1)
				}
			},
			// 获取子课程
			getSubCourse(ids, index, page) {
				console.log('ids------------------', index)
				$http.request({
						url: "medical/home/getMedicalCoursePriceIsBuy",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							page: page,
							limit: 10,
							"ids": ids
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {

							if (res.res.records.length > 0) {
								let _list = res.res.records
								// console.log(_list,'_list')
								// this.courseList[index].courseList = _list
								this.courseList[index].courseList = this.courseList[index].courseList.concat(_list)
								this.courseList[index].subpage = res.res.current
								this.courseList[index].pages = res.res.pages
								// console.log(this.courseList[index].courseList, 'this.courseList[index]')
							}
						}

					}).catch(e => {
						
						console.log(e.errMsg, '报错')
					})
			},
			// 获取购物车数据
			addCart(val) {
				console.log(val)
				if (val.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none"
					});
				} else {
					console.log(this.userInfo, '222')
					this.$http
						.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
						.then(res => {
							// console.log(
							this.cartList = res.cartList
							this.isAddLink(val)
						})
				}
			},
			// 加入到购物车
			isAddLink(item) {
				// console.log('传入购物车',item);				
				// 统计商品信息
				let data = {
					"userId": this.userInfo.id,
					"productId": item.productId,
					"productAmount": 1,
					"price": item.activityPrice && item.activityPrice != 0 ? item.activityPrice : item.price
				}
				// 判断列表是否为空
				if (this.cartList.length > 0) {
					let flag = ''
					let shagnpin = {}
					// 循环购物车列表
					flag = this.cartList.some((item, index) => {
						if (item.productId == data.productId) {
							shagnpin = item
							shagnpin.productAmount += 1
							return true
						}
					})
					if (flag) {
						// 已在购物车中添加
						$http.request({
							url: "book/ordercart/update",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: shagnpin,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								this.upoShow = false
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					} else {
						// 加入购物车
						$http.request({
							url: "book/ordercart/save",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								this.upoShow = false
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					}

				} else {
					// 购物车列表为空时直接加入购物车
					$http.request({
						url: "book/ordercart/save",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 1000,
							});
						}
					})
				}
			},
			oprate(data) {
				console.log(data, '得到的内容')
				
				if (data.name == 'buy') {
					this.buy(data.item)
				} else if (data.name == 'gouwuche') {
					this.addCart(data.item)
				}
			},
			buy(val) {
				var mynavData = JSON.stringify({
					goods: [{
						productImages: val.productImages,
						productId: val.productId,
						productName: val.productName,
						price: val.activityPrice && val.activityPrice != 0 ? val.activityPrice : val.price,
						goodsType: val.goodsType,
					}, ],
					navTitle: val.productName,
					title: val.productName,
					typeId: 0,
				}); // 这里转换成 字符串

				uni.navigateTo({
					url: `/pages/goods/order/index?data=${mynavData}`,
				});
			},
			onPageJump(path, id) {
				uni.navigateTo({
					url: `${path}?id=${id}`
				})
			},
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
					});
				// }
			},
			closePup(e) {
				this.pricespop = false
			},
			goBuy(val) {				
				console.log(val, 'val')
				if(val.type == 2 && this.userMsg.vip != 1){
					uni.showModal({
						title:'提示',
						content:'当前课程目录是超V专享,开通超V可观看',
						confirmText:'好的',
						showCancel:false
					})
					return
				}
				$http.request({
						url: "sociology/product/getProductListForCourse",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": val.id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.productList.length > 0) {
								this.proPriceList = res.productList
								this.pricespop = true
								// this.curProId = this.proPriceList[0].productId
							} else {
								this.proPriceList = []
								uni.showToast({
									title: '课程未绑定商品',
									icon: 'none'
								})
							}
						}

					}).catch(e => {
						console.log(e, '获取商品列表报错')
						uni.showToast({
							title: '获取商品失败',
							icon: 'none'
						})
					});


			},
			getCoursePriceList1() {
				this.$http
					.post('medical/home/getMedicalCoursePrice')
					.then(res => {
						if (res.code == 0 && res.res.length > 0) {
							let _list = res.res
							let _allBuy = false

							_list.map(item => {
								item.courseList = []
								// 	item.courseList.forEach(item2 => {		
								// 		let _number = 0
								// 		item2.courseCatalogueEntityList.forEach(item3 => {
								// 			if(item3.isBuy == 1){
								// 				_number++
								// 			}										
								// 		})
								// 		if(_number == item2.courseCatalogueEntityList.length){
								// 			_allBuy = true							
								// 		}else{
								// 			_allBuy = false	
								// 		}									
								// 		item2.allBuy = _allBuy
								// 	})								
							})
							this.courseList = _list
							this.status = 2
						} else {
							this.courseList = []
							this.status = 1
						}
					}).catch(e => {
						console.log(e, '报错')
						this.courseList = []
						this.status = 1
						uni.showToast({
							title:`${e.errMsg}`,
							icon:'none'
						})
					});
			},
			itemClick(op) {

			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.isVip {
		position: relative;
		padding-top: 50rpx !important;
		border: 1px solid #6429db;
		box-sizing: border-box;
	}

	.vipSee {

		position: absolute;
		right: 0;
		top: 0;
		font-size: 24rpx;
		background-image: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
		// @include theme("btn_bg"); 
		color: #fff;
		padding: 10rpx;
		border-radius: 50rpx 0 0 50rpx;

	}

	.flexbox {
		display: flex;
	}

	.buybtns {
		@include theme("btn_bg");
		border-radius: 30rpx;
		color: #fff;
		font-size: 28rpx;
		padding: 0 10rpx;
		margin-left: 10rpx;
	}

	.addVip {
		.saveBtn {
			width: 150rpx;
		}
	}

	.buyBox {
		.saveBtn {
			margin: 0 auto;
		}
	}

	.saveBtn {
		width: 260rpx;
		align-items: center;
		justify-content: center;
		@include theme("btn_bg");
		height: 60rpx;

		// width: 46%;
		overflow: hidden;
		border-radius: 30rpx;

		text {
			padding-left: 10rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.courseItemleve1 {
		padding: 20rpx;
		border-radius: 20rpx;
		// border: 1px solid #eee;
		overflow: hidden;
		margin-bottom: 30rpx;
		@include mshadow(10px, 8);
		background: $containerColor;
	}

	.priceItem {
		// justify-content: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		// background-color: #82aee2;
		border-radius: 20rpx;
		padding: 10rpx;
		border: 2px solid #82aee2;

		.pbox {
			justify-content: center;
			width: 100%;
			text-align: center;
		}

		text {
			// color: #fff;
		}

		.mname {
			display: block;
			text-align: center;
			margin-bottom: 10rpx;
			// color: #694bc6;
		}
	}

	.priceItem.isBuy {
		position: relative;
		border-color: #b3b3b3;
		overflow: hidden;
		background-color: #f3f3f3;
	}

	.isBuy {
		.haveBuy {
			position: absolute;
			padding: 2rpx 6rpx;
			border-radius: 0 0 0 20rpx;
			right: 0;
			top: 0;
			z-index: 1;
			background-color: #e1e1e1;
			font-style: normal;
			font-size: 24rpx;
		}

		.mname {
			color: inherit;
		}
	}

	.courseItem {
		// background: #b9d4f2; 
		font-weight: bold;
		border-bottom: 1px solid #e1e1e1;
		// border-radius: 20rpx;
		align-items: center;
		margin-bottom: 20rpx;
		display: block;
		padding: 10rpx 10rpx;
		width: 100%;
		color: $themeColor;

		.u-icon {
			display: inline-block;
		}

		text {
			font-size: 28rpx;
			padding-left: 10rpx;
		}
	}

	.container {
		background-color: $containerColor;

		.content {
			padding: 0 20rpx;
		}
	}
</style>