<script setup>
import { RouterLink, RouterView } from "vue-router"
import { onMounted, ref } from "vue"

import { getQrcode, getList, monitorState, Generate, monitorMusic, getDetails } from "./utils/api"
import { ElMessage } from "element-plus"

onMounted(() => {
    // getLoginQrcode()
    getListData()
})

let list = ref([])
let listIndex = ref(null) // 列表选中的 Index

const getListData = () => {
    getList().then(res => {
        if (res.code == 401) {
            getLoginQrcode()
            return
        }

        if (res.code != 200) return
        const data = res.data || []

        data.forEach(element => {
            console.log("element", element.metadataid)
        })

        list.value = data || []
    })
}

let wxloginVisible = ref(false) // 登录弹窗显示状态
let wxloginQrcodeLose = ref(false) // 登录二维码失效状态
let islogin = ref(false) // 登录状态
let token = ""
let qrcode = ref("")

// 获取二维码
const getLoginQrcode = () => {
    getQrcode().then(res => {
        if (res.code == 401) {
            getLoginQrcode()
            return
        }
        if (res.code != 200) return

        const data = res.data || {}
        token = data.token || ""
        qrcode.value = data.qrcode || ""
        wxloginVisible.value = true

        monitorLogin()
    })
}

// 监听扫码状态
let monitorTimer = null
const monitorLogin = () => {
    monitorTimer = setInterval(() => {
        monitorState({ token: token }).then(res => {
            if (res.code == 401) {
                getLoginQrcode()
                return
            }
            console.log(res)
            // code 200 为登录成功 400 是等待 201 是失效
            if (res.code == 400) return

            clearInterval(monitorTimer)

            if (res.code == 201) {
                wxloginQrcodeLose.value = true
            }

            if (res.code == 200) {
                ElMessage({
                    showClose: true,
                    message: res.message,
                    type: "success",
                })
                wxloginVisible.value = false
                getListData()
                localStorage.setItem("token", res.data?.token)
            }
        })
    }, 3000)
}

const handleClose = () => {
    console.log("挂壁了")
    wxloginVisible.value = false
    wxloginQrcodeLose.value = false
    clearInterval(monitorTimer)
}

let textarea = ref("")
let value2 = ref(false)
let modelValue = ref("chirp-v3-5")
let options = ref([
    {
        label: "V2 (老款模型，最长生成1分钟左右)",
        value: "chirp-v2-xxl-alpha",
    },
    {
        label: "V3 (广泛、多才多艺，最多生成2分钟)",
        value: "chirp-v3-0",
    },
    {
        label: "V3.5 (最新模型，更好的歌曲结构，最长生成4分钟）",
        value: "chirp-v3-5",
    },
])

let type = ref("inspiration") //   inspiration 灵感  custom 自定义

const cutType = key => {
    type.value = key
}

let obj = ref({
    "gpt_description_prompt": "", // 描述
    "mv": "chirp-v3-5",
    "make_instrumental": false,
    "tags": null, // 标签
    "prompt": "", // 提示
    "history": null,
    "concat_history": null,
    "type": "gen",
    "duration": null, // 持续时间
    "refund_credits": null, // 优惠
    "stream": true, // 流派
    "infill": null, // 填充物
    "has_vocal": true, // 是否有声音
    "error_type": null,
    "error_message": null,
    "tags": "",
})

// 点击创建音乐
const creativeMusic = () => {
    Generate({ ...obj.value }).then(res => {
        if (res.code == 401) {
            getLoginQrcode()
            return
        }
        if (res.code != 200) {
            ElMessage({
                showClose: true,
                message: res.message,
                type: "error",
            })
            return
        }
        const data = res.data || {}

        monitorMusicState(data.metadataid)
        ElMessage({
            showClose: true,
            message: "提交成功",
            type: "success",
        })
    })
}

// let styleVisible = ref(true) // 风格弹窗状态
// bass, drum, guitar, rock, pop, electro, electronic, metal, heavy metal, heavy metal, heavy metal, heavy metal
let stylelist = ["bass", "drum", "guitar", "rock", "pop", "electro", "electronic", "metal", "heavy metal", "Subscribe", "heavy metal", "beat", "synth", "hard rock", "rap", "catchy", "powerful", "indie pop"]

const addStyle = item => {
    obj.value.tags = obj.value.tags.trim()
    if (obj.value.tags) obj.value.tags += ","

    obj.value.tags += item
}

const handleMusicList = index => {
    let targetlist = list.value || []
    let target = targetlist[index]
    listIndex.value = index
    if (target.status !== "complete") {
        monitorMusicState(target.metadataid)
    } else {
        getMusicDetails(target.id)
    }
}

let monitorMusicTimer = null
// 监听音乐的生成状态
const monitorMusicState = metadataid => {
    clearTimeout(monitorMusicTimer)
    monitorMusicTimer = setTimeout(() => {
        monitorMusic({ metadataid }).then(res => {
            if (res.code == 401) {
                getLoginQrcode()
                return
            }
            if (res.code != 200) return
            const data = res.data || {}
            const dataList = data.list || []

            if (data.status != "complete") {
                monitorMusicState(metadataid)
            }

            let obj = {}
            // let isnoneed = 0 // isnoneed > 0 需要继续监听的意思   submitted streaming 代表生产中
            dataList.forEach((element, index) => {
                // if (element.status != "complete") isnoneed++
                obj[element.sid] = index
            })

            // console.log("isnoneed", isnoneed)

            // if (isnoneed > 0) {
            //     monitorMusicState(metadataid)
            // }

            let targetlist = list.value || []
            targetlist.forEach((element, index) => {
                if (obj[element.sid] >= 0) {
                    targetlist[index] = dataList[obj[element.sid]]
                    delete obj[element.sid]
                }
            })

            for (const key in obj) {
                targetlist.unshift(dataList[obj[key]])
            }
            list.value = targetlist
        })
    }, 10000)
}

let songInfo = ref({}) // 歌详情

const getMusicDetails = id => {
    getDetails({ id }).then(res => {
        if (res.code == 401) {
            getLoginQrcode()
            return
        }
        if (res.code != 200) {
            ElMessage({
                showClose: true,
                message: res.message,
            })
            return
        }

        songInfo.value = res.data

        previewState.value = true
    })
}

const audio = ref(null)
const isPlaying = ref(false)

let previewState = ref(false)
const closeInfo = () => {
    previewState.value = false
}

const playAudio = index => {
    if (index == undefined) {
        index = listIndex.value || 0
    }
    let targetlist = list.value || []
    let target = targetlist[index] || {}
    audio.value.src = target.audio_url || ""
    audio.value.play()
    listIndex.value = index
}

const togglePlayPause = () => {
    if (isPlaying.value) {
        pauseAudio()
    } else {
        playAudio()
    }
}

const updatePlayStatus = () => {
    isPlaying.value = !audio.value.paused
}

const pauseAudio = () => {
    audio.value.pause()
}

const nextAudio = () => {
    if (listIndex.value == null) return
    let targetlist = list.value || []
    let index = listIndex.value
    index = (index + 1) % targetlist.length
    let target = targetlist[index]
    audio.value.src = target.audio_url
    audio.value.play()
    listIndex.value = index
    console.log(audio.value)
}

const prevAudio = () => {
    if (listIndex.value == null) return

    let targetlist = list.value || []
    let index = listIndex.value
    index = (index - 1 + targetlist.length) % targetlist.length

    let target = targetlist[index]
    audio.value.src = target.audio_url
    audio.value.play()

    listIndex.value = index
}

const currentTime = ref(0)
const duration = ref(0)

const updateCurrentTime = () => {
    currentTime.value = audio.value.currentTime
}

const updateDuration = () => {
    duration.value = audio.value.duration
}

const seekAudio = value => {
    audio.value.currentTime = value
}

const formatTime = time => {
    const minutes = Math.floor(time / 60)
    const seconds = Math.floor(time % 60)
    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`
}
</script>

<template>
    <div>
        <div class="flexflex" style="height: calc(100vh - 69px); overflow: auto;">
            <div class="left-box">
                <div class="tab-box">
                    <div class="tab-item" :class="{ 'sel': type == 'inspiration' }" @click="cutType('inspiration')">灵感模式</div>
                    <div class="tab-item" :class="{ 'sel': type == 'custom' }" @click="cutType('custom')">自定义模式</div>
                </div>
                <template v-if="type == 'inspiration'">
                    <div class="description">
                        <div class="title-box flexacenter">
                            <div class="title-left flexacenter">
                                歌曲描述
                                <el-popover placement="right" :width="300" trigger="click" content='描述你想要的音乐风格和主题（例如"关于假日"）。使用流派和氛围，而不是特定的艺术家和歌曲。' :teleported="false">
                                    <template #reference>
                                        <img class="question-icon" src="./assets/img/question-icon.svg" />
                                    </template>
                                </el-popover>
                            </div>
                            <div class="title-right"></div>
                        </div>
                        <el-input v-model="obj.gpt_description_prompt" class="description-input" style="width: 100%;" :rows="4" type="textarea" placeholder="请输入您的歌曲描述，例如：一首关于青春的冷酷的电子歌曲" />
                    </div>
                    <div class="toggle-switch title-box flexacenter">
                        <div class="title-left flexacenter">
                            <el-switch v-model="obj.has_vocal" class="ml-2" style="--el-switch-on-color: #fbd38d; --el-switch-off-color: #ffffff3d;" :active-value="false" :inactive-value="true" />
                            纯音乐
                            <el-popover placement="right" :width="150" trigger="click" content="没有歌词的音乐。" :teleported="false">
                                <template #reference>
                                    <img class="question-icon" src="./assets/img/question-icon.svg" />
                                </template>
                            </el-popover>
                        </div>
                    </div>
                    <div class="section model">
                        <div class="title-box flexacenter">
                            <div class="title-left flexacenter">
                                音乐模型
                                <el-popover placement="right" :width="150" trigger="click" content="官方suno音乐模型" :teleported="false">
                                    <template #reference>
                                        <img class="question-icon" src="./assets/img/question-icon.svg" />
                                    </template>
                                </el-popover>
                            </div>
                        </div>

                        <el-select v-model="modelValue" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select" :teleported="false">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
                </template>
                <template v-else>
                    <div class="toggle-switch title-box flexacenter">
                        <div class="title-left flexacenter">
                            <el-switch v-model="obj.has_vocal" style="--el-switch-on-color: #fbd38d; --el-switch-off-color: #ffffff3d;" :active-value="false" :inactive-value="true" />
                            纯音乐
                            <el-popover placement="right" :width="150" trigger="click" content="没有歌词的音乐。" :teleported="false">
                                <template #reference>
                                    <img class="question-icon" src="./assets/img/question-icon.svg" />
                                </template>
                            </el-popover>
                        </div>
                    </div>

                    <div class="lyric">
                        <div class="title-box flexacenter">
                            <div class="title-left flexacenter">
                                歌词
                                <el-popover placement="right" :width="300" trigger="click" content="随机生成歌词，自己写，或者从Al那里得到一些帮助。使用两首诗（8行）获得最佳效果。" :teleported="false">
                                    <template #reference>
                                        <img class="question-icon" src="./assets/img/question-icon.svg" />
                                    </template>
                                </el-popover>
                            </div>
                            <div class="title-right flexacenter">
                                <!-- <el-popover popper-class="type-popover" placement="right" :width="280" trigger="click" :teleported="false">
                                    <div class="lyric-type flexflex">
                                        <div class="lyric-type-item flexcenter" v-for="item in 7" :key="item">主歌</div>
                                    </div>
                                    <template #reference>
                                        <div class="meta-tags flexcenter">添加元标签</div>
                                    </template>
                                </el-popover> -->
                            </div>
                        </div>

                        <div class="lyric-content">
                            <el-input v-model="obj.gpt_description_prompt" class="lyric-input" maxlength="200" show-word-limit style="width: 100%;" :rows="4" type="textarea" placeholder="请输入你的歌词" />
                            <!-- <div class="random-btn flexcenter">随机生成歌词</div> -->
                        </div>
                    </div>
                    <div class="style">
                        <div class="title-box flexacenter">
                            <div class="title-left flexacenter">
                                音乐风格
                                <el-popover placement="right" :width="300" trigger="click" content="描述你想要的音乐风格 例如：流行、摇滚、史诗。Suno的模型无法识别具体的艺人名称，但能理解音乐类型和氛围。" :teleported="false">
                                    <template #reference>
                                        <img class="question-icon" src="./assets/img/question-icon.svg" />
                                    </template>
                                </el-popover>
                            </div>
                        </div>
                        <div class="style-content">
                            <el-input v-model="obj.tags" class="style-input" maxlength="2000" style="width: 100%;" :rows="4" type="textarea" placeholder="输入音乐风格" autosize />
                            <!-- <div class="random-btn flexcenter">选择音乐风格</div> -->
                            <div class="style-list">
                                <div class="style-item" v-for="item in stylelist" :key="item" @click="addStyle(item)">{{ item }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="name">
                        <div class="title-box flexacenter">
                            <div class="title-left flexacenter">
                                歌曲名称
                                <el-popover placement="right" :width="300" trigger="click" content="为你的歌曲命名" :teleported="false">
                                    <template #reference>
                                        <img class="question-icon" src="./assets/img/question-icon.svg" />
                                    </template>
                                </el-popover>
                            </div>
                        </div>

                        <el-input class="name-input" v-model="obj.title" style="width: 300px;" maxlength="40" placeholder="请输入歌曲名称" />
                    </div>
                    <div class="section model">
                        <div class="title-box flexacenter">
                            <div class="title-left flexacenter">
                                音乐模型
                                <el-popover placement="right" :width="150" trigger="click" content="官方suno音乐模型" :teleported="false">
                                    <template #reference>
                                        <img class="question-icon" src="./assets/img/question-icon.svg" />
                                    </template>
                                </el-popover>
                            </div>
                        </div>

                        <el-select v-model="modelValue" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select" :teleported="false">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
                </template>
            </div>
            <div class="middle-box flex1">
                <template v-if="list.length == 0">
                    <div class="nodata">暂无数据</div>
                </template>
                <template v-else>
                    <div class="list">
                        <div class="item flexflex" :class="{ 'sel': listIndex == index }" v-for="(item, index) in list" :key="index" @click="handleMusicList(index)">
                            <!-- <div class="progress-bar" :style="{ 'width': item.progress + '%' }"></div> -->
                            <div class="progress-bar" v-if="item.status != 'complete'">生成中...</div>
                            <div class="img-box" @click="playAudio(index)">
                                <img v-if="item.image_url" class="img" :src="item.image_url" />
                                <img v-else class="img" src="./assets/img/default-icon.png" />
                                <div class="play flexcenter">
                                    <img class="play-btn" src="./assets/img/play-icon.png" />
                                </div>
                            </div>
                            <div class="content flexflex flex1">
                                <div class="name">{{ item.title }}</div>
                                <div class="desc">{{ item.tags || item?.metadata?.tags }}</div>
                            </div>

                            <el-popover popper-class="dot-popover" placement="bottom" :width="220" trigger="click" :teleported="false">
                                <div class="dot-list">
                                    <a class="dot-item" target="_parent" v-if="item.audio_url" :href="item.audio_url" :download="item.title + '.mp3'">下载MP3</a>
                                    <!-- <div class="dot-item" v-if="item.audio_url">下载MP3</div> -->
                                    <!-- <div class="dot-item">下载wav</div> -->
                                    <a class="dot-item" v-if="item.video_url" :href="item.video_url" :download="item.title + '.mp4'">下载视频</a>
                                    <!-- <div class="dot-item" v-if="item.video_url">下载视频</div> -->
                                </div>
                                <template #reference>
                                    <div class="dot flexcenter" @click.stop="">
                                        <img class="dot-icon" src="./assets/img/dot.svg" />
                                    </div>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                </template>
            </div>
            <div class="right-box" v-if="previewState">
                <template v-if="JSON.stringify(songInfo) === '{}'">
                    <div class="nosong">选择要预览的歌曲。</div>
                </template>
                <template v-else>
                    <div class="close flexcenter" @click="closeInfo()">
                        <img class="close-icon" src="./assets/img/icon12.svg" />
                    </div>
                    <img class="song-picture" :src="songInfo.image_large_url" />
                    <div class="song-info">
                        <div class="name">{{ songInfo.title }}</div>
                        <div class="desc">{{ songInfo?.metadata?.tags }}</div>
                        <div class="desc" v-html="songInfo?.metadata?.prompt"></div>
                    </div>
                </template>
            </div>
        </div>

        <div class="base-bottom flexacenter">
            <div class="base-side"></div>
            <div class="base-middle flexacenter">
                <div class="btn flexacenter">
                    <div class="btn-item btn-left flexcenter" @click="prevAudio()">
                        <el-icon color="#fff" :size="18"><DArrowLeft /></el-icon>
                    </div>
                    <div class="btn-item btn-centre flexcenter" @click="togglePlayPause()">
                        <img v-if="isPlaying" class="suspend" src="./assets/img/suspend.png" />
                        <img v-else class="suspend" src="./assets/img/play-icon.png" />
                    </div>
                    <div class="btn-item btn-right flexcenter" @click="nextAudio()">
                        <el-icon color="#fff" :size="18"><DArrowRight /></el-icon>
                    </div>
                </div>
                <div class="audio-box flexacenter">
                    <div class="time">{{ formatTime(currentTime) }}</div>
                    <el-slider class="progress-box" :show-tooltip="false" v-model="currentTime" :max="duration" @change="seekAudio" />
                    <div class="time">{{ formatTime(duration) }}</div>
                </div>
                <!-- <img class="cyclical-icon" src="./assets/img/loop.png" />
                <img class="cyclical-icon" src="./assets/img/single.png" /> -->
            </div>
            <div class="base-side"></div>
        </div>

        <el-dialog class="wxlogin" v-model="wxloginVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
            <div class="wxlogin-box">
                <div class="close-box">
                    <img class="close-icon" src="" />
                </div>
                <div class="wxlogin-title">微信登录</div>
                <div class="qrcode-box flexcenter">
                    <img class="qrcode-img" :src="qrcode" />
                    <div class="lose-box flexcenter" v-if="wxloginQrcodeLose" @click="getLoginQrcode()">
                        二维码失效，点击重新获取
                    </div>
                </div>
                <div class="hint">扫码关注【SunoAI音乐创作工具】即可登录</div>
                <!-- <div class="remark flexacenter">
                    注册/登录表示您已同意
                    <a>《用户协议》</a>
                    及
                    <a>《隐私政策》</a>
                </div> -->
            </div>
        </el-dialog>
        <!-- 风格 -->
        <!-- <el-dialog class="style-dialog" v-model="styleVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
            <div class="style-box">
                <div class="title">音乐流派</div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="User" name="first">User</el-tab-pane>
                    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
                    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
                    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog> -->

        <audio ref="audio" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" @ended="nextAudio" @play="updatePlayStatus" @pause="updatePlayStatus"></audio>
    </div>
</template>

<style scoped lang="less">
audio {
    display: none;
}
body {
    background-color: #000;
}

.left-box {
    width: 320px;
    // height: calc(100vh - 69px);
    // overflow: auto;
    padding: 10px;
    background-color: #000;
    border-right: 1px solid #252323;
    height: calc(100vh - 69px);
    .tab-box {
        display: flex;
        align-items: center;
        padding: 4px;
        border: 1px solid #adadad;
        border-radius: 23px;
        color: #adadad;
        margin-bottom: 18px;

        .tab-item {
            flex: 1;
            height: 34px;
            cursor: pointer;
            text-align: center;
            line-height: 34px;
            &.sel {
                color: #000;
                border-radius: 20px;
                background-color: #fbd38d;
            }
        }
    }

    .description {
        margin-bottom: 10px;
        .title {
            margin-bottom: 10px;
        }

        .description-input {
            /deep/ .el-textarea__inner {
                box-shadow: 0 0 0 1px #252323 inset !important;
                background: transparent;
            }
            min-height: 31px;
            height: 94px;
            width: 100%;
            color: #ffffffeb;
            line-height: 1.5;
            border-radius: 4px;
        }
    }

    .toggle-switch {
        color: #fff;
        font-size: 14px;
        .el-switch {
            margin-right: 10px;
        }
        margin-bottom: 10px;
    }

    .title-box {
        margin-bottom: 10px;
        justify-content: space-between;

        .title-left {
            font-size: 14px;
            color: #fff;
            .question-icon {
                width: 14px;
                height: 14px;
                margin-left: 3px;
                cursor: pointer;
            }

            /deep/ .el-popper {
                font-size: 12px;
                color: #fff;
            }
        }
        .title-right {
            .meta-tags {
                width: 80px;
                height: 28px;
                color: rgb(204 204 204);
                background-color: rgb(26 26 26);
                font-size: 12px;
                border-radius: 4px;
                cursor: pointer;
            }
        }
    }

    .model {
        .title {
            margin-bottom: 10px;
        }
        /deep/ .el-select__wrapper {
            box-shadow: 0 0 0 1px #252323 inset !important;
            background: transparent;

            .el-select__selected-item {
                color: #fff;
            }
        }

        /deep/ .el-popper {
            .el-select-dropdown.model-select {
                .el-select-dropdown__item {
                    color: #606266;
                    &.is-selected {
                        color: #fff;
                    }
                    &.is-hovering {
                        background: #232426 !important;
                    }
                }
            }
        }
    }

    .creation-btn {
        color: #1a202c;
        font-size: 16px;
        font-weight: 700;
        padding: 0 16px;
        background-color: #fbd38d;
        height: 44px;
        border-radius: 4px;
        margin-top: 24px;
        cursor: pointer;
    }

    .lyric {
        .title-box {
            .el-popper.type-popover {
                .lyric-type {
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 10px;
                    padding: 10px;
                    .lyric-type-item {
                        width: 72px;
                        height: 24px;
                        color: rgb(170 170 170);
                        cursor: pointer;
                        border-radius: 9999px;
                        border: 1px solid #aaa;
                        &:hover {
                            border-color: #ddd;
                        }
                    }
                }
            }
        }

        .lyric-content {
            /deep/ .lyric-input {
                .el-textarea__inner {
                    background: transparent;
                    box-shadow: none;
                }

                .el-input__count {
                    background: transparent;
                }
            }
            padding-bottom: 5px;
            box-shadow: 0 0 0 1px #252323 inset !important;
            margin-bottom: 10px;
        }
    }

    .style {
        .style-content {
            /deep/ .style-input {
                .el-textarea__inner {
                    background: transparent;
                    box-shadow: none;
                    min-height: 100px !important;
                }
            }
            padding-bottom: 5px;
            box-shadow: 0 0 0 1px #252323 inset !important;
            margin-bottom: 10px;

            .style-list {
                width: 100%;
                display: flex;
                overflow: auto;
                white-space: pre;

                .style-item {
                    color: rgb(250 247 245);
                    font-size: 13px;
                    padding: 8px 12px;
                    background: #363030bf;
                    margin-left: 4px;
                    border-radius: 9999px;
                    cursor: pointer;
                }
            }
        }
    }

    .random-btn {
        background: rgba(255, 255, 255, 0.16);
        width: 120px;
        margin-left: 5px;
        cursor: pointer;
        padding: 0 12px;
        min-width: 32px;
        height: 32px;
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
    }

    .name {
        margin-bottom: 10px;

        .name-input {
            /deep/ .el-input__wrapper {
                background: none;
                box-shadow: 0 0 0 1px #252323 inset !important;
            }
        }
    }
}

/deep/ .el-popper {
    background: rgb(25, 25, 26) !important;
    border: none !important;
    box-shadow: 0 0 0 1px #252323 inset !important;

    &.is-light .el-popper__arrow:before {
        border-color: #252323 !important;
        background: rgb(25, 25, 26) !important;
    }
}

.right-box {
    width: 294px;
    height: calc(100vh - 69px);
    overflow: auto;
    position: relative;
    .nosong {
        color: #a0aec0;
        font-size: 14px;
        text-align: center;
        padding-top: 40px;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #fff3;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
    }

    .song-picture {
        width: 100%;
    }
    .song-info {
        font-size: 14px;
        padding: 10px;
        color: #fff;

        .name {
            line-height: 24px;
            font-size: 14px;
        }
        .desc {
            white-space: pre-line;
            line-height: 24px;
            margin-bottom: 40px;
        }
    }
}

.middle-box {
    border-right: 1px solid #252323;
    height: calc(100vh - 69px);
    overflow: auto;
    .nodata {
        color: #a0aec0;
        font-size: 14px;
        text-align: center;
        padding-top: 40px;
    }

    .list {
        .item {
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 20px;
            padding-right: 20px;
            cursor: pointer;
            align-items: center;
            &.sel,
            &:hover {
                background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%) !important;
            }

            .img-box {
                position: relative;
                width: 60px;
                height: 60px;
                margin-right: 10px;
                border-radius: 6px;

                .img {
                    width: 60px;
                    height: 60px;
                    border-radius: 6px;
                }
                &:hover {
                    .play {
                        display: flex;
                    }
                }
                .play {
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.6);
                    .play-btn {
                        width: 22px;
                    }
                }
            }

            position: relative;

            .progress-bar {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                color: #fff;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
                background-size: 300% 100%;
                animation: gradientAnimation 5s linear infinite;
            }

            @keyframes gradientAnimation {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }

            .content {
                font-size: 14px;
                line-height: 21px;
                flex-direction: column;
                justify-content: center;
                .name {
                    font-weight: 700;
                    color: #fff;
                }
                .desc {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    word-break: break-all;
                    word-wrap: break-word;
                    white-space: normal;
                    color: rgb(203 213 224);
                }
            }

            .dot {
                padding: 0 12px;
                min-width: 32px;
                height: 32px;
                cursor: pointer;
                border-radius: 6px;

                .dot-icon {
                    widows: 16px;
                    height: 16px;
                }
            }
            /deep/ .dot-popover {
                padding: 0;

                .dot-list {
                    padding: 5px 0;
                    .dot-item {
                        padding-left: 10px;
                        padding-right: 10px;
                        line-height: 30px;
                        cursor: pointer;
                        height: 30px;
                        font-size: 14px;
                        color: #fff;
                        display: block;
                        text-decoration: none;
                        &:hover {
                            background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%);
                        }
                    }
                }
            }
        }
    }
}

.base-bottom {
    background-color: rgb(22 22 22);
    border-top: 1px solid #222222;
    padding-left: 24px;
    padding-right: 24px;
    height: 68px;
    .base-side {
        width: 450px;
    }

    .base-middle {
        .btn {
            margin-right: 24px;
            .btn-item {
                width: 32px;
                height: 32px;
                border-radius: 50% !important;
                background: rgba(255, 255, 255, 0.08);
                cursor: pointer;
                transition: all 0.3s;
                &:hover {
                    .el-icon {
                        font-size: 30px;
                    }
                }

                &.btn-centre {
                    margin-left: 6px;
                    margin-right: 6px;
                    background-color: #fbd38d;
                    img {
                        width: 20px;
                    }
                }
            }
        }

        .audio-box {
            .time {
                color: rgb(160 174 192);
                font-size: 12px;
            }

            .progress-box {
                width: 390px;
                margin-left: 16px;
                margin-right: 16px;
                /deep/ .el-slider__runway {
                    height: 4px;
                    .el-slider__bar {
                        background: #fbd38d;
                        height: 4px;
                    }
                }
                /deep/ .el-slider__button {
                    border: none;
                    height: 14px;
                    width: 14px;
                }
            }
        }
        .cyclical-icon {
            height: 14px;
            margin-right: 5px;
            margin: 0 12px;
            cursor: pointer;
        }
    }
}

/deep/ .el-dialog {
    border-radius: 10px;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgb(25, 25, 26) !important;
    padding: 16px;
    .el-dialog__header {
        display: none;
    }

    &.wxlogin {
        .el-dialog__body {
            .wxlogin-box {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;

                .close-box {
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 15px;
                    right: 15px;
                }

                .wxlogin-title {
                    color: #969595;
                    padding: 0 20px;
                    height: 40px;
                    margin-bottom: 10px;
                    line-height: 40px;
                    font-size: 18px;
                }

                .qrcode-box {
                    width: 300px;
                    height: 300px;
                    position: relative;
                    .qrcode-img {
                        width: 100%;
                        height: 100%;
                    }
                    .lose-box {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.6);
                        color: #fff;
                    }
                }

                .hint {
                    margin-top: 20px;
                    margin-bottom: 20px;
                    color: rgb(204 204 204);
                    text-align: center;
                }

                .remark {
                    text-align: center;
                    font-size: 12px;
                    color: rgb(180 185 191);
                    a {
                        color: rgb(88 101 242);
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    &.style-dialog {
        .el-dialog__body {
            .style-box {
                .title {
                    font-size: 18px;
                    color: #fff;
                }
            }
        }
    }
}
</style>
