<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="(recommend,index) in recommends" :key="index">
                <div class="top-sec">
                    <img class="recommend-image" :src="recommend.imgUrl" alt="">
                    <div 
                        class="recommend-course-tag"
                        :class="{'active':hasCourseTag=='true','left-tag':tagPosition=='left','right-tag':tagPosition=='right'}"
                        >{{recommend.courseTag}}</div>
                    <div class="recommend-name">{{recommend.name}}</div>
                    <div class="recommend-num"><span>{{recommend.num}}</span>人已学</div>
                </div>
                <div class="recommend-title">{{recommend.title}}</div>
            </div>
        </div>
        <div class="show-more" :class="{'active':hasMore=='true'}">
            更多课程
        </div>
    </div>
</template>
<script>
export default {
    name:"RecommendList",
    props:{
        recommends:{
            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:'false'//传递true/false
        },
        tagPosition:{
            type:String,
            default:'left'
        },
        padding:{
            type:String,
            default:'0'//注意传输单位，如'2rem''2px'
        }


    },
    
    data(){
        return{
            // iconJCLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconJC.png',//检查
            // iconSFLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconSF.png',//随访
            // iconZDLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconZD.png',//诊断
            // iconZLLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconZL.png',//治疗

        }
    },
    mounted(){
        // this.recommends.forEach((v,k)=>{
        //     switch (v.tagType){
        //         case 'JC':
        //             v.tagUrl=this.iconJCLink;
        //             break;
        //         case 'SF':
        //             v.tagUrl=this.iconSFLink;
        //             break;
        //         case 'ZD':
        //             v.tagUrl=this.iconZDLink;
        //             break;
        //         case 'ZL':
        //             v.tagUrl=this.iconZLLink;
        //             break;
        //         default:
        //             v.tagUrl=""
        //     }
        // })

    },
    // props:{
    //         recommends:"",
    //         title:"",
    //         position:"",
    //         hasChange:null,//希望含有时，穿参数true
    //     },
    created(){
        console.log(this.hasChange,this.position,this.recommends[0])
    }
}
</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;
    }

    .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);
    }
    .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;
    }
    .recommend-item .recommend-name{
        position:absolute;
        top:px2rem(79.5px);
        left:px2rem(18px);
        width:px2rem(40px);
        height:px2rem(11px);
        line-height:px2rem(11px);
        font-size:px2rem(11px);
        font-weight:400;
        color:rgb(255,255,255);
    }
    .recommend-item .recommend-num{
        position:absolute;
        top:px2rem(79.5px);
        right:px2rem(5px);
        font-size:px2rem(11px);
        /* width:5.2rem; */
        height:px2rem(11px);
        line-height:px2rem(11px);
        font-weight:400;
        color:rgb(255,255,255);
    }
    .recommend-item .recommend-num span{
        color:rgb(255,255,255);
    }

    /* 更多课程 */
    .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>


