<template>
  <view class="guidedetails" >
	  
	  <view class="guide" v-if='type==1'>
		  <view class="guide-top">
				 <image :src="g.guide_photo"  style="width: 60px; height: 60px;margin-right: 10px" mode="widthFix"></image>
				 <view class="column" style="height: 36px;justify-content: space-between;">
					<view class="row">
						<span>{{g.guide_name}}</span>
					</view>
					<view class="row">
						<u-rate
						  :current="g.guide_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>{{g.guide_workyears}}年</span>
			  </view>
			<!--  <view class="guide-info-item">
				  <span class='info-text'>服务人数：</span>
				  <span>{{g.guide_workyears}}年</span>
			  </view>
			  <view class="guide-info-item">
				  <span class='info-text'>出单：</span>
				  <span>{{g.guide_workyears}}单</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'>
			<view class="u-skeleton-rect">
				<swiper
				  indicator-dots
				  :autoplay="false"
				  :interval="1000"
				  style="height:170px;width: 300px;"
				>
				  <block v-for="(item, index) in g.pic_url" :key="index">
					<swiper-item>
					  <video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
					   :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.pic_url" mode=""></image>
					</swiper-item>
				  </block>
				</swiper>
			</view>
			<view style="margin-top: 15px ;font-size: 16px;" >
				{{g.car_model!=''?g.car_model:'无'}}
			</view>
			<view style="margin-top: 5px;" >
				<u-rate
				  :current="g.car_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>{{g.carcolor_name}}</span>
			  </view>
			  <view class="guide-info-item">
				  <span class='info-text'>座位数：</span>
				  <span>{{g.ride_num}}座</span>
			  </view>
			  <view class="guide-info-item">
				  <span class='info-text'>分类：</span>
				  <span>{{g.guide_workyears}}</span>
			  </view>
			</view>
		</view>
	  
   
  </view>
</template>

<script>

import hParse from "@/components/u-parse/parse.vue";
export default {
  components: {
    hParse,
    // share
  },
  data() {
    return {
      mainColor: "",
      activeStyle: "",
	  pageTitle: "导游详情",
	  type:1,//1为
	  g:{},
	  detailContent:'',
	  imgs:[]
    };
  },

  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: '导游详情',
				});
			}else{
				uni.setNavigationBarTitle({
				  title: '车辆详情',
				});
			}
		}
		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: {

   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>
