<template>
	<view class="guidedetails">
		<view class="guide" :style="{'height':(windowHeight-30)+'px'}" v-if='type==1&& loading==true'>
			<view class="guide-top">
				<u-avatar :src="guideModel.GuidePhoto" :size="120"></u-avatar>
				<view class="column" style="height: 36px;justify-content: space-between;margin-left: 10px;">
					<view class="row">
						<span>{{guideModel.Name}}</span>
					</view>
					<view class="row" style="display: flex;flex-direction: row;align-items: center;">
						<u-rate :current="guideModel.Score" active-color="#FF8C10" inactive-color="#D5D5D5" active-icon="star"
						 inactive-icon="star-o" size="34" :disabled="true"></u-rate>
						<span style='font-size: 14px;color: #A8A8A8;margin-left: 10px;'>{{guideModel.Score.toFixed(1)}}</span>
					</view>
				</view>
			</view>
			<view class="guide-info">
				<view class="guide-info-item">
					<span class='info-text'>工龄：</span>
					<span>{{guideModel.WorkYears}}年</span>
				</view>
				<view class="guide-info-item">
					<span class='info-text'>服务人数：</span>
					<span>{{guideModel.OrderGuestNum}}人</span>
				</view>
				<view class="guide-info-item">
					<span class='info-text'>出单：</span>
					<span>{{guideModel.OrderNum}}单</span>
				</view>
			</view>
			<view class="guide-info">
				<view class="guide-info-item">
					<span class='info-text'>个人简介：</span>
				</view>
			</view>
			<view style='padding: 10px;'>
				<h-parse :content="detailContent" @navigate="clickDescription"></h-parse>
			</view>
		</view>
		<view class="guide" v-if='type==2&& loading==true' :style="{'height':(windowHeight-30)+'px'}">
			<view class="u-skeleton-rect">
				<swiper indicator-dots :autoplay="false" :interval="1000" style="height:170px;width: 300px;">
					<block v-for="(item, index) in guidecar.PicList" :key="index">
						<swiper-item>
							<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item"
							 :autoplay="false" loop muted show-play-btn :enable-progress-gesture="true" :controls="true" :show-progress="true"
							 :show-mute-btn="true" objectFit="cover"></video>
							<image @click="previewImage(index)" style="width:100%;height:100%;" v-else :src="item" mode=""></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view style="margin-top: 15px ;font-size: 16px;display: flex;flex-direction: row;align-items: center">
				<image :src="carModel.CarLogo" mode="aspectFill" style="width: 25px;height: 25px;margin-right: 10px;"></image>
				{{carModel.CarBrand!=''?carModel.CarBrand:'无'}}
			</view>
			<view class="row">
				<u-rate :current="carModel.Score" active-color="#FF8C10" inactive-color="#D5D5D5" active-icon="star" inactive-icon="star-o"
				 size="34" :disabled="true"></u-rate>
				<span style='font-size: 14px;color: #A8A8A8;margin-left: 10px;'>{{carModel.Score.toFixed(1)}}</span>
			</view>
			<view style="width: 98%;height: 1px;background: #E2E2E2;margin-top: 10px;"></view>
			<view class="guide-info">
				<view class="guide-info-item">
					<span class='info-text'>颜色：</span>
					<span>{{guidecar.ColorName}}</span>
				</view>
				<view class="guide-info-item">
					<span class='info-text'>分类：</span>
					<span>{{carModel.CarClassStr}}</span>
				</view>
				<view class="guide-info-item">
					<span class='info-text'>座位数：</span>
					<span>{{carModel.GuestNum}}座</span>
				</view>
				<view class="guide-info-item">
					<span class='info-text'>型号：</span>
					<span>{{carModel.CarType}}</span>
				</view>
				<view class="guide-info-item" style="width: 100%;">
					<span class='info-text'>购买年限：</span>
					<span>{{g.car_buyyear}}年</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hParse from "@/components/u-parse/parse.vue";
	export default {
		components: {
			hParse,
			// share
		},
		data() {
			return {
				loading: false,
				mainColor: "",
				activeStyle: "",
				pageTitle: "导游详情",
				type: 0, //1为
				g: {},
				detailContent: '',
				imgs: [],
				carModel: {},
				guideModel: {},
				guidecar: {},
				windowHeight: 0,
			};
		},
		onLoad(options) {
			if (options && options.g) {
				this.g = JSON.parse(decodeURIComponent(options.g))
			}
			if (options && options.type) {
				this.type = options.type;
				if (this.type == 1) {
					uni.setNavigationBarTitle({
						title: '导游详情',
					});
					this.getGuideCarGuideModel()
				} else {
					uni.setNavigationBarTitle({
						title: '车辆详情',
					});
					this.getGuideCarModel()
				}
			}
			this.g.pic_url.forEach((x) => {
				this.imgs.push(x.pic_url);
			});
			let richtext = this.g.guide_introduction;
			setTimeout(() => {
				this.detailContent = richtext;
			}, 10)
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.windowHeight = this.$utils.SystemInfo().windowHeight
		},
		methods: {
			getGuideCarGuideModel() { //根据导游id获取导游信息
				uni.showLoading({
					title: "加载中",
				});
				this.request2({
						url: '/api/AppletGuideCar/GetGuideCarGuideModel',
						data: {
							ID: this.g.guide_id,
						}
					},
					(res) => {
						this.guideModel = res.data;
						uni.hideLoading();
						this.loading = true
					}
				);
			},
			getGuideCarModel() {
				uni.showLoading({
					title: "加载中",
				});
				this.request2({
						url: '/api/AppletGuideCar/GetGuideCarModel',
						data: {
							ID: this.g.car_id,
						}
					},
					(res) => {
						this.carModel = res.data;
						this.carModel.ColorList.forEach(x => {
							if (x.ID == this.g.carcolor_id) {
								this.guidecar = x
							}
						})
						uni.hideLoading();
						this.loading = true
					}
				);
			},
			clickDescription(e) {
				console.log(e);
			},
			//点击跳转
			startPlay(item) {
				uni.navigateTo({
					url: '/pages/video/index?GoodsId=' + this.id + '&VideoUrl=' + item.pic_url
				})
			},
			previewImage(i) {
				uni.previewImage({
					urls: this.guidecar.PicList,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							);
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
		},
	};
</script>

<style>
	.guidedetails {
		height: 100%;
		height: 100%;
		background: #FAF8F9;
		padding: 15px;
		font-family: aa;
	}

	.guidedetails .guide {
		width: 100%;
		border-radius: 10px;
		background: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		overflow-y: auto;
		box-shadow: 0 2px 2px 2px #E9E7E8;
	}

	.guidedetails .guide-top {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.guidedetails .row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.guidedetails .column {
		display: flex;
		flex-direction: column;
	}

	.guidedetails .guide-info {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 20px;
		width: 100%;
	}

	.guidedetails .guide-info-item {
		width: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.guidedetails .info-text {
		font-size: 14px;
		color: #727272;
		padding: 10px 0;
		width: 75px;
		text-align: right;
	}
</style>
