<template>
    <div class="hot-teacher" >
        <div class="space-between" id="fiveBoxMenu">
            <img class="img" src="../../images/mins.png"/>
            <div @click="goToPage('')" class="five-more gray fs11">
                更多<img src="../../images/right-throw.png" class="thorw-icon"/>
            </div>
        </div>
        <div :class="index>1 && (index+1 == list.length)?'teacher-item item-end' : 'teacher-item'" :key="index" v-for="(item,index) in list" @click="goToPage(item)">
            <div class="teacher-itemimg">
                <img v-lazy="item.appImageUrl" :key="item.appImageUrl"/>
            </div>
            <div class="five-text">
                <div class="teacher-itemname fs14">{{item.title}}</div>
                <div class="five-tag fs11">
                    <span class="m-tag">#{{item.categoryName}}</span>
                    <span class="m-play" @click.stop="playFun(item)">

                        <div class="play-opt play-start" v-show="item['play'] =='1'">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="play-opt play-stop" v-show="item.play == '2'">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <img  class="five-radio" src="../../images/play.png" v-if="item.play == '0'"/>
                    </span>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import { pageJumpUrl} from '@/utils/index'
export default {
    name: 'YqyFiveMinutes',
    data(){
        return {
            list:[],
            isPlay:false,
            id:''
        }
    },
    props:{
        parmData:{
            type:Array,
            default:[]
        }
    },
    created(){
        let _this = this;

        //暂停
        window.__pauseAudioView = function(parm){

           _this.changePlay(_this.id,'2');
        }

        //开始
        window.__playAudioView = function(parm){
           _this.changePlay(_this.id,'1');
        }

        window.__closeAudioView = function(parm){
           _this.changePlay(_this.id,'0');
        }
    },  
 
    mounted(){
        //console.log(this.parmData);
        this.list = this.parmData;
    },
    methods: {
        goToPage(item){
            let obj = {

            }
            
            ///console.log(item);
            let url = pageJumpUrl();
          //  console.log(url.pageListUrl);
            let itemData={
               
                "imageUrl":"",
                "appModuleInfo":{
                    "code":"M200",
                    "type":4,
                    "name":"课程介绍页",
                    "paramFlag":1,
                    "paramList":[]
                }
            };
            if(!!item){
                obj = {
                    menuLevel:1,
                    menuCode:'m_home',
                    functionCode:'f_five_minutes',
                    actionCode:'c_content',
                    labelId:item.id,
                    labelValue :item.title,
                }
                itemData.title = item.name;
                itemData.appModuleInfo["paramList"] = [
                    {
                          "key":"className",
                          "value":'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
                          "type":4,
                          "seqNo":1
                    },
                    {
                          "key":"id",
                          "value":`${item.id}`,
                          "type":1,
                          "seqNo":2
                    }
                ]
            }else{
                obj = {
                    menuLevel:1,
                    menuCode:'m_home',
                    functionCode:'f_five_minutes',
                    actionCode:'c_all'
                }
                
                itemData.appModuleInfo.paramList = [
                    {
                          "key":"className",
                          "value":'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
                          "type":4,
                          "seqNo":1
                    }
                ]
            }
            this.pageBurialPoin(obj)
            
          let paramList = this.setEventByModuleCode(itemData);
          rocNative.dispatchEventByModuleCode({
              modeCode: itemData.appModuleInfo.code,
              jsonString: paramList
          })
        },
    
        changePlay(id,str){
            //play : 1播放 2：暂停  0：初始状态
            
            for(let i=0;i<this.list.length;i++){
                if(id == this.list[i].id){
                    if(str == '1'){
                        this.list[i].play = '1';
                    }else if(str == '2'){
                        this.list[i].play = '2';
                       // alert(str)
                    }else if(str == '0'){
                        this.list[i].play = '0';
                    }
                    
                }else{
                    this.list[i].play = '0';
                }
               
            }
        },

        playFun(item){

            this.id = item.id;//保存id
            this.changePlay(item.id,'1');
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_five_minutes',
                actionCode:'c_play',
                labelId:item.id,
                labelValue :item.title,
            })
            rocNative.openFiveMintusAudio({
                categoryName: item.categoryName,
                appImageUrl: item.appImageUrl,
                publishTime: item.publishTime,
                id: item.id,
                filePath: item.filePath,
                title: item.title,
                size:item.size,
                isPlay: true,
                fileType: item.fileType,
                totalTime: item.totalTime
            })
        }
    },
    
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hot-teacher{
    width: 100%;
    background-color: #fff;
    padding: 0 px2rem(15px) 0;
    margin-top:px2rem(15px);
    .img{
        width: px2rem(109px);
        height: px2rem(22px);
    }
    .thorw-icon{
        width: px2rem(8px);
        height: px2rem(8px);

    }
    .five-more{
        border: 1px solid RGBA(169, 174, 183, 1);
        border-radius: px2rem(16px);
        height: px2rem(16px);
        line-height: px2rem(16px);
        padding: 0 px2rem(5px) 0 px2rem(6px);
        vertical-align: middle;
    }
    .teacher-item{
        width: 100%;
        height: px2rem(85px);
        position: relative;
        margin-top: px2rem(20px);
        &:not(:last-child){
            border-bottom: 1px solid RGBA(240, 240, 240, 1);
        }
        .teacher-itemimg{
            width: px2rem(60px);
            height: px2rem(60px);
            border-radius: px2rem(3px);
            box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(0, 78, 64, 0.1);
            float: left;
            img{
                width:100%;
                height: 100%;
                display: inline-block;
                border-radius: px2rem(3px);
            }
        }
        .five-text{

            margin-left:px2rem(70px);
            height: px2rem(38px);
            
        }
        .teacher-itemname{
           
            color: #333;
            height: px2rem(38px);
            line-height: px2rem(19px);
            font-size: px2rem(14px);
            margin-bottom: px2rem(5px);
        }
        .five-tag{
            position: relative;
            padding-right: px2rem(25px);
           
            .m-tag{
                height: px2rem(17px);
                line-height: px2rem(17px);
                padding: 0 px2rem(5px);
                color: #BF9E15;
                border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
                background: #FFFDFA;
               /* background-color: px2rem(17px);*/
                border:1px solid #FAE5AF;
            }
        }


        .m-play{
            width: px2rem(25px);
            height: px2rem(25px);
            display: inline-block;
            position:absolute;
            right: 0;
            bottom: 0;
            .play-stop{

            }
            .play-opt{
                position:relative;
                width: px2rem(25px);
                height: px2rem(25px);
                border:1px solid #56c3bb;
                border-radius:50%;
                span{
                    width:px2rem(3px);
                    height: px2rem(5px);
                    bottom:px2rem(5px);
                    position:absolute;
                    background:#56c3bb;
                    border-radius: 2px 2px 0 0;
                    
                }
                
            }
            .play-stop{
                
                span:first-child{
                    left:px2rem(6px);
                    height: px2rem(5px);
                }
     
                span:nth-child(2){
                    left:px2rem(10px);
                   height: px2rem(15px);
     
                }
               span:nth-child(3){
                    left:px2rem(14px);
                   height: px2rem(10px);
                }
                
            }
            .play-start{
                span{
                    
                    -webkit-animation: bodong 0.5s infinite  ease-in-out alternate;
                    animation: bodong 0.5s infinite  ease-in-out alternate;
                }
                span:first-child{
                    left:px2rem(6px);
                    -webkit-animation-delay:.1s;
                    animation-delay:.1s;
                }
     
               span:nth-child(2){
                    left:px2rem(10px);
                    -webkit-animation-delay:.3s;
                    animation-delay:.3s;
                }
               span:nth-child(3){
                    left:px2rem(14px);
                     -webkit-animation-delay:.5s;
                     animation-delay:.5s;
                }
                @-webkit-keyframes bodong{
                    0%{height:px2rem(5px); }
                    30%{height:px2rem(10px);}
                    60%{height:px2rem(15px);}
                    80%{height:px2rem(10px);}
                    100%{height:px2rem(5px);}
                }
                @keyframes bodong{
                    0%{height:px2rem(5px); }
                    30%{height:px2rem(10px);}
                    60%{height:px2rem(15px);}
                    80%{height:px2rem(10px);}
                    100%{height:px2rem(5px);}
                }
            }
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }
    .item-end{
        height: px2rem(60px);
    }
}
</style>
