<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前选中的类型分类
const activeTab = ref('music')

// 音乐类型列表
const musicTypeList = ref([])

// 歌手类型列表
const singerTypeList = ref([])

// 歌单类型列表
const playlistTypeList = ref([])

// 加载状态
const loading = ref({
  music: false,
  singer: false,
  playlist: false
})

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

// 对话框标题
const dialogTitle = ref('添加类型')

// 当前编辑的类型
const currentType = ref(null)

// 表单数据
const form = ref({
  name: '',
  description: ''
})

// 获取音乐类型列表
const fetchMusicTypeList = async () => {
  loading.value.music = true
  try {
    // 实际应用中，这里应该调用API获取音乐类型列表
    // 模拟获取音乐类型列表
    setTimeout(() => {
      musicTypeList.value = [
        { id: 1, name: '流行', description: '流行音乐', count: 120 },
        { id: 2, name: '摇滚', description: '摇滚音乐', count: 85 },
        { id: 3, name: '民谣', description: '民谣音乐', count: 64 },
        { id: 4, name: '电子', description: '电子音乐', count: 42 },
        { id: 5, name: '古典', description: '古典音乐', count: 36 },
        { id: 6, name: '嘻哈', description: '嘻哈音乐', count: 28 },
        { id: 7, name: '爵士', description: '爵士音乐', count: 15 },
        { id: 8, name: '乡村', description: '乡村音乐', count: 10 }
      ]
      loading.value.music = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取音乐类型列表失败')
    loading.value.music = false
  }
}

// 获取歌手类型列表
const fetchSingerTypeList = async () => {
  loading.value.singer = true
  try {
    // 实际应用中，这里应该调用API获取歌手类型列表
    // 模拟获取歌手类型列表
    setTimeout(() => {
      singerTypeList.value = [
        { id: 1, name: '华语男歌手', description: '华语男歌手', count: 85 },
        { id: 2, name: '华语女歌手', description: '华语女歌手', count: 72 },
        { id: 3, name: '华语组合', description: '华语组合', count: 28 },
        { id: 4, name: '欧美男歌手', description: '欧美男歌手', count: 45 },
        { id: 5, name: '欧美女歌手', description: '欧美女歌手', count: 38 },
        { id: 6, name: '欧美组合', description: '欧美组合', count: 32 },
        { id: 7, name: '日韩男歌手', description: '日韩男歌手', count: 25 },
        { id: 8, name: '日韩女歌手', description: '日韩女歌手', count: 20 },
        { id: 9, name: '日韩组合', description: '日韩组合', count: 15 }
      ]
      loading.value.singer = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取歌手类型列表失败')
    loading.value.singer = false
  }
}

// 获取歌单类型列表
const fetchPlaylistTypeList = async () => {
  loading.value.playlist = true
  try {
    // 实际应用中，这里应该调用API获取歌单类型列表
    // 模拟获取歌单类型列表
    setTimeout(() => {
      playlistTypeList.value = [
        { id: 1, name: '流行', description: '流行歌单', count: 95 },
        { id: 2, name: '摇滚', description: '摇滚歌单', count: 65 },
        { id: 3, name: '民谣', description: '民谣歌单', count: 48 },
        { id: 4, name: '电子', description: '电子歌单', count: 32 },
        { id: 5, name: '古典', description: '古典歌单', count: 25 },
        { id: 6, name: '嘻哈', description: '嘻哈歌单', count: 18 },
        { id: 7, name: '爵士', description: '爵士歌单', count: 12 },
        { id: 8, name: '乡村', description: '乡村歌单', count: 8 },
        { id: 9, name: '轻音乐', description: '轻音乐歌单', count: 22 },
        { id: 10, name: 'ACG', description: 'ACG歌单', count: 30 }
      ]
      loading.value.playlist = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取歌单类型列表失败')
    loading.value.playlist = false
  }
}

// 添加类型
const addType = () => {
  dialogTitle.value = `添加${getTypeText()}类型`
  currentType.value = null
  form.value = {
    name: '',
    description: ''
  }
  dialogVisible.value = true
}

// 编辑类型
const editType = (row) => {
  dialogTitle.value = `编辑${getTypeText()}类型`
  currentType.value = row
  form.value = {
    name: row.name,
    description: row.description
  }
  dialogVisible.value = true
}

// 删除类型
const deleteType = (row) => {
  ElMessageBox.confirm(`确定要删除${getTypeText()}类型 ${row.name} 吗？此操作不可恢复`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 实际应用中，这里应该调用API删除类型
    if (activeTab.value === 'music') {
      musicTypeList.value = musicTypeList.value.filter(item => item.id !== row.id)
    } else if (activeTab.value === 'singer') {
      singerTypeList.value = singerTypeList.value.filter(item => item.id !== row.id)
    } else if (activeTab.value === 'playlist') {
      playlistTypeList.value = playlistTypeList.value.filter(item => item.id !== row.id)
    }
    ElMessage.success('删除成功')
  }).catch(() => {})
}

// 提交表单
const submitForm = () => {
  // 实际应用中，这里应该调用API添加/编辑类型
  if (currentType.value) {
    // 编辑类型
    let index = -1
    let list = []
    
    if (activeTab.value === 'music') {
      list = musicTypeList.value
      index = list.findIndex(item => item.id === currentType.value.id)
    } else if (activeTab.value === 'singer') {
      list = singerTypeList.value
      index = list.findIndex(item => item.id === currentType.value.id)
    } else if (activeTab.value === 'playlist') {
      list = playlistTypeList.value
      index = list.findIndex(item => item.id === currentType.value.id)
    }
    
    if (index !== -1) {
      list[index] = {
        ...list[index],
        name: form.value.name,
        description: form.value.description
      }
      ElMessage.success('编辑成功')
    }
  } else {
    // 添加类型
    const newType = {
      id: Date.now(),
      name: form.value.name,
      description: form.value.description,
      count: 0
    }
    
    if (activeTab.value === 'music') {
      musicTypeList.value.push(newType)
    } else if (activeTab.value === 'singer') {
      singerTypeList.value.push(newType)
    } else if (activeTab.value === 'playlist') {
      playlistTypeList.value.push(newType)
    }
    
    ElMessage.success('添加成功')
  }
  
  dialogVisible.value = false
}

// 处理标签页切换
const handleTabChange = (tab) => {
  activeTab.value = tab
  
  if (tab === 'music' && !musicTypeList.value.length) {
    fetchMusicTypeList()
  } else if (tab === 'singer' && !singerTypeList.value.length) {
    fetchSingerTypeList()
  } else if (tab === 'playlist' && !playlistTypeList.value.length) {
    fetchPlaylistTypeList()
  }
}

// 获取当前类型文本
const getTypeText = () => {
  const typeTextMap = {
    music: '音乐',
    singer: '歌手',
    playlist: '歌单'
  }
  return typeTextMap[activeTab.value] || ''
}

// 获取当前类型列表
const getCurrentTypeList = () => {
  if (activeTab.value === 'music') {
    return musicTypeList.value
  } else if (activeTab.value === 'singer') {
    return singerTypeList.value
  } else if (activeTab.value === 'playlist') {
    return playlistTypeList.value
  }
  return []
}

// 获取当前加载状态
const getCurrentLoading = () => {
  return loading.value[activeTab.value] || false
}

onMounted(() => {
  fetchMusicTypeList()
})
</script>

<template>
  <div class="admin-type-container">
    <!-- 类型分类标签页 -->
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="音乐类型" name="music"></el-tab-pane>
      <el-tab-pane label="歌手类型" name="singer"></el-tab-pane>
      <el-tab-pane label="歌单类型" name="playlist"></el-tab-pane>
    </el-tabs>
    
    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="addType">
        <el-icon><plus /></el-icon>
        添加{{ getTypeText() }}类型
      </el-button>
    </div>
    
    <!-- 类型列表 -->
    <el-table
      :data="getCurrentTypeList()"
      stripe
      style="width: 100%"
      v-loading="getCurrentLoading()"
    >
      <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 prop="description" label="描述" min-width="200"></el-table-column>
      
      <el-table-column prop="count" label="使用数量" width="100" align="center"></el-table-column>
      
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="editType(scope.row)"
          >
            编辑
          </el-button>
          
          <el-button
            size="small"
            type="danger"
            @click="deleteType(scope.row)"
            :disabled="scope.row.count > 0"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
    >
      <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>
      
      <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>
  </div>
</template>

<style scoped>
.admin-type-container {
  padding: 20px;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.el-table :deep(.el-button) {
  margin-left: 0;
  margin-right: 5px;
  padding: 4px 8px;
}
</style>
