<template>
<section>
    <GroupTitle groupTitle="健康漫画" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
    <div class="font-style">
        <div class="teach-opt">
            <div class="teach-list">
                <div :class="index%2==1 ? 'list-item mr0':'list-item'" 
                    v-for="(item, index) in parmData" :key="index"
                    @click="goToPage(item)">
                    <div class="tea-img" :style="'background:'+ item.bgColor">
                        <img v-lazy="item.imageUrl">
                        <!-- <span class="learn-p">{{item.joinNum}}人已学</span> -->
                        <!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
                    </div>
                    <div class="tea-txt">
                        <!-- <div class="tea-name">{{item.doctorName}}</div> -->
                        <div class="tea-position">
                            {{item.headerName}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</template>

<script>
// import teacherTop from '../../components/teachers/teach-top-new';
// import {
//     teacher_back,
//     fast_sicon,
//     hot_teacher,
//     screen,
//     teacher,
//     teacherother
// } from '../../utils/buryingPoint';
import GroupTitle from '@/components/business/group-title';
export default {
    components: {
        GroupTitle
    },
    props: {
        parmData: {
            type: Array,
            default: () => []
        },
        groupNum: {
            type: String,
            default: '0'
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        showOrder: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        // groupNum() {
        //     return this.parmData.length + ''
        // }
    },
    data() {
        return {
            topTitle: '讲师集',
            isScroll: false,
            token: '',
            list: [],
            isShowCount: true,
            followCount: 0,
            studyCount: 0,
            col: 1, //0综合，1人气，2资源数，3姓名首字母
            dir: 2, //1:正序 2：逆序
        }
    },
    mounted() {
        let _this = this
        this.token = this.$route.query.userToken || this.$route.query.token
        // this.getUserInfo()

        // this.getData();

        // window.__getUserInfo = function(parm){
        //     // alert('in __getUserInfo')
        //     _this.token = parm.userToken || _this.$route.query.token;
        //     this.getData();
        // }
        window.__refresh = function (parm) {
            _this.getData();
        }
        window.addEventListener('scroll', this.handleScroll)

    },
    methods: {
        handleScroll: function () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 25) {
                this.isScroll = true;
            } else {
                this.isScroll = false;
            }
        },
        //获取版本号
        getUserInfo() {
            rocNative.getUserInfo({
                __funcName: '__getUserInfo'
            })
        },
        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": []
                }
            };
            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.webs.CaricatureDetailActivity###EducationDetailViewController',
                    // "value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
                    "type": 4,
                    "seqNo": 1
                },
                {
                    "key": "id",
                    "value": `${item.id}`,
                    "type": 1,
                    "seqNo": 2
                }
            ]
            
            this.pageBurialPoin(obj)

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

        goToDetail(item) {
            let _this = this;
            this.$router.push({
                path: '/teachersDetail',
                query: {
                    id: item.doctorId,
                    token: _this.token
                }
            })
            // this.appBuryingPointEntrust({
            //     ...teacher,
            //     labelId: item.doctorId,
            //     labelValue: item.doctorName
            // })
        },
        // 埋点
        appBuryingPointEntrust(val) {
            rocNative.appBuryingPointEntrust(val)
        },

        //排序
        sortFun() {
            this.dir = this.dir == 1 ? 2 : 1;
            this.getData()
        },

        randomBg(d) {
            for (let i = 0; i < d.length; i++) {
                if (i % 4 == 0) {
                    d[i].bgColor = '#EBF6F1'
                } else if (i % 4 == 1) {
                    d[i].bgColor = '#EDF3FA'
                } else if (i % 4 == 2) {
                    d[i].bgColor = '#F0F0FA'
                } else if (i % 4 == 3) {
                    d[i].bgColor = '#F6EFE6'
                }
            }
            /// console.log(d);
        },

        getData() {
            let _this = this,
                para = {
                    token: _this.token,
                    setEntry: 'headers'
                }
            let url = '/contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
            this.GET(url, para).then(res => {
                if (res.code == '000000') {
                    _this.list = res.data.teacherList || [];
                    _this.followCount = res.data.followCount || 0;
                    _this.studyCount = res.data.studyCount || 0;
                    if (_this.list.length > 0) {
                        _this.randomBg(_this.list);
                    }

                }
            })
            // this.appBuryingPointEntrust({
            //     ...teacher,
            //     labelId: _this.dir,
            //     labelValue: _this.dir === 1 ? '升序' : '降序'
            // })
        }

    }
}
</script>

<style>
body {
    background: #fff
}
</style>
<style lang="scss" scoped>
body {
    background: #fff
}

@import '../../style/mixin';

.mint-header {
    background-color: rgba($color: #000000, $alpha: 0)
}

.font-style {
    width: 100%;
    overflow: hidden;
    @include sc(0.6rem, #666);
}

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

    .teach-title {
        font-size: px2rem(18px);
        // padding-bottom: px2rem(0px);
        color: #333;
    }

    .teach-list {
        margin-top: px2rem(-14px);
        overflow: hidden;
    }

    .opt-span {
        span {
            color: #449284;
            font-size: px2rem(13px);
            display: inline-block;
            vertical-align: middle;
            height: px2rem(10px);
            line-height: px2rem(10px);

            img {
                display: inline-block;
                width: px2rem(15px);
                height: px2rem(15px);
                vertical-align: middle;
            }
        }
    }

    .list-item {
        width: px2rem(170px);
        margin-right: px2rem(5px);
        margin-top: px2rem(15px);
        border-radius: 0 0 px2rem(3px) px2rem(3px);
        float: left;
        box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
    }

    .mr0 {
        margin-right: 0
    }

    .tea-txt {

        padding: px2rem(5px) px2rem(7px);
    }

    .tea-img {
        width: px2rem(170px);
        height: px2rem(125px);
        position: relative;
        border-radius: px2rem(3px) px2rem(3px) 0 0;

        img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: px2rem(3px) px2rem(3px) 0 0;
        }

        .learn-p {
            padding-left: px2rem(5px);
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background: #333;
            background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
            background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
            background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
            background: linear-gradient(to right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
            color: #fff;
            font-size: px2rem(11px);
            height: px2rem(20px);
            line-height: px2rem(20px);
        }
    }

    .tea-name {
        padding: 0;
        color: #333;
        font-size: px2rem(14px);
        font-weight: 500;
    }

    .tea-position {
        height: px2rem(53px);
        padding: px2rem(7px) px2rem(0px) px2rem(10px);
        line-height: px2rem(15px);
        font-size: px2rem(14px);
        font-weight: 400;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }
}

.home-header {
    height: px2rem(185px);
    @include bis('../../images/headerTop.png');

    .logo_img {
        height: px2rem(85px);
        width: px2rem(345px);
        text-align: center;
    }
}
</style>
