<template>
	<view class="content">
		<z-nav-bar title="医生主页" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
		<view class="taihu_wrap" v-if="status">
			<view class="taihu_infor">
				<image :src="taihuTalent.icon" class="infor_image" mode="aspectFit"></image>
				<view class="infor_right">
					<view class="infor_top">
						<text class="infor_name">{{taihuTalent.name}}</text>
						<text class="infor_title">{{taihuTalent.title}}</text>
					</view>
					<view class="infor_con">
						<text v-for="item in label" :key="item">{{item}}</text>
					</view>
				</view>
			</view>
			<view class="taihu_common">
				<text>介绍</text>
				{{taihuTalent.introduce}}
			</view>
			<view class="taihu_common">
				<text>业务专长</text>
				{{taihuTalent.specialty}}
			</view>
			<view class="taihu_common">
				<text>出诊信息</text>
				<span v-html="taihuTalent.clinic"></span>
			</view>
			<view class="taihu_common">
				<text>预约信息</text>
				<span style="white-space: pre-line;">{{taihuTalent.reservation.replace('电话预约:', '电话预约:\n')}}</span>
			</view>
			<view class="taihu_common">
				<text>所属地域</text>
				{{taihuTalent.region}}
			</view>
			<view class="taihu_common">
				<text>太湖证书</text>
				<view class="certificate-list" v-if="certificates.length>0">
					<view class="list_block" v-for="(item,index) in displayedCertificates" :key="index" @click="goToUrl(item.userCertificates)">
						{{item.title}}
					</view>

					<view v-if="shouldShowToggle" class="toggle-btn" @click="toggleShow">
						{{ showAll ? '收起' : '查看更多' }}
					</view>
				</view>
				<view class="certificate-list" v-else>暂无</view>
			</view>
			<view class="taihu_common">
				<text>名医精彩</text>
				<view class="certificate-list" v-if="courseList.length>0">
					<view v-for="(item, index) in courseList" :key='index' style=" text-decoration: underline;" @click="goToDetail(item)">{{item.title}}</view>
				</view>
				<view class="certificate-list" v-else>暂无</view>
			</view>
		</view>
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
	data() {
		return {
			id: null,
			taihuTalent: {},
			label: [],  //标签
			certificates: [],  //证书
			courseList: [],  //名医精彩数据
			status: false,
			showAll: false,  //是否显示全部
			defaultShowCount: 6  //默认显示条数
		}
	},
	computed: {
	  displayedCertificates() {
	    if (this.showAll) {
	      return this.certificates
	    } else {
	      return this.certificates.slice(0, this.defaultShowCount)
	    }
	  },
	  shouldShowToggle() {
	    return this.certificates.length > this.defaultShowCount
	  }
	},
	onLoad(e) {
		this.id = e.id;
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'common/taihuTalent/taihuTalentInfo',
				method: "POST",
				data: {
					id: this.id
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if (res.code==0) {
					uni.hideLoading();
					this.status = true;
					this.taihuTalent = res.taihuTalent;
					this.label = res.label;
					this.certificates = res.certificates;
					
					if(res.courseList&&res.courseList.length>0){
						this.courseList = res.courseList;
					}
				}
			});
		},
		//点击展示全部
		toggleShow() {
			this.showAll = !this.showAll
		},
		//展示图片
		goToUrl(urlArr){
			if(urlArr&&urlArr.length>0){
				uni.navigateTo({
					url: '/pages/talents/certificateUrl?data='+JSON.stringify(urlArr)
				});
			}else{
				this.$commonJS.showToast("暂无证书图片");
			}
		},
		//跳转到课程详情
		goToDetail(item){
			uni.navigateTo({
				url: '/pages/curriculum/index?navTitle='+item.title+'&title='+item.title+'&id='+item.id
			});
		},
	},
}
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.content{
	height: 100%;
	overflow: auto;
	background-color: #fff;
}
.taihu_wrap{
	padding: 30rpx 30rpx 50rpx;
}
.taihu_infor{
	display: flex;
	align-items: center;
	padding-bottom: 10rpx;
}
.infor_image{
	display: block;
	width: 200rpx;
	height: 220rpx;
	background-color: #f3f3f3;
}
.infor_right{
	width: calc(100% - 220rpx);
	margin-left: 40rpx;
}
.infor_top{
	display: flex;
	align-items: center;
	line-height: 40rpx;
}
.infor_name{
	font-size: 38rpx;
	color: #333;
	font-weight: bold;
}
.infor_title{
	font-size: 34rpx;
	color: #999;
	padding-left: 20rpx;
}
.infor_con{
	padding-top: 20rpx;
	
	text{
		display: block;
		font-size: 30rpx;
		line-height: 34rpx;
		padding: 8rpx 0;
		color: $themeColor;
	}
}
.taihu_common{
	margin-top: 30rpx;
	font-size: 30rpx;
	line-height: 46rpx;
	
	text{
		font-size: 38rpx;
		padding-right: 15rpx;
		font-weight: bold;
		color: $themeColor;
	}
}
.list_block{
	padding-top: 5rpx;
}
.toggle-btn{
	color: $themeColor;
}
</style>