<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPlaylistList, getPlaylistById, addPlaylist as apiAddPlaylist, updatePlaylist as apiUpdatePlaylist, deletePlaylist as apiDeletePlaylist } from '../../api/playlist'
import { getPlaylistTypeList } from '../../api/playlistType'
import { processMusicUrl } from '../../api/music'

// 歌单列表
const playlistList = ref([])

// 加载状态
const loading = ref(false)

// 分页信息
const pagination = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

// 搜索关键字
const searchKeyword = ref('')

// 类型筛选
const selectedType = ref('')

// 类型列表
const typeList = ref([])

// 添加/编辑对话框
const dialogVisible = ref(false)

// 对话框标题
const dialogTitle = ref('添加歌单')

// 当前编辑的歌单
const currentPlaylist = ref(null)

// 表单数据
const form = ref({
  name: '',
  description: '',
  typeId: '',
  isOfficial: 1,
  cover: null,
  currentCover: null // 当前封面URL，用于显示
})

// 获取歌单列表
const fetchPlaylistList = async () => {
  loading.value = true
  try {
    const { currentPage, pageSize } = pagination.value
    const res = await getPlaylistList(
      currentPage,
      pageSize,
      searchKeyword.value,
      selectedType.value || null
    )

    console.log('歌单列表响应:', res)

    if (res.code === 200) {
      // 处理歌单列表数据
      const data = res.data
      // 兼容不同的数据结构
      const records = data.records || data.list || []

      playlistList.value = records.map(item => ({
        ...item,
        // 处理封面URL
        cover: processMusicUrl(item.cover),
        // 确保类型ID是数字
        typeId: item.typeId || (item.type ? item.type.id : null),
        // 确保音乐数量存在
        songCount: item.musicCount || item.songCount || 0
      }))

      pagination.value.total = data.total || 0
      console.log('处理后的歌单列表:', playlistList.value)
    } else {
      ElMessage.error(res.message || '获取歌单列表失败')
    }
  } catch (error) {
    console.error('获取歌单列表失败:', error)
    ElMessage.error('获取歌单列表失败')
  } finally {
    loading.value = false
  }
}

// 获取类型列表
const fetchTypeList = async () => {
  try {
    const res = await getPlaylistTypeList()
    if (res.code === 200) {
      typeList.value = res.data || []
      console.log('歌单类型列表:', typeList.value)
    } else {
      ElMessage.error(res.message || '获取类型列表失败')
    }
  } catch (error) {
    console.error('获取类型列表失败:', error)
    ElMessage.error('获取类型列表失败')
  }
}

// 处理页码变化
const handleCurrentChange = (page) => {
  pagination.value.currentPage = page
  fetchPlaylistList()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.currentPage = 1
  fetchPlaylistList()
}

// 搜索歌单
const searchPlaylist = () => {
  pagination.value.currentPage = 1
  fetchPlaylistList()
}

// 重置搜索
const resetSearch = () => {
  searchKeyword.value = ''
  selectedType.value = ''
  pagination.value.currentPage = 1
  fetchPlaylistList()
}

// 添加歌单
const addPlaylist = () => {
  dialogTitle.value = '添加歌单'
  currentPlaylist.value = null
  form.value = {
    name: '',
    description: '',
    typeId: '',
    isOfficial: 1,
    cover: null,
    currentCover: null
  }
  dialogVisible.value = true
}

// 编辑歌单
const editPlaylist = async (row) => {
  dialogTitle.value = '编辑歌单'
  currentPlaylist.value = row

  // 先获取类型列表，确保类型数据已加载
  await fetchTypeList()
  console.log('类型列表:', typeList.value)

  try {
    // 获取歌单详情
    const res = await getPlaylistById(row.id)
    if (res.code === 200) {
      const playlist = res.data
      console.log('歌单详情:', playlist)

      // 处理类型ID
      let typeId = null
      if (playlist.type && playlist.type.id) {
        // 如果是对象形式
        typeId = Number(playlist.type.id)
      } else if (playlist.typeId) {
        // 如果是直接的ID
        typeId = Number(playlist.typeId)
      }

      // 如果没有类型，默认选择第一个类型（如果存在）
      if (typeId === null && typeList.value.length > 0) {
        typeId = typeList.value[0].id
      }

      console.log('歌单类型ID:', typeId)

      // 设置表单数据
      form.value = {
        name: playlist.name,
        description: playlist.description || '',
        typeId: typeId,
        isOfficial: playlist.isOfficial,
        cover: null,
        // 保存当前封面URL，用于显示
        currentCover: playlist.cover
      }

      // 强制触发响应式更新
      setTimeout(() => {
        form.value = { ...form.value }
      }, 0)

      console.log('设置的表单数据:', form.value)
    } else {
      form.value = {
        name: row.name,
        description: row.description || '',
        typeId: row.typeId || '',
        isOfficial: row.isOfficial || 0,
        cover: null,
        currentCover: row.cover
      }
    }
  } catch (error) {
    console.error('获取歌单详情失败:', error)
    ElMessage.error('获取歌单详情失败，使用列表数据')

    form.value = {
      name: row.name,
      description: row.description || '',
      typeId: row.typeId || '',
      isOfficial: row.isOfficial || 0,
      cover: null,
      currentCover: row.cover
    }
  }

  dialogVisible.value = true
}

// 删除歌单
const deletePlaylist = (row) => {
  ElMessageBox.confirm(`确定要删除歌单 ${row.name} 吗？此操作不可恢复`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await apiDeletePlaylist(row.id)
      if (res.code === 200) {
        ElMessage.success('删除成功')
        fetchPlaylistList() // 重新加载列表
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除歌单失败:', error)
      ElMessage.error('删除失败，请稍后重试')
    }
  }).catch(() => {})
}

// 管理音乐对话框相关状态
const musicDialogVisible = ref(false)
const currentPlaylistId = ref(null)
const currentPlaylistName = ref('')
const musicList = ref([])
const selectedMusicIds = ref([])
const musicSearchKeyword = ref('')
const musicLoading = ref(false)

// 获取音乐列表
const fetchMusicList = async () => {
  musicLoading.value = true
  try {
    const res = await getMusicList(1, 100, musicSearchKeyword.value)
    if (res.code === 200) {
      musicList.value = res.data.list || res.data.records || []
    } else {
      ElMessage.error(res.message || '获取音乐列表失败')
    }
  } catch (error) {
    console.error('获取音乐列表失败:', error)
    ElMessage.error('获取音乐列表失败')
  } finally {
    musicLoading.value = false
  }
}

// 获取歌单中的音乐
const fetchPlaylistMusic = async (playlistId) => {
  try {
    const res = await getPlaylistById(playlistId)
    if (res.code === 200 && res.data.musics) {
      selectedMusicIds.value = res.data.musics.map(m => m.id)
    }
  } catch (error) {
    console.error('获取歌单音乐失败:', error)
  }
}

// 管理歌单音乐
const managePlaylistMusic = async (row) => {
  currentPlaylistId.value = row.id
  currentPlaylistName.value = row.name
  musicSearchKeyword.value = ''
  musicDialogVisible.value = true
  
  // 加载音乐列表和已选音乐
  await Promise.all([
    fetchMusicList(),
    fetchPlaylistMusic(row.id)
  ])
}

// 添加音乐到歌单
const addMusicToPlaylistLocal = async (musicId) => {
  try {
    const res = await addMusicToPlaylist(currentPlaylistId.value, musicId)
    if (res.code === 200) {
      ElMessage.success('添加成功')
      await fetchPlaylistMusic(currentPlaylistId.value)
    } else {
      ElMessage.error(res.message || '添加失败')
    }
  } catch (error) {
    console.error('添加音乐失败:', error)
    ElMessage.error('添加失败')
  }
}

// 从歌单移除音乐
const removeMusicFromPlaylistLocal = async (musicId) => {
  try {
    const res = await removeMusicFromPlaylist(currentPlaylistId.value, musicId)
    if (res.code === 200) {
      ElMessage.success('移除成功')
      await fetchPlaylistMusic(currentPlaylistId.value)
    } else {
      ElMessage.error(res.message || '移除失败')
    }
  } catch (error) {
    console.error('移除音乐失败:', error)
    ElMessage.error('移除失败')
  }
}

// 搜索音乐
const searchMusic = () => {
  fetchMusicList()
}

// 提交表单
const submitForm = async () => {
  // 表单验证
  if (!form.value.name) {
    ElMessage.warning('请输入歌单名称')
    return
  }

  if (!form.value.typeId) {
    ElMessage.warning('请选择歌单类型')
    return
  }

  try {
    let res
    const formData = {
      name: form.value.name,
      description: form.value.description,
      typeId: form.value.typeId,
      isOfficial: form.value.isOfficial
    }

    console.log('提交的歌单数据:', formData)

    if (currentPlaylist.value) {
      // 编辑歌单
      res = await apiUpdatePlaylist(
        currentPlaylist.value.id,
        formData,
        form.value.cover
      )
    } else {
      // 添加歌单
      res = await apiAddPlaylist(
        formData,
        form.value.cover
      )
    }

    if (res.code === 200) {
      ElMessage.success(currentPlaylist.value ? '编辑成功' : '添加成功')
      dialogVisible.value = false
      fetchPlaylistList() // 重新加载列表
    } else {
      ElMessage.error(res.message || (currentPlaylist.value ? '编辑失败' : '添加失败'))
    }
  } catch (error) {
    console.error(currentPlaylist.value ? '编辑歌单失败:' : '添加歌单失败:', error)
    ElMessage.error(currentPlaylist.value ? '编辑失败，请稍后重试' : '添加失败，请稍后重试')
  }
}

// 格式化类型
const formatType = (typeId) => {
  const type = typeList.value.find(t => t.id === typeId)
  return type ? type.name : '-'
}

// 处理封面上传
const handleCoverChange = (file) => {
  if (file && file.raw) {
    // 检查文件类型
    const isImage = file.raw.type.startsWith('image/')
    if (!isImage) {
      ElMessage.error('只能上传图片文件!')
      return
    }

    // 检查文件大小 (2MB)
    const isLt2M = file.raw.size / 1024 / 1024 < 2
    if (!isLt2M) {
      ElMessage.error('图片大小不能超过 2MB!')
      return
    }

    form.value.cover = file.raw
  }
}

onMounted(() => {
  fetchPlaylistList()
  fetchTypeList()
})

// 导入音乐相关API
import { getMusicList } from '../../api/music'
import { addMusicToPlaylist, removeMusicFromPlaylist } from '../../api/playlist'
</script>

<template>
  <div class="admin-playlist-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入歌单名称/描述"
        clearable
        @clear="resetSearch"
        @keyup.enter="searchPlaylist"
        class="search-input"
      >
        <template #append>
          <el-button @click="searchPlaylist">
            <el-icon><search /></el-icon>
            搜索
          </el-button>
        </template>
      </el-input>

      <el-select
        v-model="selectedType"
        placeholder="选择类型"
        clearable
        @change="searchPlaylist"
        class="type-select"
      >
        <el-option
          v-for="type in typeList"
          :key="type.id"
          :label="type.name"
          :value="type.id"
        />
      </el-select>

      <el-button type="primary" @click="addPlaylist">
        <el-icon><plus /></el-icon>
        添加歌单
      </el-button>
    </div>

    <!-- 歌单列表 -->
    <el-table
      :data="playlistList"
      stripe
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="id" label="ID" width="80"></el-table-column>

      <el-table-column label="封面" width="80" align="center">
        <template #default="scope">
          <el-image
            :src="scope.row.cover || '/default-cover.jpg'"
            :alt="scope.row.name"
            class="playlist-cover"
            fit="cover"
            :preview-src-list="scope.row.cover ? [scope.row.cover] : []"
            :initial-index="0"
            preview-teleported
          >
            <template #error>
              <div class="image-error">
                <el-icon><picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="歌单名称" min-width="150"></el-table-column>

      <el-table-column prop="description" label="描述" min-width="200">
        <template #default="scope">
          <el-tooltip
            :content="scope.row.description"
            placement="top"
            :show-after="500"
          >
            <div class="description-text">{{ scope.row.description || '-' }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="创建者" width="100">
        <template #default="scope">
          {{ scope.row.creator ? scope.row.creator.username : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="typeId" label="类型" width="100">
        <template #default="scope">
          {{ formatType(scope.row.typeId) }}
        </template>
      </el-table-column>

      <el-table-column prop="isOfficial" label="是否官方" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isOfficial === 1 ? 'success' : 'info'">
            {{ scope.row.isOfficial === 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="songCount" label="歌曲数" width="80" align="center"></el-table-column>

      <el-table-column prop="playCount" label="播放次数" width="100" align="center"></el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="120">
        <template #default="scope">
          {{ scope.row.createTime ? new Date(scope.row.createTime).toLocaleDateString() : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            @click="managePlaylistMusic(scope.row)"
          >
            管理音乐
          </el-button>

          <el-button
            size="small"
            type="primary"
            @click="editPlaylist(scope.row)"
          >
            编辑
          </el-button>

          <el-button
            size="small"
            type="danger"
            @click="deletePlaylist(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
    >
      <el-form
        :model="form"
        label-width="100px"
      >
        <el-form-item label="歌单名称" required>
          <el-input v-model="form.name" placeholder="请输入歌单名称" />
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            placeholder="请输入歌单描述"
          />
        </el-form-item>

        <el-form-item label="类型" required>
          <el-select
            v-model="form.typeId"
            placeholder="请选择歌单类型"
            style="width: 100%"
          >
            <el-option
              v-for="type in typeList"
              :key="type.id"
              :label="type.name"
              :value="type.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否官方">
          <div class="official-switch-container">
            <el-switch
              v-model="form.isOfficial"
              :active-value="1"
              :inactive-value="0"
              style="width: 40px"
            />
            <span class="switch-value-text">
              {{ form.isOfficial === 1 ? '当前状态: 官方歌单' : '当前状态: 非官方歌单' }}
            </span>
          </div>
        </el-form-item>

        <el-form-item label="封面">
          <div class="cover-container">
            <!-- 当前封面预览 -->
            <div class="cover-section">
              <div class="section-title">当前封面：</div>
              <div v-if="form.currentCover" class="current-cover">
                <el-image
                  :src="form.currentCover"
                  fit="cover"
                  class="cover-preview"
                  :preview-src-list="[form.currentCover]"
                  :initial-index="0"
                  preview-teleported
                />
              </div>
              <div v-else class="no-cover">
                <el-icon><picture /></el-icon>
                <span>暂无封面</span>
              </div>
            </div>

            <!-- 上传新封面 -->
            <div class="upload-section">
              <div class="section-title">上传新封面（建议尺寸 300x300 像素）：</div>

              <el-upload
                action="#"
                :auto-upload="false"
                :on-change="handleCoverChange"
                :limit="1"
                list-type="picture-card"
                class="cover-upload"
              >
                <el-icon><plus /></el-icon>
              </el-upload>
              <div class="el-upload__tip">
                点击上传新封面，不上传则保持原封面
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 管理音乐对话框 -->
    <el-dialog
      v-model="musicDialogVisible"
      :title="`管理歌单 ${currentPlaylistName} 的音乐`"
      width="800px"
    >
      <div class="music-management-container">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-input
            v-model="musicSearchKeyword"
            placeholder="搜索音乐名称"
            clearable
            @keyup.enter="searchMusic"
            class="search-input"
          >
            <template #append>
              <el-button @click="searchMusic">
                <el-icon><search /></el-icon>
                搜索
              </el-button>
            </template>
          </el-input>
        </div>

        <!-- 音乐列表 -->
        <div class="music-list-container">
          <el-table
            :data="musicList"
            stripe
            style="width: 100%"
            v-loading="musicLoading"
          >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="音乐名称" min-width="150"></el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="addMusicToPlaylistLocal(scope.row.id)"
                  :disabled="selectedMusicIds.includes(scope.row.id)"
                >
                  {{ selectedMusicIds.includes(scope.row.id) ? '已添加' : '添加' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 已添加音乐 -->
        <div class="selected-music-container">
          <h3>已添加的音乐</h3>
          <el-table
            :data="musicList.filter(m => selectedMusicIds.includes(m.id))"
            stripe
            style="width: 100%"
            empty-text="暂无音乐"
          >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="音乐名称" min-width="150"></el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button
                  size="small"
                  type="danger"
                  @click="removeMusicFromPlaylistLocal(scope.row.id)"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="musicDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.music-management-container {
  padding: 10px;
}

.search-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.music-list-container,
.selected-music-container {
  margin-bottom: 20px;
}

.selected-music-container h3 {
  margin-bottom: 10px;
  color: #606266;
}
</style>

<style scoped>
.admin-playlist-container {
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b3e5fc;
  transition: all 0.3s;
}

.search-input :deep(.el-input__inner):focus {
  border-color: #4dd0e1;
  box-shadow: 0 0 0 2px rgba(77, 208, 225, 0.2);
}

.type-select {
  width: 150px;
}

.type-select :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b3e5fc;
}

.el-button {
  border-radius: 8px !important;
  font-weight: bold !important;
  transition: all 0.3s !important;
}

.el-button--primary {
  background: linear-gradient(135deg, #4dd0e1 0%, #26c6da 100%) !important;
  border: none !important;
}

.el-button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(38, 198, 218, 0.3) !important;
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
}

.el-table :deep(th) {
  background-color: #e1f5fe !important;
  color: #0d47a1;
}

.el-table :deep(.el-table__row) {
  transition: all 0.3s;
}

.el-table :deep(.el-table__row:hover) {
  background-color: #f5f5f5 !important;
  transform: scale(1.01);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 12px;
}

.playlist-cover {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  transition: all 0.3s;
}

.playlist-cover:hover {
  transform: scale(1.1);
}

.image-error {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 20px;
  border-radius: 8px;
}

.description-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.el-dialog {
  border-radius: 16px !important;
}

.el-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%);
  border-radius: 16px 16px 0 0 !important;
  padding: 15px 20px;
}

.el-dialog :deep(.el-dialog__title) {
  color: #0d47a1;
  font-weight: bold;
}

.el-form-item :deep(.el-form-item__label) {
  color: #4a4a4a;
  font-weight: bold;
}

.el-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b3e5fc;
}

.el-input :deep(.el-input__inner):focus {
  border-color: #4dd0e1;
  box-shadow: 0 0 0 2px rgba(77, 208, 225, 0.2);
}

.cover-container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.cover-section,
.upload-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-title {
  font-size: 14px;
  color: #4a4a4a;
  margin-bottom: 10px;
  font-weight: bold;
}

.current-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cover-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #b3e5fc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.cover-preview:hover {
  transform: scale(1.05);
}

.no-cover {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  border: 1px dashed #b3e5fc;
  transition: all 0.3s;
}

.no-cover:hover {
  border-color: #4dd0e1;
}

.no-cover .el-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.cover-upload :deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 8px;
  border: 1px dashed #b3e5fc;
  transition: all 0.3s;
}

.cover-upload :deep(.el-upload--picture-card:hover) {
  border-color: #4dd0e1;
}

.official-switch-container {
  display: flex;
  align-items: center;
}

.switch-value-text {
  margin-left: 15px;
  font-size: 13px;
  color: #4a4a4a;
}

.el-table :deep(.el-button) {
  margin-left: 0;
  margin-right: 5px;
  padding: 4px 8px;
  border-radius: 8px !important;
}

.music-management-container {
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
}

.music-management-container .search-bar {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.music-list-container,
.selected-music-container {
  margin-bottom: 20px;
}

.selected-music-container h3 {
  margin-bottom: 10px;
  color: #4a4a4a;
}
</style>
