<template>
  <view class="guidedetails" >
	  
	  <view class="guide" v-if='type==1'>
		  <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">
						<u-rate
						  :current="guideModel.Score"
						  active-color="#FF8C10"
						  inactive-color="#b2b2b2"
						  active-icon="star"
						  inactive-icon="star-o"
						  size="20"
							:disabled="true"
						></u-rate>
					</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.Telephone}}</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'>
			<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 style="margin-top: 5px;" >
				<u-rate
				  :current="carModel.Score"
				  active-color="#FF8C10"
				  inactive-color="#b2b2b2"
				  active-icon="star"
				  inactive-icon="star-o"
				  size="20"
					:disabled="true"
				></u-rate>
			</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>{{g.car_buyyear}}年</span>
			  </view>
			 <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.GuestNum}}座</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.CarType}}</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:{},
    };
  },

  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,
	});
	
	
  },
  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.imgs,
       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%;
	 background: #f5f5f5;
	 padding: 20px 0;
}
.guidedetails .guide{
	width: 94%;
	margin-left: 3%;
	
	border-radius: 10px;
	background: #FFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	
}
.guidedetails .guide-top{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.guidedetails .row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: 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;
	margin-right: 10px;
	padding: 10px 0;
}
</style>
