<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="课程价格"></z-nav-bar>
		<view class="container">
			<view class="" v-if="courseList.length > 0">
				<uni-collapse accordion>
					<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
						:thumb="item.courseMedicine.icon">
						<view class="content" v-if="item.courseList.length > 1">
							<!-- <pre>{{item}}</pre> -->
							<view class="courseItemleve1" v-for="(item1, index1) in item.courseList" :key="index1">
															<view class="text courseItem flexbox"><u-icon name="pushpin" color="#2979ff"
																	size="24"></u-icon><text>{{item1.title}}</text></view>
															<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
																<view :class="['priceItem', item2.isBuy == 1 ? '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 class="text">半年：￥{{item2.halfFee}} 元</text><text class="text"
																				style="margin-left: 20rpx;">整年：￥{{item2.fee}} 元</text>
																		</view>
																		<i class="haveBuy" v-if="item2.isBuy == 1">已购买</i>
																</view>									
															</view>
															<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>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<u-divider v-if="status == 1" text="暂无数据"></u-divider>
			<u-divider v-if="status == 0" text="加载中..."></u-divider>
		</view>
		<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
			:iconStyle="iconStyle"></u-back-top>
		<z-navigation></z-navigation>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				courseList: [],
				status:0,
				scrollTop: 0,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// console.log(e, '------')
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getCoursePriceList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		components: {
			// musicPlay
		},
		//方法
		methods: {
			getCoursePriceList() {
				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.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 = res.res
							this.status = 2
						} else {
							this.courseList = []
							this.status = 1
						}
					}).catch(e => {
						console.log(e, '报错')
						this.courseList = []
						this.status = 1
					});
			},
			itemClick(op) {

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

	.flexbox {
		display: flex;
	}
	.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>