<template>
  <div class="container">
      <div class="content">
        <div class="items" v-if="show">
            <div v-for="item in list" :key="item.id" @click="toDetail(item)">
              <div class="inner">
                <img :src="item.coverImg" class="img"/>
              </div>
            </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </div>
    </div>
</template>

<script>
import { sysMusicScoreCategoriesTree } from './api'
export default {
  name: 'baseList',
  data() {
    return {
      list: [],
      show: false,
    }
  },
  async mounted() {
    try {
      const res = await sysMusicScoreCategoriesTree()
      this.list = res.data || []
      this.show = this.list.length > 0 ? true : false
    } catch(e) { }
  },
  methods: {
    toDetail(item) {
      const childLength = item.sysMusicScoreCategoriesList ? item.sysMusicScoreCategoriesList.length : 0
      // 如果二级分类只有一个分类，则直接跳转到曲目列表
      sessionStorage.setItem('musicScoreList', JSON.stringify(item.sysMusicScoreCategoriesList))
      if(childLength > 1) {
        this.$emit('onDetail', {
          path: 'classify',
          parentId: item.id // 父级元素编号
        })
      } else {
        this.$emit('onDetail', {
          path: 'list',
          id: (childLength == 1 ? item.sysMusicScoreCategoriesList[0].id : item.id)
        })
      }
    },
  }
}
</script>


<style lang="less" scoped>
.container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    background-color: #F5F5F5;
    padding: 12px;
    .items{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      align-items: space-around;
      >div{
        margin-bottom: .15rem;
        text-align: center;
        width: 100%;
        .inner {
          width: 100%;
          margin: 0 auto;
        }
        .img{
          margin-top: 0;
          width: 100%;
        }
        :global {
          .van-image, .van-image__error,.van-image__loading {
            width: 100%;
            min-height: 1.4rem;
          }
        }
      }
    }
  }
}

</style>