<template>
	<view class="guidecarOrderdetails" :style="{'height':contentHeight}">
		<view class="u-skeleton-rect">
			<swiper
			  indicator-dots
			  :autoplay="false"
			  :interval="1000"
			  style="height:100vw;"
			>
			  <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>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "详情",
				GoodsId:367471,
				g:{},
				imgs:[]
			}
		},
		onLoad(option){
			if(option && option.GoodsId){
				this.GoodsId = option.GoodsId
			}
			this.init()//商品详情
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 
			 

		},
		mounted() {
			
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			init(){
				uni.showLoading({
				  title: "加载中",
				});
				this.request2(
					{
						url: '/api/AppletGuideCar/GetAppletSDGoodsInfo',
						data: {
							GoodsId:this.GoodsId
						}
					},
							
				  (res) => {
					
					 uni.hideLoading();
					this.g = res.data.goods;	
					
					this.g.pic_url.forEach((x) => {
					  this.imgs.push(x.pic_url);
					});
				  }
				);
			},
			//点击跳转
			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>
.guidecarOrderdetails{
	background: #FFFFFF;
}

</style>
