<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" @click="goToPage(item)">
            <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.stop="playFun(item)">
                        <img  class="five-radio" src="../../images/play.png"/>
                    </span>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import { pageJumpUrl} from '@/utils/index'
export default {
    name: 'YqyFiveMinutes',
    data(){
        return {
            list:[]
        }
    },
    mounted(){
        this.getData();
    },
    methods: {
        goToPage(item){
            let url = pageJumpUrl();
            //console.log(url);
            let itemData={
              "title":item.name,
              "imageUrl":"",
              "appModuleInfo":{
                  "code":"M300",
                  "type":4,
                  "name":"课程介绍页",
                  "paramFlag":1,
                  "paramList":[
                      {
                          "key":"pageUrl",
                          "value":url,
                          "type":4,
                          "seqNo":1
                      },
                      {
                          "key":"audioId",
                          "value":`${item.id}`,
                          "type":1,
                          "seqNo":2
                      }
                  ]
              }
          };
          let paramList = this.setEventByModuleCode(itemData);
          rocNative.dispatchEventByModuleCode({
              modeCode: itemData.appModuleInfo.code,
              jsonString: paramList
          })
        },

        //获取轮播图数据
        getData(){

            let _this = this,
            parm = {
                pageNo: 1, 
                // token: _this.token,
                pageSize: 10

            }
            let res = {"fiveMinutesMedicalContentList":[{"id":109,"title":"1312312","fileType":4,"filePath":"http://test-file.yunqueyi.com/audio/mp3/2018/06/09/2018060917174163-ef5bf97c.mp3","appImageUrl":"https://test-file.yunqueyi.com/image/jpeg/2018/06/09/20180609171335722-06552629.jpg","size":15463892,"totalTime":642,"publishTime":1528534800000,"categoryName":"政策播报"},{"id":109,"title":"1312312","fileType":4,"filePath":"http://test-file.yunqueyi.com/audio/mp3/2018/06/09/2018060917174163-ef5bf97c.mp3","appImageUrl":"https://test-file.yunqueyi.com/image/jpeg/2018/06/09/20180609171335722-06552629.jpg","size":15463892,"totalTime":642,"publishTime":1528534800000,"categoryName":"政策播报"},{"id":109,"title":"1312312","fileType":4,"filePath":"http://test-file.yunqueyi.com/audio/mp3/2018/06/09/2018060917174163-ef5bf97c.mp3","appImageUrl":"https://test-file.yunqueyi.com/image/jpeg/2018/06/09/20180609171335722-06552629.jpg","size":15463892,"totalTime":642,"publishTime":1528534800000,"categoryName":"政策播报"}],"respMsg":"成功","respCode":200}
             _this.list = res.fiveMinutesMedicalContentList || []
            this.GET('rest/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(28px);
            height: px2rem(28px);
            display: inline-block;
            position:absolute;
            right: 0;
            bottom: 0;
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }
}
</style>
