<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSingerList, addSinger as apiAddSinger, updateSinger, deleteSinger, getSingerById } from '../../api/singer'
import { getSingerTypeList } from '../../api/admin/type'
import { getMusicList } from '../../api/music'
import { addMusicToSinger, removeMusicFromSinger } from '../../api/singer'

// 歌手列表
const singerList = 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 currentSinger = ref(null)

// 表单数据
const form = ref({
  name: '',
  typeId: '',
  introduction: '',
  avatar: null
})

// 获取歌手列表
const fetchSingerList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.currentPage,
      size: pagination.value.pageSize,
      keyword: searchKeyword.value,
      typeId: selectedType.value || null
    }

    const res = await getSingerList(params.page, params.size, params.keyword, params.typeId)

    if (res.code === 200) {
      singerList.value = res.data.list
      console.log(66666,singerList.value)
      pagination.value.total = res.data.total
    } else {
      ElMessage.error(res.message || '获取歌手列表失败')
    }
  } catch (error) {
    console.error('获取歌手列表错误:', error)
    ElMessage.error('获取歌手列表失败')
  } finally {
    loading.value = false
  }
}

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

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

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

// 搜索歌手
const searchSinger = () => {
  pagination.value.currentPage = 1
  fetchSingerList()
}

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

// 添加歌手
const addSinger = () => {
  dialogTitle.value = '添加歌手'
  currentSinger.value = null
  form.value = {
    name: '',
    typeId: '',
    introduction: '',
    avatar: null
  }
  dialogVisible.value = true
}

// 编辑歌手
const editSinger = (row) => {
  dialogTitle.value = '编辑歌手'
  currentSinger.value = row
  form.value = {
    name: row.name,
    typeId: row.type ? row.type.id : row.typeId,
    introduction: row.introduction || '',
    avatar: null
  }
  dialogVisible.value = true
}

// 删除歌手
const handleDeleteSinger = (row) => {
  ElMessageBox.confirm(`确定要删除歌手 ${row.name} 吗？此操作不可恢复`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteSinger(row.id)
      if (res.code === 200) {
        ElMessage.success(res.message || '删除成功')
        // 刷新歌手列表
        fetchSingerList()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除歌手错误:', error)
      ElMessage.error('删除歌手失败')
    }
  }).catch(() => {})
}

// 管理音乐对话框相关状态
const musicDialogVisible = ref(false)
const currentSingerId = ref(null)
const currentSingerName = 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 fetchSingerMusic = async (singerId) => {
  try {
    const res = await getSingerById(singerId)
    if (res.code === 200 && res.data.musics) {
      selectedMusicIds.value = res.data.musics.map(m => m.id)
    }
  } catch (error) {
    console.error('获取歌手音乐失败:', error)
  }
}

// 管理歌手音乐
const manageSingerMusic = async (row) => {
  currentSingerId.value = row.id
  currentSingerName.value = row.name
  musicSearchKeyword.value = ''
  musicDialogVisible.value = true
  
  // 加载音乐列表和已选音乐
  await Promise.all([
    fetchMusicList(),
    fetchSingerMusic(row.id)
  ])
}

// 添加音乐到歌手
const addMusicToSingerLocal = async (musicId) => {
  try {
    const res = await addMusicToSinger(currentSingerId.value, musicId)
    if (res.code === 200) {
      ElMessage.success('添加成功')
      await fetchSingerMusic(currentSingerId.value)
    } else {
      ElMessage.error(res.message || '添加失败')
    }
  } catch (error) {
    console.error('添加音乐失败:', error)
    ElMessage.error('添加失败')
  }
}

// 从歌手移除音乐
const removeMusicFromSingerLocal = async (musicId) => {
  try {
    const res = await removeMusicFromSinger(currentSingerId.value, musicId)
    if (res.code === 200) {
      ElMessage.success('移除成功')
      await fetchSingerMusic(currentSingerId.value)
    } else {
      ElMessage.error(res.message || '移除失败')
    }
  } catch (error) {
    console.error('移除音乐失败:', error)
    ElMessage.error('移除失败')
  }
}

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

// 提交表单
const submitForm = async () => {
  try {
    // 构建歌手数据
    const singerData = {
      name: form.value.name,
      introduction: form.value.introduction,
      type: form.value.typeId ? { id: form.value.typeId } : null
    }

    let res
    if (currentSinger.value) {
      // 编辑歌手
      res = await updateSinger(currentSinger.value.id, singerData, form.value.avatar)
    } else {
      // 添加歌手
      res = await apiAddSinger(singerData, form.value.avatar)
    }

    if (res.code === 200) {
      ElMessage.success(res.message || (currentSinger.value ? '编辑成功' : '添加成功'))
      dialogVisible.value = false
      // 刷新歌手列表
      fetchSingerList()
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('提交歌手表单错误:', error)
    ElMessage.error('操作失败')
  }
}

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

// 格式化粉丝数
const formatFans = (count) => {
  if (count < 10000) {
    return count.toString()
  } else if (count < 100000000) {
    return (count / 10000).toFixed(1) + '万'
  } else {
    return (count / 100000000).toFixed(1) + '亿'
  }
}

// 处理头像上传
const handleAvatarChange = (file) => {
  if (file && file.raw) {
    // 验证文件类型
    const isImage = file.raw.type.startsWith('image/')
    if (!isImage) {
      ElMessage.error('只能上传图片文件!')
      return
    }

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

    form.value.avatar = file.raw
  }
}

onMounted(() => {
  fetchSingerList()
  fetchTypeList()
})
</script>

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

      <el-select
        v-model="selectedType"
        placeholder="选择类型"
        clearable
        @change="searchSinger"
        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="addSinger">
        <el-icon><plus /></el-icon>
        添加歌手
      </el-button>
    </div>

    <!-- 歌手列表 -->
    <el-table
      :data="singerList"
      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">
          <img
            :src="scope.row.avatar"
            :alt="scope.row.name"
            class="singer-avatar"
          >
        </template>
      </el-table-column>

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

      <el-table-column label="类型" width="120">
        <template #default="scope">
          {{ formatType(scope.row.type ? scope.row.type.id : scope.row.typeId) }}
        </template>
      </el-table-column>

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

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

      <el-table-column prop="fansCount" label="粉丝数" width="100" align="center">
        <template #default="scope">
          {{ formatFans(scope.row.fansCount || 0) }}
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>

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

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

          <el-button
            size="small"
            type="danger"
            @click="handleDeleteSinger(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="类型" 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="简介">
          <el-input
            v-model="form.introduction"
            type="textarea"
            :rows="3"
            placeholder="请输入歌手简介"
          />
        </el-form-item>

        <el-form-item label="头像">
          <!-- 当前头像预览 -->
          <div v-if="currentSinger && currentSinger.avatar" class="current-avatar">
            <el-image
              :src="currentSinger.avatar"
              fit="cover"
              class="avatar-preview"
              :preview-src-list="[currentSinger.avatar]"
              :initial-index="0"
              preview-teleported
            />
            <div class="avatar-tip">当前头像</div>
          </div>

          <el-upload
            action="#"
            :auto-upload="false"
            :on-change="handleAvatarChange"
            :limit="1"
            list-type="picture-card"
          >
            <el-icon><plus /></el-icon>
          </el-upload>
          <div class="el-upload__tip">
            点击上传新头像，不上传则保持原头像
          </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="`管理歌手 ${currentSingerName} 的音乐`"
      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="addMusicToSingerLocal(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="removeMusicFromSingerLocal(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-singer-container {
  padding: 20px;
  background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%);
}

.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;
}

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

.singer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  transition: all 0.3s;
}

.singer-avatar:hover {
  transform: scale(1.1);
}

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

.el-table {
  --el-table-border-color: #b3e5fc;
  --el-table-header-bg-color: #e1f5fe;
  --el-table-row-hover-bg-color: #b3e5fc;
  border-radius: 8px;
  overflow: hidden;
}

.el-table th.el-table__cell {
  background-color: #e1f5fe !important;
  color: #0d47a1 !important;
  font-weight: bold !important;
}

.el-table .el-table__row {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s;
}

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

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

.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);
}

.current-avatar {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

.avatar-tip {
  font-size: 12px;
  color: #4a4a4a;
}

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

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

.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>
