<template>
	<view class="commonPageBox">
		<z-nav-bar :title="title"></z-nav-bar>
		<view class="cateList">
			<view class="list_block" v-if="!statusXLCP">
				<view class="list_item" v-for="(item,index) in list" :key="index">
					<view class="list_item_image">
						<image v-if="item.image" :src="item.image" mode="aspectFit"></image>
						<text class="image_null" v-else>暂无封面图</text>
					</view>
					<view class="list_item_right">
						<view class="list_item_title">{{item.title}}</view>
						<view class="list_item_content" v-html="item.content"></view>
						<view class="list_item_bt">
							<text class="list_item_study" @click="goToDetail(item)">了解课程</text>
						</view>
					</view>
				</view>
				<text v-if="statusNull" class="text_null">暂无数据</text>
			</view>
			
			<view class="xlcp_block" v-if="statusXLCP">
				<view class="level_block">
					<view class="level_item">自恋型人格障碍诊断标准</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
	data() {
		return {
			title: '',
			id: null,
			list: [],  //列表数据
			statusNull: null,
			statusXLCP: null
		}
	},
	onShow(){
		
	},
	onLoad(options) {
		this.id = options.id;
		this.getData();
		//针对身心医学的判断
		if(options.title=='心身医学'){
			this.title = '心身健康科学'
		}else{
			this.title = options.title;
		}
	},
	methods: {
		//获取数据
		getData(){
			this.$http.request({
				url: 'visitor/getCourseByPsycheId',
				method: "POST",
				data: {
					psycheId: this.id
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res => {
				if(res.courseList&&res.courseList.length>0){
					this.list = res.courseList;
				}else{
					this.list = [];
					this.statusNull = true;
				}
			});
		},
		goToDetail(item){
			uni.navigateTo({
				url: `/pages/visitor/detail?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.commonPageBox{
	background: #eff5f8;
	height: 100vh;
}
.list_block{
	padding: 20rpx 20rpx 0;
}
.list_item{
	position: relative;
	background: #fff;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
	padding: 30rpx 20rpx 70rpx;
	margin-bottom: 20rpx;
	display: flex;
	border-radius: 10rpx;
}
.list_item_image,.image_null{
	width: 250rpx;
	height: 220rpx;
	background-color: rgba(125, 193, 240, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}
.list_item_image image{
	width: 100%;
}
.list_item_right{
	margin-left: 30rpx;
	width: calc(100% - 250rpx);
}
.list_item_title{
	font-size: 30rpx;
	line-height: 36rpx;
	font-weight: bold;
	color: #333;
}
.list_item_content{
	margin-top: 15rpx;
	font-size: 26rpx;
	line-height: 36rpx;
	color: #999;
	max-height: 108rpx;
	overflow: hidden;
}
.list_item_study{
	line-height: 48rpx;
	background: #7dc1f0;
	color: #fff;
	border-radius: 40rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
}
.list_item_bt{
	display: flex;
	align-items: center;
	position: absolute;
	right: 20rpx;
	bottom: 30rpx;
}
.list_item_price{
	font-size: 30rpx;
	font-weight: 500;
	margin-right: 30rpx;
	color: red;
	line-height: 54rpx;
}
.text_null{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 26rpx;
	color: #999;
	margin: 150rpx 0;
}
.image_null{
	color: #999;
	font-size: 22rpx;
}

.labels_block{
	width: 100%;
	display: flex;
	align-items: center;
	background: #fff;
	position: fixed;
	left: 0;
	z-index: 99;
	height: 40px;
}
.labels_item{
	line-height: 76rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
}
.active_tab{
	font-size: 36rpx;
	font-weight: bold;
}
.line-item{
	display: none;
	margin: 0 auto;
	width: 55rpx;
	height: 6rpx;
	background: #7dc1f0;
	overflow: hidden;
}
.active_tab .line-item{
	display: block;
}

.children_block{
	display: flex;
	align-items: center;
	margin: 50px 10rpx 0;
	position: relative;
	z-index: 99;
}
.children_item{
	margin: 0 10rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333;
	background: #fff;
	border: 1rpx solid #999;
	border-radius: 10rpx;
}
.active_children{
	color: #fff;
	background: #7dc1f0;
	border: 1rpx solid #7dc1f0;
}

.xlcp_block{
	padding: 0 20rpx;
	margin-top: 20rpx;
}
.xlcp_block_2{
	margin-top: 110rpx;
}
.form_item{
	margin-bottom: 50rpx;
}
.form_solid{
	border-radius: 10rpx;
	background-color: #fff;
	padding: 20rpx 20rpx 50rpx;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
}
.form_title{
	display: inline-block;
	width: 100%;
	font-size: 42rpx;
	color: #333;
	text-align: center;
	padding: 30rpx 0 20rpx;
}
.form_des{
	font-size: 30rpx;
	line-height: 48rpx;
	color: #666;
}
.form_btn{
	width: 300rpx;
	height: 70rpx;
	margin: 40rpx auto 0;
	color: #fff;
	font-size: 28rpx;
	background: #7dc1f0;
	border-radius: 10rpx;
}

.popup_mark{
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
.popup_block{
	width: 580rpx;
	height: 360rpx;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -180rpx;
	margin-left: -290rpx;
	background: #fff;
	z-index: 99;
	border-radius: 5px;
}
.popup_title{
	display: block;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	color: #333;
	text-align: center;
	border-bottom: 1rpx solid #f0f0f0;
}
.popup_con{
	font-size: 28rpx;
	padding-top: 50rpx;
	text-align: center;
}
.popup_picker{
	position: absolute;
	bottom: 0;
	width: 100%;
}
.scale_btn{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 28rpx;
	background: #294a97;
	border: none;
	border-radius: 0 0 5px 5px;
}
.curseSet{
	margin-right: 18rpx; 
	font-size: 28rpx; 
	display: flex; 
	align-items: center;
}

.level_block{
	border-radius: 10rpx;
	background-color: #fff;
	padding: 20rpx;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
}
.level_item{
	display: inline-block;
	color: #333;
	width: 100%;
	font-size: 32rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}
.level_item:last-child{
	border-bottom: 0;
}
</style>