<template>
    <div class="header app" v-if="params.title" @touchmove.prevent>
        <div class="left show" >
            <div class="back" v-if="isVR" @click="handleVR(0)">
                <i class="iconfont icon_back"></i>
            </div>
        </div>
        <div
            v-show="!isVR"
            class="title"
            :class="{up:showDescription,empty: false}"
            @click="onShowDescription"
        >
            <div>
                <span>
                    {{params.title}}
                </span>
                <i class="iconfont iconshow_drop-down"></i>
            </div>
        </div>
        <div
            class="right"
            v-show="!isVR"
            :class="{ more: showMore}"
            @click="onShowMore"
        >
            <i class="iconfont iconshow_more"></i>
            <keep-alive>
                <transition
                    appear
                    name="custom-classes-transition"
                    enter-active-class="animated fadeInUp short faster"
                    leave-active-class="animated fadeOutDown short faster"
                >
                    <div v-if="showMore">
                        <ul>
                            <!-- <li>
                                <i class="iconfont iconshow_more_ruler"></i>
                                <span>菜单</span>
                            </li> -->
                            <li @click="handleVR(1)">
                                <i class="iconfont iconshow_more_vr"></i>
                                <span>VR模式</span>
                            </li>
                            <li v-if="false">
                                <i class="iconfont iconshow_more_music"></i>
                                <b>
                                    <i class="iconfont iconshow_more_finish"></i>
                                </b>
                                <span
                                    v-html="
                                        '音乐'
                                    "
                                ></span>
                            </li>
                            <!-- <li @click.stop="onMenuClick('share')">
                                <i class="iconfont iconshow_more_share"></i>
                                <span>分享链接</span>
                            </li> -->
                        </ul>
                        <template>
                            <div class="home">
                                <a href="/">
                                    <img
                                        :src="require('@/assets/images/icons/logo_zh.png')"
                                        alt=""
                                    />
                                </a>
                            </div>
                        </template>
                    </div>
                </transition>
            </keep-alive>
        </div>
        <transition
            appear
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp short faster"
            leave-active-class="animated fadeOutDown short faster"
        >
            <div
                class="content"
                v-if="showDescription"
                @click="onShowDescription"
            >
                <div>
                    <div v-html="params.description||'四维看看，让空间说故事'"></div>
                </div>
            </div>
        </transition>
        <template v-if="true">
            <transition
                appear
                name="custom-classes-transition"
                enter-active-class="animated slideInUp faster"
                leave-active-class="animated slideOutDown faster"
            >
                <div class="app-share" v-if="false">
                    <ul>
                        <li @click="onShare('weixin')">
                            <i class="iconfont icon_wechat"></i>
                            <div>微信</div>
                        </li>
                        <li @click="onShare('weixinFriend')">
                            <i class="iconfont icon_friend"></i>
                            <div>朋友圈</div>
                        </li>
                        <li @click="onShare('qq')">
                            <i class="iconfont icon_qq"></i>
                            <div>QQ</div>
                        </li>
                        <li @click="onShare('copy')">
                            <i class="iconfont iconlink"></i>
                            <div>复制链接</div>
                        </li>
                    </ul>
                    <div @click="showShare = false">取消</div>
                </div>
            </transition>
        </template>
        <div class="url-share" v-show="false">
            <div>
                <div class="tips">
                    <h4>分享</h4>
                    <i class="iconfont iconshow_cancel" @click="showCopy = false"></i>
                </div>
                <div class="url">分享链接</div>
                <div class="btns">
                    <button class="ui-button cancel" @click="showCopy = false">
                        取消
                    </button>
                    <button class="ui-button submit btn-share-copy" :data-clipboard-text="shareURL">
                        分享
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    props:['title','description','params'],
    data() {
        return {
           showDescription:false,
           showMore:false,
           shareURL:'',
           isVR:false
        }
    },

    methods: {
      onShowDescription(){
          this.showDescription = !this.showDescription
          this.showMore = false
      },
      onShowMore(){
          this.showMore = !this.showMore
          this.showDescription = false
      },
      handleVR(type){
        this.$iosGrantedTips(data=>{
          if (data.code==1) {
            let ele = document.getElementById('showifr');
            this.isVR =  !!type

            this.$bus.emit('isVR',!!type)

            ele.contentWindow.postMessage({
                source: "mingyuan",
                event: type?'vr-in': 'vr-out',
            },"*")
          }
          else{
            this.$alert({content:'运动和方向访问失败，您需要完全关闭此应用，然后再次打开，并允许访问运动与方向'})
          }
        })
        
      }
    },

    mounted(){
    }
}
</script>
<style lang="less" scoped>
.disable{
    opacity: 1;
}
.header {
    font-size: 16px;
    position: absolute;
    top: 12px;
    left: 0;
    height: 44px;
    width: 100%;
    z-index: 101;
    color: #fff;
    display: flex;
    align-items: center;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    &.app {
        top: 1rem;
    }
    .left {
        width: 40px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &.show {
            visibility: visible;
            pointer-events: auto;
            .back {
                visibility: visible;
            }
        }
        .back {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            i {
                font-size: 14px;
            }
        }
        .back-pano {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 15px;
            i {
                font-size: 14px;
            }
        }
    }
    .right {
        position: relative;
        width: 1.28rem;
        height: 100%;
        padding-right: 15px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        > i {
            font-size: 20px;
        }
        > div {
            position: absolute;
            display: flex;
            flex-direction: column;
            right: 10px;
            top: 50px;
            padding: 4px 16px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            &::after {
                content: "";
                position: absolute;
                top: -5px;
                right: 10px;
                width: 0;
                height: 0;
                border-width: 0 5px 5px;
                border-style: solid;
                border-color: transparent transparent rgba(0, 0, 0, 0.5);
            }
            &.flex {
                li {
                    span {
                        flex: 1;
                        width: auto;
                        // min-width: 2.8rem;
                    }
                }
            }
            li {
                position: relative;
                display: flex;
                align-items: flex-start;
                margin-top: 0.3rem;
                font-size: 0;
                i {
                    position: absolute;
                    left: 0;
                    top: 0;
                    font-size: 16px;
                }
                b {
                    position: absolute;
                    left: 0.32rem;
                    top: 0.33rem;
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background-color: #00c2c4;
                    i {
                        color: #fff;
                        font-size: 12px;
                        transform: scale(0.3, 0.3);
                        top: -4px;
                        left: -3px;
                    }
                }
                span {
                    width: 72px;
                    white-space: nowrap;
                    text-align: left;
                    padding-bottom: 12px;
                    margin-left: 28px;
                    font-size: 14px;
                    text-indent: 8px;
                    padding-right: 8px;
                }
            }

            .home {
                border-top: solid 1px rgba(255, 255, 255, 0.4);
                a {
                    width: 72px;
                    margin-top: 12px;
                    margin-bottom: 0;
                    margin-left: auto;
                    margin-right: auto;
                    display: block;
                    text-decoration: none;
                    overflow: hidden;

                    img {
                        width: 100%;
                        outline: none;
                        border: none;
                    }
                }
            }
        }
    }
    .title {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        font-size: 14px;
        letter-spacing: 1px;
        align-items: center;
        justify-content: center;
        > div {
            display: flex;
            transition: background 0.3s ease, min-width 0.3s ease, border-radius 0.3s ease;
            align-items: center;
            justify-content: center;
            padding-right: 12px;
            padding-left: 12px;
            white-space: nowrap;
            position: absolute;
            height: 100%;
            min-width: 100%;
            overflow: visible;
            pointer-events: none;
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.15) 50%,
                rgba(0, 0, 0, 0) 100%
            );
        }
        span {
            display: inline-block;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80%;
        }
        i {
            transition: all 0.3s;
            position: absolute;
            left: 50%;
            bottom: 0;
            font-size: 0.2rem;
            transform:  translateX(-50%);
            margin-bottom: 0.07rem;
        }

        &.up {
            i {
                transform:  translateX(-50%) rotate(180deg);
            }
            > div {
                min-width: 0;
                //position: static;
                flex-shrink: 0;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 44px;
            }
            &.drak {
                > div {
                    background-color: rgba(0, 0, 0, 0.8);
                }
            }
        }

        &.empty {
            i {
                display: none;
            }
        }
    }
    .content {
        position: absolute;
        top: 60px;
        left: 30px;
        right: 30px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        font-size: 14px;
        text-align: center;
        &.drak {
            background: rgba(0, 0, 0, 0.8);
        }
        > div {
            display: inline-block;
            text-align: left;
            letter-spacing: 1px;
            word-break: break-all;
            white-space: normal;
            line-height: 1.5;
            // h4 {
            //     margin: 0;
            //     padding: 0;
            //     margin-bottom: 0.28rem;
            //     font-size: 0.43rem;
            //     padding-left: 0.18789rem;
            //     width: 100%;
            //     position: relative;
            //     &::before {
            //         content: "";
            //         position: absolute;
            //         left: 0;
            //         top: 50%;
            //         height: 80%;
            //         transform: translateY(-50%);
            //         width: 2px;
            //         background-color: @color;
            //     }
            // }
            /deep/ p {
                word-break: break-word;
            }

            /deep/ a {
                color: @color;
            }
        }
        // &::after {
        //     content: "";
        //     position: absolute;
        //     top: -6px;
        //     left: 50%;
        //     margin-left: -3px;
        //     width: 0;
        //     height: 0;
        //     border-width: 0 7px 6px;
        //     border-style: solid;
        //     border-color: transparent transparent rgba(0, 0, 0, 0.5);
        // }
    }

    .url-share {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.1);
        > div {
            position: absolute;
            left: 0.6rem;
            right: 0.6rem;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 0.31579rem;
            font-size: 0.36842rem;
            .tips {
                display: flex;
                align-items: center;
                justify-content: space-between;
                h4 {
                    margin: 0;
                    font-size: 0.42105rem;
                }
                i {
                    font-size: 0.6rem;
                }
            }
            .url {
                display: -webkit-box;
                color: #fff;
                text-align: center;
                padding: 0.26316rem;
                width: 100%;
                height: 1.8rem;
                margin: 0.7rem 0rem;
                border-radius: 0.07rem;
                line-height: 1.99;
                font-size: 0.36842rem;
                background-color: rgba(0, 0, 0, 0.35);
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                word-wrap: break-word;
                -webkit-line-clamp: 2; //在第几行加省略号
                -webkit-box-orient: vertical;
            }
            .btns {
                display: flex;
                justify-content: space-between;
                button {
                    font-size: 0.36842rem;
                    width: 47%;
                    height: 1.05263rem;
                    border-radius: 1.05263rem;
                    &.submit {
                        background: #00c2c4;
                    }
                }
            }
        }
    }

    .app-share {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        color: @color;
        text-shadow: none;
        i {
            font-size: 2rem;
        }
        ul {
            display: flex;
            justify-content: space-around;
            div {
                text-align: center;
                margin-top: -0.3rem;
                font-size: 0.34rem;
            }
            li {
                padding-bottom: 0.5rem;
            }
        }
        > div {
            font-size: 16px;
            text-align: center;
            padding: 0.5rem;
            border-top: solid 1px #eeeeee;
        }
    }
}

@media (orientation: landscape) {
    .header {
        height: 45px;
        &.app {
            top: 0.2rem;
        }
        .left {
            .back {
                
            }
        }
        .right {
            > i {
                font-size: 20px;
            }
           
        }
        .title {
            font-size: 14px;
        }
        .content {
            padding: 10px;

            > div {
                line-height: 1.5;
            }
        }
    }
}
</style>
<style lang="less">
.animated.short {
    &.faster {
        animation-duration: 0.3s;
    }
    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, 1rem, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
    @keyframes fadeOutDown {
        0% {
            opacity: 1;
        }
        to {
            opacity: 0;
            transform: translate3d(0, 1rem, 0);
        }
    }
}
</style>
