<template>
  <div class="cloudCoachList">
    <div class="name">乐谱</div>
    <div class="listCon">
      <div class="list" v-for="item in listData" :key="item.id">
        <div>曲目名称：{{ item.name }}</div>
        <ElButton @click="handleUpdate(item.id)">添加</ElButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from "element-plus"
import { getMaterialQueryPage } from "@/api/pptOperate"
import { httpAjax } from "@/plugins/httpAjax"
import { ref } from "vue"

const emit = defineEmits<{
  (event: "update", id: string): void
}>()
function handleUpdate(id: string) {
  emit("update", id)
}

const listData = ref<any[]>([])
httpAjax(getMaterialQueryPage, {
  type: "MUSIC",
  sourceType: 2,
  enableFlag: true,
  page: 1,
  rows: 20
}).then(res => {
  if (res.code === 200) {
    listData.value = res.data.rows
  }
})
</script>

<style lang="scss" scoped>
.cloudCoachList {
  padding: 40px;
  width: 100%;
  height: 100%;
  .name {
    height: 40px;
    font-size: 20px;
  }
  .listCon {
    height: calc(100% - 40px);
    overflow: auto;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
    }
  }
}
</style>
