<template>
    <section>
        <GroupTitle groupTitle="5分钟医学院" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
        <div class="hot-teacher">
            <div :class="index>1 && (index+1 == cParamData.length)?'teacher-item item-end' : 'teacher-item'" :key="index" 
                v-for="(item,index) in cParamData" @click="goToPage(item)">
                <div class="teacher-itemimg">
                    <img :src="item.appImageUrl"/>
                    <!-- <img v-show="index >= 6" :src="item.appImageUrl"/> -->
                </div>
                    <div class="five-text">
                        <div class="teacher-itemname fs14" v-html="item.highLightTitle">{{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>
    </section>
</template>

<script>
import { mapGetters } from 'vuex'

import { sortParmData } from '@/utils/index'
import {
    m_search_result_five_minutes_detail,
    m_search_result_five_minutes_order, 
    m_search_result_five_minutes_top,
    } from '@/utils/buryingPoint'
import { pageJumpUrl } from '@/utils/index'
import GroupTitle from '@/components/business/group-title';

export default {
    name: 'YqyFiveMinutes',
    data() {
        return {
            list: [],
            isPlay: false,
            id: ''
        }
    },
    components: {
        GroupTitle
    },   
    props: {
        parmData: {
            type: Array,
            default: () => []
        },
        groupNum: {
            type: String,
            default: '0'
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        searchText: {
            type: String,
            default: ''
        },
        showOrder: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapGetters({
            cSearchText: 'cSearchText',
            orderNum: 'orderNum'
        }),
        cParamData() {
            if (this.list && this.list.length) {
                return this.list
            } else {
                return this.parmData
            }
        }
    },
    watch: {
        groupNum(val) {
            if (val > 100) {
                this.searchForOrder
            }
        },
        orderNum(val) {
            if (this.showOrder) {
                this.orderAction(1, true)
            }
        }
    },
    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() {

    },
    methods: {
        goToPage(item) {
            let obj = {

            }
            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({
                ...m_search_result_five_minutes_detail,
                labelValue: item.title,
                createdTime: new Date().getTime(),
            })

            let paramList = this.setEventByModuleCode(itemData);
            // alert(itemData.appModuleInfo.code)
            // alert(JSON.stringify(paramList))
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },

        changePlay(id, str) {
            //play : 1播放 2：暂停  0：初始状态
            for (let i = 0; i < this.parmData.length; i++) {
                if (id == this.parmData[i].id) {
                    if (str == '1') {
                        this.parmData[i].play = '1';
                    } else if (str == '2') {
                        this.parmData[i].play = '2';
                        // alert(str)
                    } else if (str == '0') {
                        this.parmData[i].play = '0';
                    }
                } else {
                    this.parmData[i].play = '0';
                }
            }
        },

        playFun(item) {
            console.log('sssss', 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
            })
        },

        //处理五分钟数据 初始化播放状态
        handelFive(d) {
            for (let i = 0; i < d.length; i++) {
                d[i].play = '0';
            }
            return d;
        },
        orderAction(orderIndex, notBP) {
            if(!notBP) {
                this.pageBurialPoin({
                    ...m_search_result_five_minutes_order,
                    labelValue: orderIndex,
                    createdTime: new Date().getTime(),
                })
            }
            this.searchForOrder('2', this.cSearchText, orderIndex, this.groupNum, this.parmData).then( param => {
                this.list = param
            })
        }

    },

}
</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>
