<template>
  <div class="collection-page">
    <div class="collection-content" v-if="!noOne">
      <div class="top-play">
        <img :src="playAllUrl" class="play-all-img">
        <div>
          收藏夹<span class="top-tips">（共{{total}}首）</span>
        </div>
      </div>
      <ul
        class="collection-list"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading">
        <li v-for="(data,index) in showObj.audio"  @click="showAudio(index)">
          <div class="index">{{index+1}}</div>
          <div class="text">
            <div class="title">
              {{data.title}}
            </div>
            <div class="sub-title">
              {{data.sub_title}}
            </div>
          </div>
          <img class="play-icon" v-if="index!==showObj.audioIndex" :src="playDefaultUrl"/>
          <img class="play-icon" v-if="index===showObj.audioIndex" :src="playActiveUrl"/>
        </li>
      </ul>
    </div>
    <div v-if="noOne" class="unStart" >
      <img :src="errorUrl" alt="">
      <p>还没有收藏哦~</p>
      <div @click="toList()">快去收藏添加吧~</div>
    </div>
    <!-- <div v-if="noOne" class="noOne">
      <img :src="errorUrl">
      <div class="text">
        还没有收藏哦
        <br>
        快去课程里添加吧
      </div>
      <div class="btn" @click="toList()">
        去添加
      </div>
    </div> -->
    <foot-page/>
    <audio-page ref="audioPage" v-if="showObj.audio.length>0" sc="0" v-show="showObj.show" :showObj="showObj"/>

  </div>
</template>

<script>

  import {getUserCollectApi} from "../../service/api";
  import errorUrl from '../../assets/collectionless.png'
  import playAllUrl from '../../assets/newLesson/audio-play-all.png'
  import playDefaultUrl from '../../assets/newLesson/zDefaultIcon.png'
  import playActiveUrl from '../../assets/newLesson/zIcon.png'
  import footPage from '../public/bottomTab'
  import audioPage from './audio'

  export default {
    name: "index",
    components:{
      footPage,
      audioPage
    },
    data(){
      return {
        errorUrl:errorUrl,
        playAllUrl:playAllUrl,
        noOne:false,
        playDefaultUrl:playDefaultUrl,
        playActiveUrl:playActiveUrl,
        showObj:{
          audio:[],
          audioIndex:0,
          show:false
        },
        audioShow:false,
        page:1,
        loading:false,
        total:0
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      loadMore(){
      },
      toList(){
        this.$router.push({name:'map'})
      },
      showAudio(index){
        this.showObj.audioIndex = index;
        this.showObj.show = true
        this.$refs.audioPage.onPlay()
      },
      initPage(){
        getUserCollectApi({limit:100000}).then(res=>{
          if(res.list.length < 1){
            this.noOne =true
          }else{
            this.showObj.audio =res.list;
            this.total = res.total;
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  @import "../../util/public";
  .audio-hear{background:url('https://static-cdn.changchangenglish.com/new-sing/static/imagesaudio-hear.png')  no-repeat;background-size:18*@toVw 50*@toVw;display: inline-block}
  ._27377740323539322{height:14*@toVw;width:16*@toVw;background-position:0 0;}
  .zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -14*@toVw;}
  .zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -32*@toVw;}
  .noOne{
    padding-top: 86*@toVw;
    text-align: center;
    img{
      width: 164*@toVw;
    }
    .text{
      margin-top: 20*@toVw;
      font-size:16px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .btn{
      margin-top: 26*@toVw;
      width:91*@toVw;
      height:32*@toVw;
      border-radius:18*@toVw;
      border:1*@toVw solid rgba(255,120,117,1);
      line-height: 32*@toVw;
      font-size:14px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(255,120,117,1);
    }
  }
  .collection-page{
    // background: #eeeeee;
    .unStart{
        text-align: center;
        img{width:300*@toVw;}
        p{line-height: 22px;font-size: 16px;color: #666666;}
        div{width:250*@toVw;height: 40*@toVw;line-height:40*@toVw;background: #40A9FF;color: white;border-radius: 20*@toVw;margin-top: 72*@toVw }
      }
    .collection-content{
      background: white;
      position: absolute;
      top: 20*@toVw;
      border-radius: 8*@toVw;
      left: 20*@toVw;
      right: 20*@toVw;
      bottom: 80*@toVw;
      padding: 20*@toVw;
      overflow: auto;
      margin: auto;
      .top-play{
        height: 52*@toVw;
        border-bottom: 1*@toVw solid #eee;
        display: flex;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(0,0,0,1);
        .top-tips{
          font-size:12px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
        img{
          width: 25*@toVw;
          margin-right: 10*@toVw;
        }
        div{
          margin-left: 10*@toVw;
        }
        .play-all-img{
          margin: auto 0;
          width: 16*@toVw;
          vertical-align: middle;
        }

      }
      .collection-list{
        list-style: none;
        margin: 0;
        padding: 0;
        li{
          height: 52*@toVw;
          border-bottom: 1*@toVw solid #eee;
          display: flex;
          .index{
            width: 15*@toVw;
            margin: auto 0;
            font-size:18*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
          .text{
            margin-left: 10*@toVw;
            .title{
              font-size:16*@toVw;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(0,0,0,1);
            }
            .sub-title{
              font-size:12*@toVw;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(153,153,153,1);
            }
          }
          .play-icon{
              width: 25*@toVw;
              margin-right: 10*@toVw;
          }
        }
      }
    }
  }

  @media screen and (orientation: landscape) {
    @toVw:100/667vw;
    .audio-hear{background:url('https://static-cdn.changchangenglish.com/new-sing/static/imagesaudio-hear.png')  no-repeat;background-size:18*@toVw 50*@toVw;display: inline-block}
    ._27377740323539322{height:14*@toVw;width:16*@toVw;background-position:0 0;}
    .zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -14*@toVw;}
    .zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -32*@toVw;}
    
    .collection-page{
      background: #eeeeee;
      
      .collection-content{
        background: white;
        position: absolute;
        top: 20*@toVw;
        border-radius: 8*@toVw;
        left: 20*@toVw;
        right: 20*@toVw;
        bottom: 50*@toVw;
        padding: 20*@toVw;
        overflow: auto;
        margin: auto;
        .top-play{
          height: 52*@toVw;
          border-bottom: 1*@toVw solid #eee;
          display: flex;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(0,0,0,1);
          .top-tips{
            font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
          img{
            width: 25*@toVw;
            margin-right: 10*@toVw;
          }
          div{
            margin-left: 10*@toVw;
          }
          .play-all-img{
            margin: auto 0;
            width: 16*@toVw;
            vertical-align: middle;
          }

        }
        .collection-list{
          list-style: none;
          margin: 0;
          padding: 0;
          li{
            height: 52*@toVw;
            border-bottom: 1*@toVw solid #eee;
            display: flex;
            .index{
              width: 15*@toVw;
              margin: auto 0;
              font-size:18*@toVw;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(153,153,153,1);
            }
            .text{
              margin-left: 10*@toVw;
              .title{
                font-size:16*@toVw;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(0,0,0,1);
              }
              .sub-title{
                font-size:12*@toVw;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(153,153,153,1);
              }
            }
            .play-icon{
              width: 25*@toVw;
              margin-right: 10*@toVw;
            }
          }
        }
      }
    }
  }
</style>
