<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.medical.title"
						:thumb="item.medical.icon">
						<view class="content">
							<view class="" 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">
										<text class="text" v-if="item1.courseCatalogueEntityList.length > 1" style="font-weight: bold; margin-right: 20rpx;">{{item2.title}}</text>
										<text class="text">半年：￥{{item2.halfFee}}</text><text class="text" style="margin-left: 20rpx;">整年：￥{{item2.fee}}</text>
										
										
									</view>
									
								</view>
							</view>							
						</view>
					</uni-collapse-item>					
				</uni-collapse>
			</view>
			<u-divider v-else text="暂无数据"></u-divider>
		</view>
		<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: []
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// console.log(e, '------')
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getCoursePriceList()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		components: {
			// musicPlay
		},
		//方法
		methods: {
			getCoursePriceList() {
				this.$http
					.post('medical/home/getMedicalCoursePrice')
					.then(res => {
						if (res.code == 0 && res.list.length > 0) {
							this.courseList = res.list
						} else {
							this.courseList = []
						}
					}).catch(e => {
						console.log(e, '报错')
						this.courseList = []
					});
			},
			itemClick(op) {

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

	.flexbox {
		display: flex;
	}
	.priceItem{margin-bottom:20rpx; font-size: 28rpx;}
	.courseItem{ background: $containerColor; border-radius: 20rpx;
	 align-items: center;margin-bottom:20rpx;	display: block; padding: 10rpx 0; width: 100%;
		.u-icon{display: inline-block;}
		text{font-size: 28rpx; padding-left: 10rpx;}
	}
	.container {
		.content{padding: 0 20rpx;}
	}
</style>