<template>
<section>
    <GroupTitle ref="courseListGT" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
    <div class="hot-teacher">
        <!-- <div :class="index>1 && (index+1 == cParmData.length)?'teacher-item item-end' : 'teacher-item'" :key="index"  -->
        <div :class="index>1 && (index+1 == cParmData.length)?'teacher-item item-end' : 'teacher-item'" :key="index" 
            v-for="(item,index) in cParmData" @click="goToPage(item)">
                <div class="teacher-itemimg">
                    <img :src="item.courseInfoUrl"/>
                </div>
                <div class="five-text">
                    <div class="teacher-itemname fs14 ellipsis-2" >
                        <span v-show="item.typeName" class="teacher-itemname-tag">{{item.typeName}}</span>
                        <span class="teacher-itemname-name" v-html="item.highLightName"></span>
                    </div>
                    <div class="fs13 ellipsis-1" >
                        <span class="five-text-shourtcut" v-html="item.shortcut">{{item.shortcut}}</span>
                    </div>
                    <div class="fs13 five-text-teacher">
                        <img src="../../images/teacher-icon.png" /><span class="five-text-teacher-name" v-for="(doctor, dIndex) in item.doctors" :key="dIndex">
                            {{doctor.doctorName}}
                            <!-- {{item.doctors[0].doctorName}} -->
                        </span>
                    </div>
            </div>
        </div>
    </div>

</section>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { sortParmData } from '@/utils/index'
import {
    m_search_result_course_detail,
    m_search_result_course_order, 
    m_search_result_course_more,
    m_search_result_course_top
    } from '@/utils/buryingPoint'
import GroupTitle from '@/components/business/group-title';
let mapDesc = ['', '课程名', '关键字', '一句话简介', '章', '节']
export default {
    name: 'CourseList',
    data() {
        return {
            list: [],
            title: '最新课程',
            pageNo: 1,
            pageSize: 6,
            needShow: true
            // parmData: []
        }
    },
    props: {
        userToken: {
            type: String,
            default: ''
        },
        parmData: {
            type: Array,
            default: () => []
        },
        groupNum: {
            type: String,
            default: '0'
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        showOrder: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        cParmData() {
            let cCourseList = []
            if (this.list && this.list.length) {
                cCourseList = this.list.slice()
            } else {
                cCourseList = this.parmData.slice()
            }
            return cCourseList.map(function(item){
                let cItem = Object.assign({}, item)
                if(cItem.highLightField) {
                    cItem.highLightName = cItem.highLightName + ' (' + mapDesc[cItem.highLightField] + ')'
                }
                return cItem
            })
        },
        ...mapGetters({
            cSearchText: 'cSearchText',
            orderNum: 'orderNum'
        })
    },
    watch: {
        orderNum(val) {
            if (this.showOrder) {
                this.orderAction(1, true)
            }
        }
    },
    components: {
        GroupTitle
    },
    mounted() {

    },
    methods: {
        //跳转
        goToPage(item) {
            // this.$emit("setRefrshParm", {
            //     isclick: true
            // })
            this.pageBurialPoin({
                ...m_search_result_course_detail,
                labelValue: item.name,
                createdTime: new Date().getTime(),
            })
            let itemData = {};

            if (item == '') {

                itemData = {
                    "title": item.name,
                    "imageUrl": "",
                    "appModuleInfo": {
                        "code": "M200",
                        "type": 4,
                        "name": "课程介绍页",
                        "paramFlag": 1,
                        "paramList": [{
                                "key": "className",
                                "value": "com.picahealth.yunque.activitys.famousteacherschool.AllDiseaseActivity###MicroProfessionMoreTableController",
                                "type": 4,
                                "seqNo": 1
                            },
                            {
                                "key": "disCategoryId",
                                "value": '-1',
                                "type": 1,
                                "seqNo": 2
                            }
                        ]
                    }
                };
            } else {
                itemData = {
                    "title": item.name,
                    "imageUrl": "",
                    "appModuleInfo": {
                        "code": "M200",
                        "type": 4,
                        "name": "课程介绍页",
                        "paramFlag": 1,
                        "paramList": [{
                                "key": "className",
                                "value": "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
                                "type": 4,
                                "seqNo": 1
                            },
                            {
                                "key": "courseId",
                                "value": `${item.id}`,
                                "type": 1,
                                "seqNo": 2
                            }
                        ]
                    }
                };
            }

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

        // resetGT() {
        //     this.$refs.courseListGT.resetShowOrderIndex()
        // },
        orderAction(orderIndex, notBP) {
            if(!notBP) {
                this.pageBurialPoin({
                    ...m_search_result_course_order,
                    labelValue: orderIndex,
                    createdTime: new Date().getTime(),
                })
            }
            this.searchForOrder('1', this.cSearchText, orderIndex, this.groupNum, this.parmData).then( param => {
                // this.$refs.courseListGT.resetShowOrderIndex()
                this.list = param
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/global.scss';
@import '../../style/mixin.scss';
.course-list {
    margin: 0 px2rem(15px);
    &-item {
        display: flex;
        flex-direction: row;
        img {
            height: px2rem(56px);
            width: px2rem(100px);
            margin-right: px2rem(10px);
            border-radius: px2rem(6px);
        }
        &-desc {
            display: flex;
            flex-direction: column;
            position: relative;
            // span {
            //     display: inline-flex;
            // }
            &-type {
                display: inline-flex;
                height: px2rem(18px);
                width: px2rem(30px);
                padding: 0 px2rem(2px);
                margin-right: px2rem(5px);
                font-size: px2rem(11px);
                border-radius: px2rem(2px);
                background-color: #6A9FE9;
                color: #fff;
            }
            &-name {
                display: inline-flex;
                font-size: px2rem(16px);
                height: px2rem(16px);
                width: px2rem(200px);
                line-height: px2rem(16px);
                color: #333333;
            }
        }
    }
}

</style>

<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(106px);
        position: relative;
        margin: px2rem(4px) 0 px2rem(15px);
        padding-top: px2rem(4px);
        &:not(:last-child) {
            border-bottom: 1px solid RGBA(240, 240, 240, 1);
        }

        .teacher-itemimg {
            width: px2rem(100px);
            height: px2rem(56px);
            margin-right: px2rem(10px);
            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);
            &-shourtcut {
                font-size: px2rem(14px);
                color: #777;
            }
            &-teacher {
                margin-top: px2rem(4px);
                height: px2rem(20px);
                line-height: px2rem(20px);
                margin-left: px2rem(40px);
                img {
                    width: px2rem(10px);
                    height: px2rem(10px);
                    margin-right: px2rem(2px);
                    color: #777;
                }
                &-name {
                    // margin-left:40px;
                    // padding-top:10px;
                    margin-left: 0 !important;
                    padding-left: 0;
                    font-size: px2rem(13px);
                    color: #999;
                }
            }
        }

        .teacher-itemname {
            color: RGBA(102, 102, 102, 1);
            height: px2rem(36px);
            line-height: px2rem(19px);
            font-size: px2rem(13px);
            margin-bottom: px2rem(5px);
            &-tag {
                vertical-align: top;
                height: px2rem(20px);
                line-height: px2rem(20px);
                padding: px2rem(2px) px2rem(3px) px2rem(1px);
                border-radius: px2rem(2px);
                font-size: px2rem(12px);
                color: #fff;
                background: rgba(106,159,233,1);
            }
            &-name {
                height: px2rem(18px);
                line-height: px2rem(18px);
                font-size: px2rem(16px);
                color: #333;
            }
        }

        .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(92px);
    }
}
.ellipsis-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    white-space: nowrap;
}
.ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    // white-space: nowrap;
}
</style>
