<!-- courselist中的人数/收藏等细节，在图片的下方显示，有此种情形时，选用此组件 -->
<template>
    <div class="section" :style="{paddingLeft:padding,paddingRight:padding}">
        <header  :class="{'title-center':titlePosition=='center','title-left':titlePosition=='left','title-right':titlePosition=='right'}">
            <div class="title">{{title}}</div>
            <div class="change-content" :class="{'active':hasChange=='true'}">
                <!-- 注意更改这里 -->
                <div class="text">换一批</div>
                <img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
            </div>
        </header>
        <div class="recommends">
            <div class="recommend-item" v-for="(course,index) in courses" :key="index">
                <div class="top-sec">
                    <img class="recommend-image" v-lazy="course.imgUrl" alt="">
                    <div 
                        class="recommend-course-tag"
                        :class="{'active':hasCourseTag=='true','left-tag':tagPosition=='left','right-tag':tagPosition=='right'}"
                        >{{course.courseTag}}</div>
                    <!-- <div class="recommend-name">{{course.name}}</div> -->
                    <!-- <div class="recommend-num"><span>{{course.num}}</span>人已学</div> -->
                </div>
                <div class="recommend-title">{{course.title}}</div>
                <div class="course-detail">
                    <div class="course-detail-item course-time">
                        {{course.time}}
                    </div>
                    <div class="course-detail-item bar"></div>
                    <div class="course-detail-item course-num">{{course.num}}已学</div>
                    <div class="course-detail-item save-button not-saved" v-if="!course.saveStatus">收藏</div>
                    <div class="course-detail-item save-button has-saved" v-if="course.saveStatus">已收藏</div>
                </div>
            </div>
        </div>
        <div class="show-more" :class="{'active':hasMore=='true'}">
            更多课程
        </div>
    </div>
</template>
<script>
export default {
    name:"CourseList",
    props:{
        courses:{
            type:Array,
            default:()=>{
                return [
                    {name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'}
                ]
            }
        },
        title:{
            type:String,
            default:'更多课程'
        },
        titlePosition:{
            type:String,
            default:'left'
        },
        hasChange:{
            type:String,
            default:false//传递true/false
        },
        hasMore:{
            type:String,
            default:false//传递true/false
        },
        hasCourseTag:{
            type:String,
            default:true//传递true/false
        },
        tagPosition:{
            type:String,
            default:'left'
        },
        padding:{
            type:String,
            default:'0'//注意传输单位，如'2rem''2px'
        }


    },
    
    data(){
        return{

        }
    },
    mounted(){
    },
    created(){
    }
}
</script>

<style lang="scss" scoped>
@import 'src/style/mixin';
    .section>header{
        display: flex;
        display:-webkit-flex;
        flex-direction: row;
        position:relative;
        align-items:center;
        margin-top:px2rem(20px);
        margin-bottom: px2rem(20px);
    }
    .section>header.title-center{
        justify-content: center;
    }
    .section>header.title-left{
        justify-content: flex-start;
    }
    .section>header.title-right{
        justify-content: flex-end;
    }

    .section>header .title{
        font-size:px2rem(18px);
        color:#333;
      
    }

    .section>header .change-content{
        display:none;
    }
     .section>header .change-content.active{
        position:absolute;
        right:0;
        width:px2rem(56.5px);
        height:px2rem(16px);
        padding-left:px2rem(7px);
        border:px2rem(0.5px) solid #A9AEB7;
        border-radius:px2rem(8.5px);
        opacity:0.5;
        font-weight:400;
        color:#28344c;
        display:block;
        padding-top:px2rem(0.5px);
        padding-bottom:px2rem(0.5px);
    }
    .section>header .change-content .text{
        font-size:px2rem(11px);
        width:px2rem(33px);
        height:px2rem(14px);
        line-height:px2rem(14px);
    }
    .section>header .change-content .icon{/*！加图片后调整*/
        width:px2rem(12px);
        height:px2rem(12px);
        position:absolute;
        top:px2rem(1.5px);
        right:0;
    }
    // .section>header .change-content .icon img{
    //      width:px2rem(12px);
    //     height:px2rem(12px);
    // }
    .recommends{
        display: -webkit-flex;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        -ms-flex-wrap: wrap;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width:px2rem(345px)
    }
    .recommend-item{
        position: relative;
        width:px2rem(172.5px);
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .recommend-item:nth-child(odd){
        padding-right:px2rem(2.5px);
    }
     .recommend-item:nth-child(even){
        padding-left:px2rem(2.5px);

    }
    .recommend-item .top-sec{
        width:px2rem(170px);
        height:px2rem(95.5px);
        position:relative;
    }
    .recommend-item .recommend-image{
        /* width:100%; */
        width:px2rem(170px);
        height:px2rem(95.5px);
        border-radius: px2rem(3px);
    }
    .recommend-item .recommend-course-tag{
        display:none;
    }
    .recommend-item .recommend-course-tag.active{
        display:block;
        position:absolute;
        top:px2rem(5px);
        left:px2rem(5px);
        width:px2rem(40px);
        height:px2rem(16px);
        line-height:px2rem(16px);
        background-color:#FAFCFF;
        font-size:px2rem(10px);
        color:#4A87D4;
        text-align:center;
        border:px2rem(0.5px) solid rgba(195,220,251,1);
        border-radius: px2rem(2px);
        // padding:px2rem(3px) 0;
    }
    .recommend-item .recommend-course-tag.active.left-tag{
        top:px2rem(5px);
        left:px2rem(5px);
    }
    .recommend-item .recommend-course-tag.active.right-tag{
        top:px2rem(5px);
        right:px2rem(5px);
    }
    .recommend-item .recommend-title{
        margin-top:px2rem(5px);
        margin-bottom:px2rem(6px);
        height:px2rem(38px);
        line-height:px2rem(19px);
        font-size:px2rem(14px);
        font-weight:400;
        color:rgb(51,51,51);
        overflow:hidden;
        text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
 

    .course-detail {
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
        position:relative;
        margin-bottom:px2rem(18px);
    }
    .course-detail div.course-detail-item{
        font-size:px2rem(12px);

    }
    .course-detail .course-time,.course-detail .course-num{
        height:px2rem(12px);
        line-height:px2rem(12px);
        color:#999;
        margin-top:px2rem(6px);
    }
    .course-detail .bar{//?这个样式注意一下
        width:px2rem(1.5px);
        height:px2rem(10.5px);
        background-color:#999;
        margin-top:px2rem(6.5px);
    }
    .course-detail .course-time{
        margin-right:px2rem(5px)
    }
    .course-detail .course-num{
        margin-left:px2rem(3.5px)
    }
    .course-detail .save-button{
        position:absolute;
        top:px2rem(3px);
        right:px2rem(2.5px);
        font-size:px2rem(11px);
        text-align:center;
    }
    .course-detail .save-button.not-saved{
        width:px2rem(30px);
        height:px2rem(18px);
        line-height:px2rem(18px);
        color:#666;
        background-color:rgba(247,248,249,1)
    }
    .course-detail .save-button.has-saved{
        width:px2rem(39px);
        height:px2rem(18px);
        line-height:px2rem(18px);
        color:#F47A48;
        background-color:rgba(244,122,72,0.04);
    }
   


 

    /* 更多课程 */
    .section .show-more{
        display:none;
    }
    .section .show-more.active{
        display:block;
        font-size:px2rem(15px);
        font-weight:400;
        color:#999;
        text-align:center;
        padding-top:px2rem(14px);
        padding-bottom: px2rem(15px);
        border-top:px2rem(0.5px) solid #e7e7e7;
    }
</style>


