<template>
    <!-- @touchstart="touchstartFunc" -->
    <div class="panoramic-components">
        <!-- 刷新按钮 -->
        <div class="refresh-btn" @click="refreshPage">
            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
        </div>
        <!-- 引导用户  触屏图片 -->
        <div class="prompt-720-img" :class="isTouchstart ? '' : 'img-hide'">
            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
        </div>
        <!-- 封面引导 蒙城图 -->
        <!-- <div class="krpano-img-before" :class="!videoBefore ? 'krpano-img-after' : ''">
            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
        </div> -->
        <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
        </div>
        <!-- 免责声明 -->
        <div class="disclaimer">
            <a
                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
        </div>
        <!-- krpano -->
        <div id="panoramic-krpano"></div>
    </div>
</template>

<script>
    // import BScroll from 'better-scroll';
    const panoramicXML = require("./panoramic.xml");
    export default {
        data() {
            return {
                tabList: [],
                selectTabIndex: 0,
                isPayVoice: false,
                isPromptShow: true,
                sceneObj: { id: '', name: '' },
                isTouchstart: false, // 是否触屏一次
                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
                videoBefore: true,
                isPlayImg: false, // 暂停按钮出现
                bgMusicList: {
                    '1': 'https://dm.static.elab-plus.com/djp-bg-2.mp3',
                    '2': 'https://dm.static.elab-plus.com/typ-bg-2.mp3',
                    '3': 'https://dm.static.elab-plus.com/zyp-bg-2.mp3'
                },
                maxTabList: {
                    '1': [
                        {
                            id: 'YZ', name: '私家庭院',
                            music: 'https://dm.static.elab-plus.com/djp-yz-3.mp3',  //语音没有给
                            videourl: "https://dm.static.elab-plus.com/sjty-A-floor.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/sjty-A-floor.jpg',
                            isShowHotspot: false,
                        },
                        {
                            id: 'XJEGC', name: '夏加尔广场',
                            music: 'https://dm.static.elab-plus.com/djp-xjegc-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/djp-xjegc-1.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/djp-xjegc-2.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/djp-xjegc-bg.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        },
                        {
                            id: 'FLXZ', name: '芙乐小镇',
                            music: 'https://dm.static.elab-plus.com/djp-flxz-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/djp-flxz-1.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/djp-flxz-2.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/djp-flxz-bg.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        }
                    ],
                    '2': [
                        {
                            id: 'YZ', name: '私家庭院',
                            music: 'https://dm.static.elab-plus.com/sjty-D-music.mp3',  //语音没有给
                            videourl: "https://dm.static.elab-plus.com/sjty-D-floor.mp4", // 有狗的
                            bgImg: 'https://dm.static.elab-plus.com/sjty-D-floor.jpg', // 有狗的
                            isShowHotspot: false,
                        },
                        {
                            id: 'XRKHY', name: '向日葵花园',
                            music: 'https://dm.static.elab-plus.com/typ-xrkhy-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/typ-xrkhy-1.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/typ-xrkhy-2.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/typ-xrkhy-bg.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        },
                        {
                            id: 'XYCHY', name: '无影教堂',
                            music: 'https://dm.static.elab-plus.com/typ-wyjt-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/typ-wyjt-1.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/typ-wyjt-3.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/typ-wyjt-bg.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        },
                        {
                            id: 'MNHY', name: '莫奈花园',
                            music: 'https://dm.static.elab-plus.com/typ-mnhy-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/hqc-file/zyp-mnhy-10-12-one.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/hqc-file/zyp-mnhy-10-12-two.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/hqc-file/typ-mnhy-bg-10-12.jpeg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        }
                    ],
                    '3': [
                        {
                            id: 'YZ', name: '私家庭院',
                            music: 'https://dm.static.elab-plus.com/sjty-G-music.mp3',  //语音没有给
                            videourl: "https://dm.static.elab-plus.com/sjty-G-floor.mp4", // 有狗的
                            bgImg: 'https://dm.static.elab-plus.com/sjty-G-floor.jpg', // 有狗的
                            isShowHotspot: false,
                        },
                        {
                            id: 'ZJGJD', name: '最佳观景点',
                            music: 'https://dm.static.elab-plus.com/zyp-zjgjd-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/zyp-zjgjd-1.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/zyp-zjgjd-2.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/zyp-zjgjd-bg.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        },
                        {
                            id: 'BSZY', name: '半山庄园',
                            music: 'https://dm.static.elab-plus.com/zyp-bszy-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/zyp-bszy-1.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/zyp-bszy-2.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/zyp-bszy-bg.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        },
                        {
                            id: 'PTTY', name: '葡萄田园',
                            music: 'https://dm.static.elab-plus.com/zyp-ptty-3.mp3',
                            videourl: "https://dm.static.elab-plus.com/hqc-file/zyp-ptty-10-12-one.mp4",
                            videourlTwo: "https://dm.static.elab-plus.com/hqc-file/zyp-ptty-10-12-two.mp4",
                            bgImg: 'https://dm.static.elab-plus.com/hqc-file/zyp-ptty-bg-10-12.jpg',
                            currentUrlName: '',  //当前播放的地址
                            isShowHotspot: true,
                        }
                    ]
                },
            }
        },
        methods: {
            // 更新title
            updateTitle(name) {
                document.title = name;
            },
            // 刷新页面
            refreshPage() {
                let href = window.location.href;
                let route = this.$route;
                let query = route.query;
                let type = this.type;
                let tabObj = this.maxTabList[type][this.selectTabIndex];
                let newLocation = tabObj.id;
                let newHref;
                // 判断是否有 location
                if (query.location) {
                    newHref = href.replace(`location=${query.location}`, `location=${newLocation}`);
                } else {
                    if (JSON.stringify(query).length > 2) {
                        // 当有参数，但是没有location
                        newHref = `${href}&location=${newLocation}`;
                    } else {
                        // 当没有参数的时候
                        newHref = `${href}?location=${newLocation}`;
                    }
                }
                window.location.replace(newHref);
                window.location.reload();
            },
            panoramic() {
				console.warn("***panoramicKrpano***")
                this.panoramicKrpano = document.getElementById('panoramic');
                // 设置播放的场景
                // this.switchScene(this.selectTabIndex);
				// krpano.call("loadscene(scene_yuanjing, null, MERGE, BLEND(1))");
				this.panoramicKrpano.call("loadscene(scene_ceshi, null, MERGE, BLEND(1))");
                // 视频加载完
                window.videoready = () => {
                    this.videoBefore = false;
                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
                    if (!this.isShowOneGuideMask) {
                        // 视频加载完
                        this.isTouchstart = true;
                    }
                    if (this.tipSwiper) {
                        this.controlVoice(this.selectTabIndex, true, true);
                    }
                };
                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
                window.videopausedFunc = () => {
                    // this.refreshPage();
                    // this.switchScene();
                    // 关闭播放的的图片
                    // this.isPayVoice = false;
                    this.refreshPage();
                }
                // 当在视频里面切换不同的场景
                // window.switchScenesType = () => {
                //     this.tipSwiper = false;
                //     this.switchScene();
                // }
                // 声音播放完
                window.musicPlayComplete = () => {
                    this.isPayVoice = false;
                };
                // 播放声音状态
                window.payVoiceStatus = (isPlayStatus) => {
                    this.isPayVoice = isPlayStatus == 'true' ? true : false;
                }
                // 暂停视频，显示图片
                window.switchPlayImg = (isPlayStatus) => {
                    this.isPlayImg = !this.isPlayImg;
                }
            },
            // 点击播放音乐，点击暂停音乐
            // isStartPay 重新播放
            controlVoice(index = this.selectTabIndex, isPayVoice, isStartPay) {
                if (isPayVoice === false) {
                    this.isPayVoice = false;
                } else {
                    this.isPayVoice = isPayVoice ? true : this.isPayVoice = !this.isPayVoice;
                }
                // 获取声音的名称
                let voiceObj = this.tabList[index];
                // // 播放声音
                // if (this.isPayVoice) {
                // 是不是

                this.panoramicKrpano.call(`playsoundMusic(${voiceObj.id},${voiceObj.music},${isStartPay})`);
                // } else {
                //     // 暂停声音
                //     this.panoramicKrpano.call(`pausesoundMusic(${voiceObj.id})`);
                // }

            },
        },
        watch: {
            isTouchstart(val, oldVal) {
                if (val == true) {
                    this.isShowOneGuideMask = true;
                    setTimeout(() => {
                        this.isTouchstart = false;
                        // 当引导图都隐藏后，才能触屏
                        this.panoramicKrpano.call(`suspendedPlay()`);
                    }, 3000);
                }
            }
        },
        mounted() {
			embedpano({
			    // swf: "https://dm.static.elab-plus.com/krpano.swf",
			    swf: "https://dm.static.elab-plus.com/miniProgram/krpano/tour.swf",
			    xml: panoramicXML,
			    target: "panoramic-krpano",
			    html5: "auto",
			    mobilescale: 1.0,
			    passQueryParameters: true,
			    id: "panoramic",
			    onready: this.panoramic,
			});
            // embedpano({
            //     swf: "https://dm.static.elab-plus.com/krpano.swf",
            //     xml: panoramicXML,
            //     bgcolor: "#000",
            //     target: "panoramic-krpano",
            //     passQueryParameters: false,
            //     consolelog: true,
            //     id: "panoramic",
            //     mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
            //     onready: this.panoramic
            // });
            let _that_ = this;
            // this.mySwiper = new Swiper('.swiper-container', {
            //     loop: false,
            //     loopAdditionalSlides: 2,
            //     slidesPerView: 'auto',
            //     preventClicksPropagation: false,
            //     on: {
            //         click: function (e) {
            //             let index = e.target.getAttribute("name");
            //             // 重复点击一个无效
            //             if (!index || _that_.selectTabIndex == index) {
            //                 return false;
            //             }
            //             // 播放按钮隐藏
            //             _that_.isPlayImg = false;
            //             // 暂停现在播放的语音
            //             _that_.controlVoice(_that_.selectTabIndex, false, false);
            //             // 然后赋值
            //             _that_.selectTabIndex = index;
            //             // 滚动到对应的值
            //             _that_.slideToIndex(index);
            //             let name = _that_.tabList[index].name;
            //             // 暂停全部声音
            //             // _that_.panoramicKrpano.call(`closeVoice()`);
            //             // 更新title名称
            //             _that_.updateTitle(name);
            //             // 切换场景
            //             _that_.switchScene(index, true);
            //             // 当切换过场景后，才能播放声音
            //             _that_.tipSwiper = true;
            //             _that_.$emit("setTab", _that_.tabList[index]);
            //         },
            //     },
            // });
            if (this.selectTabIndex != 0) {
                // this.slideToIndex(this.selectTabIndex);
            }
            let name = this.tabList[this.selectTabIndex].name;
            // 更新title名称
            this.updateTitle(name);
            // this.$emit("setTab", this.tabList[this.selectTabIndex]);
        },
        created() {
			console.warn("***this.type***")
            // type 1,2,3  表示 度假派、田园派、庄园派
            this.type = this.$route.query.type || 1;
            this.locationName = this.$route.query.location;
            this.tabList = this.maxTabList[this.type];
            // 寻找对应的场景
            if (this.locationName) {
                this.tabList.map((item, index) => {
                    if (item.id == this.locationName) {
                        // 取对应的值
                        this.sceneObj = item;
                        // 然后滚动到对应的区域
                        this.selectTabIndex = index;
                    }
                });
            } else {
                // 如果没有默认第一个
                this.sceneObj = this.tabList[0];
            }
			console.warn("***this.type***",this.sceneObj)
            // // 监听屏幕大小变化
            // window.addEventListener('resize', ()=>{
            // });
        },
        beforeDestroy() {
            // this.panoramicKrpano.call(`closeVoice()`);
        }
    }
</script>
<style scoped lang="scss">
    @import "index.scss";
</style>