<template>
    <div class="guides" @touchmove.prevent :class="{ disable: !status.isPlaying && !modeCanSwitch }">
        <div class="frame">
            <ul>
                <li v-for="(item, key) in roomLabels" :key="key" :class="{ active: key == index }" @click="onFrameActive(key)">
                    <div class="content">
                        <span>{{ item.label }}</span>
                    </div>
                    <div class="progress" v-if="status.isPlaying">
                        <div class="value" :style="{ width: progress + '%' }"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
// import config from "@/config"
import { mapGetters } from 'vuex'
// import { flyToNewMode, play } from "@/core"
import { backgroundMusicPlayer } from '@/utils/sounds'
// import transitions from "@/core/util/transitions"
let frame
export default {
    props: {
        show: Boolean,
    },
    data() {
        return {
            index: -1,
            progress: 0,
            disable: false,
        }
    },
    created() {
        let timer = null
        // play.on("guide/play/start", index => {
        //     this.onRoomPlay(true, false)
        //     this.$store.commit("guide/SetStatus", {
        //         isPlaying: true,
        //     })
        // })

        // play.on("guide/play/pause", index => {
        //     this.onRoomPlay(false)
        //     this.$store.commit("guide/SetStatus", {
        //         isPlaying: false,
        //     })
        // })

        // play.on("guide/play/stop", () => {
        //     this.onRoomPlay(false, true)
        //     this.$store.commit("guide/SetStatus", {
        //         isPlaying: false,
        //     })
        //     this.$emit("end")
        // })

        // play.on("guide/play/playing", index => {
        //     this.$store.commit("guide/SetIndex", index)
        // })

        // play.on("guide/play/flyToStart", index => {
        //     this.$store.commit("guide/SetIndex", index)
        // })
    },
    mounted() {
        frame = new Sly(this.$el.querySelector('.frame'), {
            horizontal: !0,
            itemNav: 'centered',
            smart: !0,
            scrollTrap: !0,
            scrollBy: 1,
            mouseDragging: !0,
            touchDragging: !0,
            speed: 300,
            dragHandle: !0,
            dynamicHandle: !0,
            clickBar: !0,
            scrollSource: this.$el,
            activateOn: null,
        }).init()

        window.__scrollbars.push(frame)
        this.$nextTick(() => {
            frame.reload()
            this.$emit('init')
        })
    },
    watch: {
        show() {
            this.$nextTick(() => {
                if (this.show) {
                    // if (frame) {
                    //     let index = window.__scrollbars.indexOf(frame)
                    //     if (index != -1) {
                    //         window.__scrollbars.splice(index, 1)
                    //         frame.destroy()
                    //     }
                    //     frame = new Sly(this.$el.querySelector(".frame"), {
                    //         horizontal: !0,
                    //         itemNav: "centered",
                    //         smart: !0,
                    //         scrollTrap: !0,
                    //         scrollBy: 1,
                    //         mouseDragging: !0,
                    //         touchDragging: !0,
                    //         speed: 300,
                    //         dragHandle: !0,
                    //         dynamicHandle: !0,
                    //         clickBar: !0,
                    //         scrollSource: this.$el,
                    //         activateOn: null,
                    //     }).init()
                    //     window.__scrollbars.push(frame)
                    //     this.$nextTick(() => {
                    //         frame.reload()
                    //         if(this.status.isPlaying){
                    //             frame.activate(this.index)
                    //         }
                    //     })
                    // }
                    if (this.status.isPlaying) {
                        frame.activate(this.index)
                    }
                }
            })
        },
        index() {
            this.$nextTick(() => {
                this.index != -1 && frame.activate(this.index)
            })
        },
        disable() {
            this.$emit('disable', this.disable)
        },
    },
    computed: {
        ...mapGetters({
            mode: 'mode',
            page: 'page',
            modeCanSwitch: 'modeCanSwitch',
            musicIndex: 'scene/musicIndex',
            plays: 'guide/plays',
            status: 'guide/status',
            roomLabels: 'guide/roomLabels',
            metadata: 'scene/metadata',
        }),
    },
    methods: {
        onFrameActive(index) {
            let room = this.roomLabels[index]
            this.disable = true
            this.$nextTick(() => {
                play.pause()
                play.chooseFragment(room.index, 0, () => {
                    //可能没执行函数doAfterFlyToPano，所以这里补上，逻辑也合理。
                    if (play.control.flyToSingleCap) {
                        play.control.flyToSingleCap = false
                    }
                    this.disable = false
                })
                this.$store.commit('guide/SetIndex', room.index)
                this.index = index
                //frame.activate(this.index)
            })
        },
        onGuidePlay() {
            if (this.status.isPlaying) {
                play.pause()
            } else {
                if (this.index == -1) {
                    this.index = 0
                }
                this.disable = true
                let room = this.roomLabels[this.index]
                // 当前房间重新开始播放
                play.chooseFragment(room.index, 0, () => {
                    //可能没执行函数doAfterFlyToPano，所以这里补上，逻辑也合理。
                    if (play.control.flyToSingleCap) {
                        play.control.flyToSingleCap = false
                    }
                    play.start(() => {
                        this.disable = false
                    })
                })
            }
        },
        onRoomPlay(state, reset) {
            if (!state) {
                this.timer && transitions.cancel(this.timer)
                this.progress = 100
                setTimeout(() => {
                    this.progress = 0
                    if (reset) {
                        this.index = 0
                        this.$nextTick(() => {
                            this.index = -1
                        })
                    }
                }, 200)
                return
            }
            let data = this.roomLabels[this.index]
            if (!data) {
                return
            }
            let time = parseInt(Number(data.cTime).toFixed(3) * 1000)
            this.timer = transitions.start(progress => {
                if (progress == 1) {
                    this.progress = 0
                    this.index++
                    this.onRoomPlay(state)
                } else {
                    this.progress = progress * 100
                }
            }, time)
        },
        reload() {
            this.$nextTick(() => {
                frame.reload()
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.guides {
    position: relative;
    height: 100%;
    width: 100%;
    touch-action: none;
    color: rgba(255, 255, 255, 0.5);
    &.overflow {
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0.52632rem;
            height: 100%;
            background: linear-gradient(270deg, rgba(8, 8, 8, 0) 0%, #000000 100%);
        }
        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 0.52632rem;
            height: 100%;
            background: linear-gradient(90deg, rgba(8, 8, 8, 0) 0%, #000000 100%);
        }
    }
}
.frame {
    height: 100%;
}
ul {
    display: flex;
    height: 100%;
    li {
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
        margin-right: 4px;
        &:last-child {
            margin-right: 0px;
        }
        &.active {
            color: #00c2c4;
            .progress {
                display: block;
            }
        }
        .content {
            display: flex;
            width: 90px;
            height: 100%;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 0.08rem;
        }
        .progress {
            display: none;
            position: absolute;
            left: 2px;
            bottom: 2px;
            right: 2px;
            height: 2px;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.3);
            .value {
                height: 100%;
                width: 0;
                border-radius: 4px;
                background-color: rgb(0, 194, 196);
            }
        }
    }
}
</style>
