<template>
    <!-- <div class="navigation" v-if="orgin!='fashilong'"> -->
    <div class="navigation">
        <div class="wrapper sync" v-show="users.length">
            <div>
                <ul>
                    <li
                        v-for="(user, key) in users"
                        :key="key"
                        @click="user.userId == userId && onSetMic()"
                        :class="[user.role]"
                    >
                        <img
                            :src="
                                user.avatar ||
                                    require('images/vrhouse/avatar_default.jpg')
                            "
                            alt
                        />
                        <span class="voice" v-show="user.onlineStatus && user.voiceStatus != 1">
                            <i
                                class="iconfont"
                                :class="[
                                    user.voiceStatus == 2
                                        ? 'iconscene_mic_open'
                                        : 'iconscene_mic_off',
                                ]"
                            ></i>
                        </span>
                        <span class="status" v-show="!user.onlineStatus">
                            <span> 已离开 </span>
                        </span>
                        <template v-if="user.onlineStatus">
                            <div v-if="user.userId == userId">我</div>
                            <div v-else-if="user.role == 'leader'">发起人</div>
                        </template>
                    </li>
                    <li v-if="users.length < 5" class="add" @click="onInvite">
                        <i class="iconfont icon_plus"></i>
                    </li>
                </ul>
            </div>
            <button @click="showExit = true">退出</button>
        </div>
        <div class="chat" ref="chat">
            <transition-group appear tag="ul">
                <li v-for="item in message" :key="item.id">
                    <div>
                        <div class="message">
                            <img
                                :src="
                                    item.avatar ||
                                        $config.getStaticResource(
                                            'img/apps/vrhouse/avatar_default.jpg'
                                        )
                                "
                                alt
                            />
                            <span v-if="item.nickname" v-html="`「${item.nickname}」`"></span>
                            <span>{{ item.content }}</span>
                        </div>
                    </div>
                </li>
            </transition-group>
        </div>
        <x-window :show="showExit" :show-close="false">
            <div class="exit-tips">
                <h4>温馨提示</h4>
                <div>确定要结束“一起逛”吗？</div>
                <button type="button" @click="onExit(false)">继续逛</button>
                <button type="submit" @click="onExit(true, true)">结束</button>
            </div>
        </x-window>
        <x-window :show="showDissolve" :show-close="false">
            <div class="exit-tips">
                <h4>结束提醒</h4>
                <div>
                    发起人已结束一起逛模式，房间即
                    <br />将关闭
                </div>
                <button type="button" @click="onExit(true, true)">确定</button>
            </div>
        </x-window>
        <x-window :show="showFull" :show-close="false">
            <div class="exit-tips">
                <h4>温馨提示</h4>
                <div>一起逛房间已满人，是否继续逛</div>
                <button type="button" @click="onExit(true, true)">
                    继续逛
                </button>
                <button type="submit" @click="onBack()">取消</button>
            </div>
        </x-window>
        <x-window :show="showOver" :show-close="false">
            <div class="exit-tips">
                <h4>温馨提示</h4>
                <div>一起逛已结束了，是否继续逛</div>
                <button type="button" @click="onExit(true, true)">
                    继续逛
                </button>
                <button type="submit" @click="onBack()">取消</button>
            </div>
        </x-window>
        <Paint :show-paint="showPaint" />
    </div>
</template>
<script>
import { mapGetters } from "vuex"
import XWindow from "../shared/XWindow"
import browser from "@/utils/browser"
import Paint from "./paint"
import { startCall, stopCall, sendToApp, sendToH5, getRole, getUserId, close } from "../../socket"
export default {
    components: {
        Paint,
        XWindow,
    },
    data() {
        return {
            role: null,
            userId: null,
            users: [],
            showExit: false,
            showDissolve: false,
            showOver: false,
            showFull: false,
            showCart: false,
            showPaint: false,
            goods: null,
            chats: [],
            orgin:browser.urlQueryValue('origin').toLowerCase(),
        }
    },
    watch: {
        users() {
            if (!this.showCart) {
                this.showCart = true
                sendToApp("cart", true)
            }
        },
        message() {
            this.$nextTick(() => {
                setTimeout(() => {
                    // this.chats.shift()
                }, 3000)
            })
            // this.$nextTick(() => {
            //     this.message.length &&
            //         this.$refs.chat
            //             .querySelector("li:last-child")
            //             .scrollIntoView({
            //                 behavior: "smooth",
            //                 block: "end",
            //                 inline: "end",
            //             });
            // });
        },
    },
    computed: {
        ...mapGetters({
            player: "player",
        }),
        message() {
            return this.chats
        },
    },
    created() {
        if(browser.urlQueryValue('origin').toLowerCase() == '4dplaza'){
            this.showPaint = true
        }

        this.role = getRole()
        this.userId = getUserId()

        const self = this
        function syncAction(data) {
            if (data.type == "full") {
                self.isNoTips() && (self.showFull = true)
                return
            }
            // 更新用户列表
            if (data.type == "users") {
                let leader
                for (let i = 0; i < data.data.length; i++) {
                    if (data.data[i].role == "leader") {
                        leader = data.data.splice(i, 1)
                        break
                    }
                }
                if (leader) {
                    data.data = leader.concat(data.data)
                }
                if (!data.data.some(item => item.role == "leader")) {
                    // 房间已解散
                    self.isNoTips() && (self.showOver = true)
                    return
                }
                self.users = data.data
            } else if (data.type == "userChange") {
                let leader
                for (let i = 0; i < data.data.length; i++) {
                    if (data.data[i].role == "leader") {
                        leader = data.data.splice(i, 1)
                        break
                    }
                }
                if (leader) {
                    data.data = leader.concat(data.data)
                }
                self.users = data.data
                if (self.role == "leader" && data.user.role != "leader") {
                    self.showMessage(`${data.isOnline ? "进入" : "离开"}房间`, data.user)
                } else if (self.role != "leader" && data.user.role == "leader") {
                    data.user.nickname = "发起人"
                    self.showMessage(`${data.isOnline ? "进入" : "离开"}房间`, data.user)
                }
            } else if (data.type == "online") {
                if (self.role == "leader" && data.user.role != "leader") {
                    self.showMessage(`${data.isOnline ? "进入" : "退出"}房间`, data.user)
                }
            }
            // 解散房间
            else if (data.type == "dissolve") {
                self.isNoTips() && (self.showDissolve = true)
            } else if (data.type == "close") {
                self.isNoTips() && (self.showOver = true)
            } else if (data.type == "tagShow") {
                self.$bus.emit("shop/tag/show", data.data)
            } else if (data.type == "tagSwitch") {
                self.$bus.emit("shop/tag/switch", data.data)
            } else if (data.type == "tagBigimg") {
                self.$bus.emit("shop/tag/bigimg", data.data)
            }
        }

        // function userTagShow(show) {
        //     self.showPaint = !show
        //     sendToH5({
        //         type: "tagShow",
        //         data: show,
        //     })
        // }

        // function userTagSwitch(index) {
        //     sendToH5({
        //         type: "tagSwitch",
        //         data: index,
        //     })
        // }

        this.$once("hook:beforeDestroy", () => {
            this.$bus.off("shop/sync/action", syncAction)
            if (this.role == "leader") {
                // this.$bus.off("shop/tag/onshow", userTagShow)
                // this.$bus.off("shop/tag/onswitch", userTagSwitch)
            }
        })
        this.$bus.on("shop/sync/action", syncAction)

        if (this.role == "leader" && this.orgin!='fashilong') {
            sendToApp("invite")
            // this.$bus.on("shop/tag/onshow", userTagShow)
            // this.$bus.on("shop/tag/onswitch", userTagSwitch)
        }
        
        if (browser.urlHasValue("shopping") && this.player.progres != -1) {
            this.$bus.on("loaded", () => {
                startCall()
                sendToApp('ready',this.$config.projectNum)
            })
        } else {
            startCall()
            sendToApp('ready',this.$config.projectNum)
        }

        window.CHECKEXIT = function() {
            self.showExit = true
        }
    },
    destroyed() {
        window.CHECKEXIT = null
    },
    methods: {
        onInvite() {
            sendToApp("invite")
        },
        onSetMic() {
            sendToApp("mic")
        },
        onExit(isExit, isNewRoom) {
            this.showExit = false
            this.showDissolve = false
            this.showFull = false
            this.showOver = false
            if (isExit) {
                if (this.goods) {
                    if (this.goods.realShopUrl) {
                        // 外部链接时隐藏购物车
                        sendToApp("cart", false)
                        window.location.href = this.goods.realShopUrl
                    } else {
                        window.parent.wx.miniProgram.navigateTo({
                            url: "/pages/goods/goods?id=" + this.goods.id,
                        })
                    }
                } else {
                    if (isNewRoom) {
                        sendToApp("newRoom")
                        setTimeout(() => {
                            this.$parent.setPage("Home")
                        }, 300)
                    } else {
                        stopCall()
                        sendToApp("exit")
                    }
                }
            }
            this.goods = null
        },
        onBack() {
            this.showExit = false
            this.showDissolve = false
            this.showFull = false
            this.showOver = false
            stopCall()
            sendToApp("back")
        },
        isNoTips() {
            return !this.showExit && !this.showFull && !this.showDissolve && !this.showOver
        },
        exitToDetail(goods) {
            this.goods = goods
            this.showExit = true
        },
        showMessage(content, user) {
            this.chats.push({
                id: `${Date.now()}${this.chats.length}`,
                avatar: user.avatar,
                nickname: user.nickname,
                content: content,
            })

            setTimeout(() => {
                this.chats.shift()
            }, 1500)
        },
    },
}
</script>
<style lang="scss" scoped>
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.8rem;
    height: 1.5rem;
    z-index: 999;
    .wrapper {
        padding: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 0.15rem;
        background-color: rgba(0, 0, 0, 0.3);
        &.sync {
            &::before,
            &::after {
                content: "";
                top: 0;
                left: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                border: 2px solid @color;
                border-radius: 50%;
                opacity: 0;
                z-index: -1;
            }
            &::before {
                background: rgba(5, 200, 174, 0.6) !important;
                animation: shadow1 1.5s ease-out;
                animation-iteration-count: infinite;
                box-shadow: 1px 1px 30px @color;
            }
            &::after {
                background: rgba(5, 200, 174, 0.6) !important;
                animation: shadow2 1.5s ease-out;
                animation-iteration-count: infinite;
                box-shadow: 1px 1px 30px @color;
            }
        }
        > div {
            flex: 1;
            width: 100%;
            height: 100%;
            ul {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }
            li {
                position: relative;
                width: 1.1rem;
                height: 100%;
                margin-right: 0.3rem;
                border-radius: 0.15rem;
                overflow: hidden;
                &.add {
                    background: rgba(255, 255, 255, 0.7);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i {
                        font-size: 1rem;
                        margin-top: 2px;
                    }
                }
                img {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    border-radius: 0.15rem;
                }
                span.voice {
                    padding: 0.01rem 0.04rem;
                    position: absolute;
                    right: 0.1rem;
                    top: 0.1rem;
                    border-radius: 0.1rem;
                    background-color: rgba(0, 0, 0, 0.5);
                    i {
                        font-size: 0.3rem;
                        &.iconscene_mic_off {
                            color: #f56c6c;
                        }
                        &.speak {
                            animation: speak 1s ease-out;
                            animation-iteration-count: infinite;
                        }
                    }
                }
                span.status {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    color: #fff;
                    left: 0;
                    top: 0;
                    font-size: 0.2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span {
                        white-space: nowrap;
                    }
                }
                div {
                    padding: 0.025rem;
                    position: absolute;
                    left: 0;
                    bottom: -0.01rem;
                    font-size: 0.2rem;
                    border-bottom-left-radius: 0.15rem;
                    white-space: nowrap;
                    padding-left: 0.05rem;
                    padding-right: 0.1rem;
                }
                &.leader {
                    div {
                        background: linear-gradient(
                            to right,
                            #ed5d18 0%,
                            rgba(255, 255, 255, 0.5) 100%
                        );
                    }
                }
                &.customer {
                    div {
                        background: linear-gradient(
                            to right,
                            #ffcd3c 0%,
                            rgba(255, 255, 255, 0.5) 100%
                        );
                    }
                }
            }
        }
        > button {
            color: #fff;
            width: 1.4rem;
            height: 0.8rem;
            border: none;
            border-radius: 0.1rem;
            background-color: #f56c6c;
            font-size: 0.3rem;
        }
    }
}
.exit-tips {
    padding: 0.8rem;
    padding-bottom: 0;
    h4 {
        margin: 0;
        font-size: 0.5rem;
    }
    div {
        margin: 0.7rem 0;
        font-size: 0.37rem;
    }

    button {
        width: 100%;
        margin-bottom: 0.5rem;
        background-color: #fff;
        font-size: 0.4rem;
        color: #444;
        height: 1.1rem;
        border: none;
        border-radius: 0.15rem;
        &[type="submit"] {
            color: #fff;
            background-color: transparent;
            border: solid 1px rgba(255, 255, 255, 0.85);
        }
    }
}
.chat {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.7rem;
    z-index: 0;
    li {
        margin-top: 0.2rem;
        > div {
            display: inline-block;
        }
        div.message {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 0.7rem;
            border-radius: 0.7rem;
            background: rgba(0, 0, 0, 0.1);
            padding-right: 0.2rem;
            img {
                width: 20px;
                height: 20px;
                overflow: hidden;
                border-radius: 50%;
                margin-left: 0.1rem;
            }
            span {
                font-size: 14px;
            }
        }
    }
}

.v-enter {
    opacity: 0;
    transform: translateY(20px);
}
.v-leave-to {
    opacity: 0;
    transform: translateY(-50px);

    //transform: translateY(-200px);
}

.v-enter-active,
.v-leave-active {
    transition: all 0.6s ease;
}

.v-move {
    transition: all 0.6s ease;
}
.v-leave-active {
    position: absolute;
}

/deep/.share-x-window {
    left: 1.2rem;
    right: 1.2rem;
    border-radius: 0.15rem;
    @media (orientation: landscape) {
        left: 50% !important;
        right: auto !important;
    }
}
@keyframes shadow1 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes shadow2 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(0.6);
        opacity: 0;
    }
}
@keyframes speak {
    0% {
        color: #fff;
    }
    30% {
        color: #f4cba6;
    }
    50% {
        color: #fbb77a;
    }
    100% {
        color: #e75f04;
    }
}
</style>
