<template>
  <div>
    <h2>音乐库</h2>
    <el-button @click="fetchMusics">刷新列表</el-button>
    <el-button @click="dialogAddVisible = true">新增音乐</el-button>

    <!-- 搜索框 -->
    <el-input v-model="input" placeholder="请输入音乐名称" style="width: 300px"></el-input>
    <el-button @click="searchMusics">搜索</el-button>

    <el-table :data="musics" style="width: 100%">
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="singer" label="歌手" width="180"></el-table-column>
      <el-table-column prop="style" label="风格" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑音乐对话框 -->
    <el-dialog title="编辑音乐" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌手" :label-width="formLabelWidth">
          <el-input v-model="form.singer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="风格" :label-width="formLabelWidth">
          <el-input v-model="form.style" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增音乐对话框 -->
    <el-dialog title="新增音乐" :visible.sync="dialogAddVisible">
      <el-form :model="newMusic">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="newMusic.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌手" :label-width="formLabelWidth">
          <el-input v-model="newMusic.singer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="风格" :label-width="formLabelWidth">
          <el-input v-model="newMusic.style" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMusic">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MyMusic',
  data() {
    return {
      musics: [], // 确保初始化为数组
      form: {},
      newMusic: {},
      dialogFormVisible: false,
      dialogAddVisible: false,
      formLabelWidth: '120px',
      input: '' // 绑定搜索框的输入
    };
  },
  methods: {
    fetchMusics() {
      axios.get('http://localhost:8080/music/list')
        .then(response => {
          if (response.data && response.data.success && Array.isArray(response.data.data)) {
            this.musics = response.data.data;  // 提取实际的数据
          } else {
            console.error('Invalid response data:', response.data);
            this.musics = [];  // 如果响应数据无效，则清空列表
          }
        })
        .catch(error => {
          console.error('There was an error fetching the music list!', error);
          this.musics = [];  // 如果请求失败，则清空列表
        });
    },
    handleEdit(index, row) {
      this.form = Object.assign({}, row); // 复制对象
      this.dialogFormVisible = true;
    },
    submitForm() {
      axios.put(`http://localhost:8080/music/update/${this.form.id}`, this.form)
        .then(() => {
          this.fetchMusics();
          this.dialogFormVisible = false;
        })
        .catch(error => {
          console.error('There was an error updating the music!', error);
        });
    },
    handleDelete(id) {
      axios.delete(`http://localhost:8080/music/delete/${id}`)
        .then(() => {
          this.fetchMusics();
        })
        .catch(error => {
          console.error('There was an error deleting the music!', error);
        });
    },
    addMusic() {
      axios.post('http://localhost:8080/music/add', this.newMusic)
        .then(() => {
          this.fetchMusics();
          this.dialogAddVisible = false;
        })
        .catch(error => {
          console.error('There was an error adding the music!', error);
        });
    },
    searchMusics() {
      axios.get('http://localhost:8080/music/search', { params: { keyword: this.input } }) // 使用正确的变量名
        .then(response => {
          if (response.data && response.data.success && Array.isArray(response.data.data)) {
            this.musics = response.data.data;  // 提取实际的数据
          } else {
            console.error('Invalid response data:', response.data);
            this.musics = [];
          }
        })
        .catch(error => {
          console.error('There was an error searching the music list!', error);
          this.musics = [];
        });
    }
  },
  mounted() {
    this.fetchMusics(); // 页面加载时获取音乐列表
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>
怎么才能增加过多音乐的时候下滑滚动效果