<template>
  <view class="slight-detail" :style="{'padding-top': navHeight + 'px'}" v-if="slightInfo !== null">
    <view class="banner-box" >
      <image class="banner" :src="`${imgUrlPre}/static${slightInfo.coverSrc}`"></image>
	  <image class="vr-btn" v-if="slightInfo.guideVrInfoDTOList.length > 0" @click="preview" src="../static/img/vr_btn.png"></image>
    </view>
	<imt-audio :control="false"  :src="`${imgUrlPre}/static${slightInfo.audioSrc}`"></imt-audio>
    <view class="detail-title">
      {{slightInfo.guideTitle}}
    </view>
	<view class="desc-box">
		<rich-text :nodes="slightInfo.mainText" class="detail-desc">
		</rich-text>
	</view>
    <view class="operate-box">
      <button class="operate-item" open-type="share" @click="share">
		<img class="_icon" src="../static/img/share_icon.png"/>  
        分享
      </button>
     <button class="operate-item" @click="forward" v-show="slightInfo.pointArea==='潮隐海山蟹钳港'">
		<img class="_icon" src="../static/img/nav_icon.png"/>
        前往
      </button>
    </view>
	<image class="back-icon" @click="back" src="../static/img/back_icon.png"></image>
  </view>
</template>

<script>
import ImtAudio from '@/components/imt-audio/imt-audio.vue'
import { getSlightDetail } from '../api/index.js'
export default {
  data() {
    return {
      player: null,
      slightInfo: null,
    }
  },
  components: {
	ImtAudio
  },
  computed: {
	imgUrlPre() {
		return 'https://xqg.xswlsq.cn/hmit-admin'
	},	
  },
  methods: {
	back() {
		uni.navigateBack()
	},
	preview() {
		if (this.slightInfo.guideVrInfoDTOList.length > 0) {
			uni.navigateTo({
				url: 'vr-preview?path=' + this.slightInfo.guideVrInfoDTOList[0].vrSrc
			})
		}
	},
    getInfo(id) {
      getSlightDetail(id).then(res => {
		  if (res.code === 0) {
			  this.slightInfo = res.data
		  }
	  })
    },
	forward() {
		let lat = this.slightInfo.pointLocation.split(',')[0]
		let lng = this.slightInfo.pointLocation.split(',')[1]
		uni.openLocation({
			latitude: Number(lat),
			longitude: Number(lng),
			success: function () {
				console.log('success');
			}
		});
	},
	share() {
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 1,
			summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			success: function (res) {
				console.log("success:" + JSON.stringify(res));
			},
			fail: function (err) {
				console.log("fail:" + JSON.stringify(err));
			}
		})
	}
  },
  onLoad(opt) {
	if (opt.q) {
		const q = decodeURIComponent(opt.q)
		let id = q.split('?id=')[1]
		this.getInfo(id)
	} else {
		this.getInfo(opt.id)
	}
  }
}
</script>
<style>
.plyr__controls{
  background-color: #F5F6F9 !important;
}
</style>
<style lang="scss" scoped>
.slight-detail{
	padding-bottom: 80rpx;
  .back-icon{
	  position: fixed;
	  bottom: 140rpx;
	  left: 35rpx;
	  width: 140rpx;
	  height: 140rpx;
  }
  .banner-box{
      width: 100%;
      height: 398rpx;
	  position: relative;
    .banner{
      width: 100%;
      height: 398rpx;
    }
	.vr-btn{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 140rpx;
		height: 140rpx;
		margin-top: -70rpx;
		margin-left: -70rpx;
	}
  }
  .introduce-box{
    padding-top: 15rpx;
    border-radius: 18rpx;
    height: 125rpx;
    width: 681rpx;
    margin: 28rpx auto;
    background-color: #F5F6F9;
  }
  .detail-title{
    padding-left: 42rpx;
    color: #333;
    font-size: 35rpx;
    font-weight: bold;
  }
  .desc-box{
	padding: 40rpx 35rpx 120rpx;  
  }
  .operate-box{
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    left: 0;
    background-color: #fff;
    font-size: 25rpx;
	height: 118rpx;
	display: flex;
	border-top: 1px solid #F1F1F1;
	button::after{
		border: none;
	}
        .operate-item{
			height: 98rpx;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
		  background-color: #fff;
		  color: #333 !important;
		  font-size: 30rpx !important;
		  border-radius: 0 !important;
		  ._icon{
		    margin-right: 14rpx;
		    height: 30rpx;
			width: 30rpx;
		  }
        }    
  }
}
</style>