<template>
<section>
    <GroupTitle groupTitle="5分钟医学院" groupNum="10"/>
    <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"/>
            </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>
    <ShowAllItem />
    <NoMoreItem v-show="false" />
    <SplitLine borderWidth="3px" />
</section>
</template>

<script>
import { pageJumpUrl } from '@/utils/index'
import GroupTitle from '@/components/business/group-title';
import NoMoreItem from '@/components/business/no-more-item';
import ShowAllItem from '@/components/business/show-all-item';
import SplitLine from '@/components/business/split-line';

export default {
    name: 'YqyFiveMinutes',
    data() {
        return {
            list: [],
            isPlay: false,
            id: ''
        }
    },
    components: {
        GroupTitle,
        NoMoreItem,
        ShowAllItem,
        SplitLine
    },   
    // 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;
        this.getFiveData()
    },
    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
            })
        },

        //五分钟医学院
        getFiveData() {
            let _this = this,
                parm = {
                    pageNo: 1,
                    pageSize: 4,
                    data: {
                        setEntry: 'headers'
                    }
                }
            this.API_GET('contents/fiveMinutes/contents', parm).then(res => {
                if (res.respCode == '200') {
                    _this.list = _this.handelFive(res.fiveMinutesMedicalContentList) || []
                }
            })
        },

        //处理五分钟数据 初始化播放状态
        handelFive(d) {
            for (let i = 0; i < d.length; i++) {
                d[i].play = '0';
            }
            return d;
        }

    },

}
</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;
    .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(75px);
        position: relative;
        margin-top: px2rem(4px);
        margin: px2rem(4px) 0 px2rem(15px);
        &: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: 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: #FFFDFA;
                /* 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;
            .play-opt {
                position: relative;
                width: px2rem(28px);
                height: px2rem(28px);
                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(8px);
                    height: px2rem(5px);
                }
                span:nth-child(2) {
                    left: px2rem(12px);
                    height: px2rem(15px);
                }
                span:nth-child(3) {
                    left: px2rem(16px);
                    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(8px);
                    -webkit-animation-delay: .1s;
                    animation-delay: .1s;
                }

                span:nth-child(2) {
                    left: px2rem(12px);
                    -webkit-animation-delay: .3s;
                    animation-delay: .3s;
                }

                span:nth-child(3) {
                    left: px2rem(16px);
                    -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>
