<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="padding-lr-40 padding-tb-30 border-bottom-ed">
				<view class="flex margin-bottom-30">
					<view class="flex-one margin-right-30">
						<view class="text-46 text-33 text-bold">{{detailData.name}}</view>
						<view class="margin-top-10 text-77 text-26">{{detailData.brief}}</view>
					</view>
					<view class="headerImg">
						<image :src="detailData.head_img" class="width-100p height-100p" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="flex align-end justify-between">
					<view class="flex">
						<view class="flex align-center flex-direction margin-right-80">
							<view class="text-34 text-33 text-bold">{{detailData.make_number}}</view>
							<view class="text-24 text-77">预约量</view>
						</view>
						<view class="flex align-center flex-direction">
							<view class="text-34 text-33 text-bold">{{detailData.follow_number}}</view>
							<view class="text-24 text-77">粉丝</view>
						</view>
					</view>
					<view class="followBtn" @click="changeFollow">
						<text v-if="isFollow == 1">已关注</text>
						<text v-if="isFollow == 0" class="tyIcon-jia"
							style="font-size: 26rpx;margin-right: 5rpx;"></text>
						<text v-if="isFollow == 0">关注</text>
					</view>
				</view>
			</view>
			<view class="padding-tb-40 padding-lr-30">
				<view class="flex justify-between align-center margin-bottom-20">
					<view class="text-32 text-33 text-bold line-40">在线咨询服务</view>
					<view class="text-32 text-ff85 text-bold text-price line-45">{{detailData.price}}</view>
				</view>
				<view class="text-26 text-33 line-40 margin-bottom-50">
					通过文字、图片、视频向专家提问，含1次提问，3次追问
				</view>
				<view class="text-32 text-33 text-bold line-40 margin-bottom-20">
					专家介绍
				</view>
				<view class="text-26 text-77 line-40 margin-bottom-50">
					{{detailData.introduce}}
				</view>
				<view class="text-32 text-33 text-bold line-40 margin-bottom-20">
					资质证书
				</view>
				<view class="margin-bottom-50">
					<image v-for="(item,index) in detailData.certificate_img" :key="index" :src="item" mode="widthFix"
						class="width-100p block" :class="index == (detailData.certificate_img.length - 1)?'' : 'margin-bottom-20'"></image>
				</view>
				<view class="text-32 text-33 text-bold line-40 margin-bottom-20">
					主要业绩
				</view>
				<view class="text-26 text-77 line-40">
					{{detailData.achievement}}
				</view>
			</view>
			<view class="line15"></view>
			<!-- 评价 -->
			<view class="evaBox padding-lr-30 padding-bottom-35 padding-top-20">
				<view class="text-30 text-bold ">
					评价
				</view>
				
				<block v-if="reviewMsg">
					<view class="flex flex-wrap border-bottom-ed margin-top-20">
						<view class="text-22 line-50 padding-lr-25 evaBtn2"
							@click="go('/pages/expert/evaluateList?index=0&id='+id)">
							<text class="margin-right-5">全部</text>
							<text>{{numbers.all}}</text>
						</view>
						<view class="text-22 line-50 padding-lr-25 evaBtn1"
							@click="go('/pages/expert/evaluateList?index=1&id='+id)">
							<text class="margin-right-5">及时快速</text>
							<text>{{numbers.number1}}</text>
						</view>
						<view class="text-22 line-50 padding-lr-25 evaBtn1"
							@click="go('/pages/expert/evaluateList?index=2&id='+id)">
							<text class="margin-right-5">很有耐心</text>
							<text>{{numbers.number2}}</text>
						</view>
						<view class="text-22 line-50 padding-lr-25 evaBtn1"
							@click="go('/pages/expert/evaluateList?index=3&id='+id)">
							<text class="margin-right-5">专业权威</text>
							<text>{{numbers.number3}}</text>
						</view>
						<view class="text-22 line-50 padding-lr-25 evaBtn1"
							@click="go('/pages/expert/evaluateList?index=4&id='+id)">
							<text class="margin-right-5">详细清楚</text>
							<text>{{numbers.number4}}</text>
						</view>
					</view>
					<view class="padding-top-30 padding-bottom-50">
						<view class="flex align-center margin-bottom-20">
							<view class="userHeader">
								<image :src="reviewMsg.head_img" mode="aspectFill" class="width-100p height-100p">
								</image>
							</view>
							<view class="flex-one margin-lr-15">
								<view class="text-24 text-33 text-bold margin-bottom-10">{{reviewMsg.nick_name}}</view>
								<view class="text-24 text-98">{{reviewMsg.review_time}}</view>
							</view>
							<view class="flex align-center">
								<image src="/static/home/star1.png" v-for="(item,index) in reviewMsg.star" :key="index"
									class="starImg margin-left-10"></image>
								<image src="/static/home/star0.png" v-for="(item,index) in (5-reviewMsg.star)" :key="index"
									class="starImg margin-left-10"></image>
							</view>
						</view>
						<view class="padding-left-95 text-28 line-40 text-33">{{reviewMsg.content}}</view>
					</view>
					<view class="flex justify-center">
						<view class="text-24 text-33 text-center allReviewBtn"
							@click="go('/pages/expert/evaluateList?index=0&id='+id)">
							查看全部评价
						</view>
					</view>
				</block>
				<block v-else>
					<view class="padding-tb-50 text-center text-26 text-77">
						暂无评价～
					</view>
				</block>
			</view>

		</view>

		<view class="bottomBox justify-between flex align-center border-top-f5">
			<view class="flex flex-direction align-center position-relative">
				<view class="icon-icon-fenxiang iconfont text-42 margin-bottom-5"></view>
				<view class="text-22 text-33">分享</view>
				<button open-type="share" class="shareBtn"></button>
			</view>
			<view class="text-center text-ff text-30 text-bold bottomBtn1" v-if="status == 2" @click="tapOrder">
				立即咨询
			</view>
			<view class="text-30 text-77 text-bold text-center bottomBtn2" v-if="status == 1">
				已下架
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				isFollow: 0, //0-未关注 1-已关注


				status: 1, 

				detailData: {},
				numbers: {},
				reviewMsg: {},
				showPage: false,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getPageData();
		},
		onShareAppMessage() {
			return{
				title:this.detailData.name + ' ' + this.detailData.brief,
				imageUrl:this.detailData.head_img,
				path : '/pages/expert/detail?id=' + this.id
			}
		},
		methods: {
			getPageData() {
				this.rq.getData('fire/api/Fire/getExpertDetail', {
					expert_id: this.id
				}).then(res => {
					this.detailData = res.data.detail;
					this.numbers = res.data.number;
					this.reviewMsg = res.data.newest_review;
					this.isFollow = res.data.detail.is_follow;
					this.status = res.data.detail.is_publish;
					this.showPage = true;
				})
			},
			// 关注
			changeFollow() {
				if (this.cn.isLogin()) {
					this.rq.getData('fire/api/Fire/submitExpertFollow', {
						expert_id: this.id
					}).then(res => {
						if (res.code == 0) {
							this.isFollow = this.isFollow == 1 ? 0 : 1;
							if(this.isFollow){
								this.detailData.follow_number++;
							}else{
								this.detailData.follow_number--;
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/login'
					})
				}
			},
			// 立即下单
			tapOrder() {
				if (this.cn.isLogin()) {
					uni.navigateTo({
						url: '/pages/expert/order?id=' + this.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/login'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.headerImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.followBtn {
		width: 160rpx;
		height: 64rpx;
		background: #2F97FF;
		border-radius: 10rpx;
		text-align: center;
		line-height: 64rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.line15 {
		width: 100vw;
		height: 15rpx;
		background: #F5F5F5;
	}

	.evaBtn2,
	.evaBtn1 {
		border-radius: 26rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.evaBtn2 {
		color: #FF8534;
		background: #fff;
		border: 2rpx solid #FF8534;
	}

	.evaBtn1 {
		background: #F5F5F5;
		border: 2rpx solid #F5F5F5;
	}

	.userHeader {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.starImg {
		width: 30rpx;
		height: 30rpx;
	}

	.allReviewBtn {
		width: 200rpx;
		line-height: 54rpx;
		border-radius: 28rpx;
		border: 1rpx solid #CCCCCC;
	}

	/* 底部 */
	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom)) 60rpx;
	}

	.bottomBtn1,
	.bottomBtn2 {
		width: 560rpx;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
	}

	.bottomBtn1 {
		background: #2F97FF;
	}

	.bottomBtn2 {
		background: #E5E5E5;
	}
	.shareBtn{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		z-index: 6;
	}
</style>
