<template>
    <div class="hot-teacher">
        <div class="space-between">
            <img class="img" src="../../images/mins.png"/>
            <div @click="playMore" class="five-more gray fs11">
                更多<img src="../../images/right-throw.png" class="thorw-icon"/>
            </div>
        </div>
        <div class="teacher-item" :key="index" v-for="(item,index) in list">
            <div class="teacher-itemimg">
                <img :src="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="playFun(item)">
                        <img  class="five-radio" src="../../images/play.png"/>
                    </span>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'YqyFiveMinutes',
    data(){
        return {
            list:[]
        }
    },
    mounted(){
        this.getData();
    },
    methods: {
        //获取轮播图数据
        getData(){

            let _this = this,
            parm = {
                pageNo: 1, 
                token: 'ACEEFAE765AA4D9EB68BE80735845BF9',
                pageSize: 10

            }
            this.GET('contents/fiveMinutes/contents',parm).then(res => {
                if(res.respCode == '200'){

                    _this.list = res.fiveMinutesMedicalContentList || []
                }
            })
        },

        playMore(){

        },

        playFun(item){
            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) px2rem(26px);
    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(9px);
        padding: px2rem(3px) px2rem(5px) px2rem(2px) 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);
            float: left;
            img{
                width:100%;
                height: 100%;
                display: inline-block;
            }
        }
        .five-text{

            margin-left:px2rem(70px);
            height: px2rem(38px);
            
        }
        .teacher-itemname{
           
            color: RGBA(102, 102, 102, 1);
            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-color: px2rem(17px);
                border:1px solid #FAE5AF;
            }
        }
        .m-play{
            width: px2rem(22px);
            height: px2rem(22px);
            display: inline-block;
            position:absolute;
            right: 0;
            bottom: 0;
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }
}
</style>
