<template>
	<view class="page">
		<u-navbar title="导游详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar" :custom-back="btnfh">
		</u-navbar>
        <image :src="agencyDetail.photo" class="bj" mode="aspectFill"></image>
        <view class="" style="width: 100%;height: 432rpx;"></view>
		<view class="xiangdao">
			<view class="name">
				{{agencyDetail.name}}
			</view>
			<view class="jieshao">
				{{agencyDetail.description == null ? '暂无简介' : agencyDetail.description}}
			</view>
		</view>
		<view class="agency-detail-card" @click="btnxq">
			<view class="" style="display: flex;">
				<image class="agency-detail-image" :src="lxsobj.picture" mode="aspectFill"></image>
				<view class="agency-detail-info">
					<view class="">
						<view class="agency-detail-title">{{ lxsobj.name }}</view>
						<u-rate :count="5" active-color="#FFB400" size="24" inactive-color="#b2b2b2" v-model="lxsobj.rating" readonly></u-rate>
				   </view>
				 	<u-icon name="arrow-right" size="28" color="#000"></u-icon>
				</view>
			</view>
			<view class="agency-detail-desc" style="margin-top: 24rpx;">{{ lxsobj.description == null ? '暂无简介' : lxsobj.description }}</view>
		</view>
		<!-- 富文本解析 -->
		<u-parse v-if="agencyDetail.details" :html="agencyDetail.details" style="width: 660rpx;margin: auto;padding: 20rpx;background-color: #fff;border-radius: 14rpx;"></u-parse>
		<!-- 导游推荐 -->
        <view class="tuijian" v-if="lxsdylst.length > 0">
        	<view class="tit">
        		其他导游推荐
        	</view>
			<view class="bd" v-for="(item,index) in lxsdylst" :key="index" @click="btntj(item)">
				<image :src="item.photo" mode="aspectFill"></image>
				<view class="rt">
					<view class="name">
						{{item.name}}
					</view>
					<view class="jieshao">
						{{ item.description == null ? '暂无简介' : item.description }}
					</view>
				</view>
			</view>
        </view>
		<view class="bot">
			<image src="https://api.ccttiot.com/smartmeter/img/static/u8nLHmK1iCbZ1W70PqNz" mode="" @click="btnlxlvs"></image>
			<view class="anniu" @click="btnlxdy">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uMYNRWb8sjM1UfanNkfa" mode=""></image> 联系导游
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				agencyDetail: {},
				id:'',
				lxsobj:{},
				lxsdylst:[],
				fanhui:''
			}
		},
		onLoad(option) {
            this.id = option.id
			this.getxq()
			if(option && option.fanhui){
				this.fanhui = option.fanhui
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/page_fenbao/daoyou/daoyouxq?id=' + this.id + '&fanhui=1'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/page_fenbao/daoyou/daoyouxq?id=' + this.id + '&fanhui=1'
			}
		},
		methods: {
			btnfh(){
				if(this.fanhui == 1){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			// 点击联系旅行社
			btnlxlvs(){
				if(this.lxsobj.legalPersonPhone){
					uni.makePhoneCall({
						phoneNumber: this.lxsobj.legalPersonPhone,
						success: function(res) {
							console.log('拨打电话成功', res)
						},
						fail: function(err) {
							console.error('拨打电话失败', err)
						}
					})
				}else{
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 点击联系导游
			btnlxdy(){
				if(this.agencyDetail.mobile){
					uni.makePhoneCall({
						phoneNumber: this.agencyDetail.mobile,
						success: function(res) {
							console.log('拨打电话成功', res)
						},
						fail: function(err) {
							console.error('拨打电话失败', err)
						}
					})
				}else{
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 请求导游详情
			getxq(){
				this.$u.get(`/app/tourGuide/detail/${this.id}`).then((res) => {
					if(res.code == 200){
						this.agencyDetail = res.data
						this.lxsxq()
						this.lxsdy()
					}
				})
			},
			// 请求旅行社详情
			lxsxq(){
				this.$u.get(`/app/travelAgency/detail/${this.agencyDetail.agencyId}`).then((res) => {
					if(res.code == 200){
						this.lxsobj = res.data
					}
				})
			},
			// 查询推荐导游列表
			lxsdy(){
				this.$u.get(`/app/tourGuide/list?pageNum=1&pageSize=999&agencyId=${this.agencyDetail.agencyId}`).then((res) => {
					if(res.code == 200){
						this.lxsdylst = res.rows
					}
				})
			},
			
			// 点击查看旅行社详情
			btnxq(){
				uni.navigateTo({
					url:'/page_fenbao/daoyou/lvxingshexq?id=' + this.agencyDetail.agencyId
				})
			},
			// 点击推荐导游重新请求
			btntj(item){
				this.$u.get(`/app/tourGuide/detail/${item.id}`).then((res) => {
					if(res.code == 200){
						this.agencyDetail = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
		padding-bottom: 260rpx;
	}
	.bot{
		width: 750rpx;
		height: 188rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 0 66rpx;
		justify-content: space-between;
		z-index: 99;
		image{
			width: 120rpx;
			height: 88rpx;
		}
		.anniu{
			width: 452rpx;
			height: 100rpx;
			background: #ED8F27;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 50rpx;
				height: 52rpx;
			}
		}
	}
	.tuijian{
		width: 680rpx;
		max-height: 32000rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin: auto;
		margin-top: 18rpx;
		padding: 32rpx 34rpx;
		.tit{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.bd{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 26rpx;
			image{
				width: 176rpx;
				height: 176rpx;
				border-radius: 8rpx;
			}
			.rt{
				width: 414rpx;
				.name{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.jieshao{
					font-size: 28rpx;
					color: #3D3D3D;
					margin-top: 10rpx;
				}
			}
		}
	}
	.fuwenben{
		width: 680rpx;
		max-height: 9999vh;
		margin: auto;
		background-color: #fff;
		margin-top: 18rpx;
		padding: 28rpx 34rpx;
		border-radius: 14rpx;
	}
    .bj{
		width: 750rpx;
		height: 508rpx;
		position: absolute;
		top: 180rpx;
		left: 0;
		z-index: -1;
	}
	.xiangdao{
		width: 680rpx;
		max-height: 9906rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 28rpx 34rpx;
		margin: auto;
		.name{
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}
		.jieshao{
			font-size: 28rpx;
			color: #3D3D3D;
			margin-top: 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.agency-detail-card {
		// display: flex;
		background: #fff;
		margin: 20rpx 30rpx;
		padding: 30rpx;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}
	
	.agency-detail-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 15rpx;
		margin-right: 30rpx;
	}
	
	.agency-detail-info {
		// flex: 1;
		display: flex;
		justify-content: space-between;
		width: 500rpx;
	}
	
	.agency-detail-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #262B37;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.agency-detail-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
	
	.arrow-icon {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	
</style>