<template>
<section>
    <GroupTitle :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
    <div class="cource-teach">
        <div class="couse-list">
            <div 
              :class="index % 2 == 1 ? 'course-item end-left' : 'course-item'" 
                v-for="(item, index) in cParmData" :key="index">
                <div class="course-pic" @click="goToPage(item)">
                    <img :src="item.courseInfoUrl" class="pic-tec" />
                    <span class="course-tag">{{item.disName}}</span>
                </div>
                <!-- <p class="course-txt">
                    {{item.name}}
                </p> -->
                <p class="course-txt" v-html="item.name">
                    
                </p>
                <div class="course-opt">
                    <span class="opt-info">{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span>
                    <span :class="item.whetherFavors==2?'opt collect':'opt collected'"@click="collectFun(item.whetherFavors,item.id,item.name)">
              {{item.whetherFavors==2?'收藏':'已收藏'}}
            </span>

                </div>
            </div>
        </div>
        <div v-if="cParmData.length==0" class="noSource">暂无最新教程数据</div>
    </div>
</section>
</template>

<script>
//import { setEventByModuleCode } from '@/utils/index'
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 cParamDataw = this.parmData.map(function(item){
                let cItem = Object.assign({}, item)
                cItem.name = cItem.name + ' (' + mapDesc[cItem.highLightField] + ')'
                return cItem
            })
            return cParamDataw
        },
        // groupNum() {
        //     return this.parmData.length + ''
        // }
    },
    components: {
        GroupTitle
    },
    mounted() {
        // this.getData()
        // this.list = this.parmData;
    },
    // filters: {
    //     filterName(name, highLightField){
    //         return name + highLightField
    //     }
    // },
    methods: {
        getDescByMap(index) {
            
        },
        showAllItem(index) {
            // this.needShow = !this.needShow
        },
        //跳转
        goToPage(item) {
            this.$emit("setRefrshParm", {
                isclick: true
            })
            this.pageBurialPoin({
                menuLevel: 1,
                menuCode: 'm_home',
                functionCode: 'f_new_course',
                actionCode: 'c_course',
                labelId: item.id,
                labelValue: item.name,
            })
            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
            })

        },

        //收藏 取消收藏
        collectFun(status, id, name) {
            // alert(this.userToken)
            status = status == 1 ? 2 : 1;
            this.pageBurialPoin({
                menuLevel: 1,
                menuCode: 'm_home',
                functionCode: 'f_new_course',
                actionCode: 'c_collect',
                labelId: id,
                labelValue: name,
            })
            let _this = this,
                parm = {
                    token: _this.userToken,
                    type: status,
                    courseId: id,
                    setEntry: 'headers'
                }
            _this.POST('contents/favors', parm).then(function (res) {
                if (res.code === '000000') {
                    _this.handelData(id, status);
                } else {
                    rocNative.showNativeToast({
                        message: '注册登陆后才能收藏哦'
                    })
                }
            })
        },
        handelData(id, status) {
            let d = this.parmData;
            for (let i = 0; i < d.length; i++) {
                if (id == d[i].id) {
                    d[i].whetherFavors = status;
                }
            }
        },
        getData() {
            //alert("最新课程");
            let _this = this,
                parm = {
                    pageNo: _this.pageNo,
                    pageSize: _this.pageSize,
                    token: _this.userToken,
                    setEntry: 'headers'
                }
            _this.GET('/contents/HomeNewCourse/NewCourseInformation', parm).then(function (res) {

                if (res.code === '000000') {
                    _this.parmData = res.data.contentAppModels || [];
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
@import '../../style/global.scss';
@import '../../style/mixin.scss';

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    width: px2rem(170px);
}

.couse-list {
    overflow: hidden;
}

.get-more {
    border: 1px solid RGBA(169, 174, 183, 0.5);
    border-radius: px2rem(16px);
    padding: 0 px2rem(5px) 0 px2rem(6px);
    vertical-align: middle;
    display: inline-block;
    float: right;
    margin-top: px2rem(3px);
    height: px2rem(16px);
    line-height: px2rem(16px);
    font-size: px2rem(11px);
}

.thorw-icon {
    width: px2rem(8px);
    height: px2rem(8px);

}

.noSource {
    text-align: center;
    font-size: px2rem(13px);
    padding: px2rem(13px) 0;
    color: #999;
}

.cource-teach {
    padding: 0 px2rem(15px);
}

.course-item {
    float: left;
    margin-bottom: px2rem(19px);
    margin-right: px2rem(5px);
}

.end-left {
    margin-right: 0;
}

.course-pic {
    width: px2rem(170px);
    height: px2rem(95px);
    border-radius: px2rem(3px);
    position: relative;

    .pic-tec {
        width: 100%;
        height: 100%;
        border-radius: px2rem(3px);
        display: block;
    }

    .course-tag {
        position: absolute;
        display: inline-block;
        top: px2rem(5px);
        left: px2rem(5px);
        line-height: px2rem(16px);
        height: px2rem(16px);
        color: #4A87D4;
        padding: 0 px2rem(3px);
        background: #FAFCFF;
        border: 1px solid #C3DCFB;
        font-size: px2rem(10px);
        border-radius: px2rem(2px);
    }
}

.course-txt {
    margin-top: px2rem(5px);
    font-size: px2rem(14px);
    line-height: px2rem(19px);
    max-height: px2rem(38px);
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    width: px2rem(170px);
}

.opt-info {
    color: #999;
}

.course-opt {
    font-size: px2rem(12px);
    /* margin-top: px2rem(6px);*/
    position: relative;

    .opt {
        display: inline-block;
        top: 0;
        right: 0;
        position: absolute;
        height: px2rem(18px);
        line-height: px2rem(18px);
        padding: 0 px2rem(4px);

    }

    .collect {
        background: #F7F8F9;
        color: #666;
    }

    .collected {
        color: #F47A48;
        background: RGBA(244, 122, 72, 0.04);

    }
}

.title {
    font-size: px2rem(18px);
    height: px2rem(18px);
    margin: 0 0 px2rem(21px) 0;
    font-weight: bold;
    color: #28344C
}
</style>
