<template>
    <div>
         <!-- 类型4：常规样式：左三右三 -->
        <div v-if="type==4" class="rank-table-content">
            <!-- 我的 -->
            <div class="my-rank-content content">
                <div class="item" v-for="(value,index) in cmpTableData.self" :key="index">
                    <div class="normal" v-if="!value.isMessage">
                        <span class="num">{{index+1}}</span>
                        <span class="text">{{value.name}}</span>
                    </div>
                    <div class="special" v-if="value.isMessage">
                        {{value.name}}
                    </div>
                </div>
            </div>
            <!-- 学院/省内/国内 -->
            <div class="other-rank-content content">
                <div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
                    <div class="normal">
                        <span class="num">{{index+1}}</span>
                        <span class="text">{{value.name}}</span>
                    </div>
                </div>

            </div>
        </div>
        <!-- 类型5：左二右三，类型6：左一右三 -->
        <div v-if="type==5||type==6" class="rank-table-content">
            <!-- 我的 -->
            <div class="my-rank-content content">
                <!-- 左侧为两个：一小一大 -->
                <div v-if="type==5" class="item">
                    <div class="normal">
                        <span class="num">1</span>
                        <span class="text">{{cmpTableData.self[0].name}}</span>
                    </div>
                </div>
                <div v-if="type==5" class="multi-row double-row">{{cmpTableData.self[1].name}}</div>
                <!-- 左侧只有一个框 -->
                <div v-if="type==6" class="multi-row triple-row">{{cmpTableData.self[0].name}}</div>
            </div>
            <!-- 学院/省内/国内 -->
            <div class="other-rank-content content">
                <div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
                    <div class="normal">
                        <span class="num">{{index+1}}</span>
                        <span class="text">{{value.name}}</span>
                    </div>
                </div>

            </div>
        </div>
        <!-- 类型1：左二右二下一,类型2：左一右一下一 -->
        <div v-if="type==1||type==2||type==3">
            <!-- 上 -->
            <div class="rank-table-content" v-if="type==1||type==2">
                <!-- 我的 -->
                <div class="my-rank-content content">
                    <div class="item" v-for="(value,index) in cmpTableData.self" :key="index">
                        <div class="normal" v-if="!value.isMessage">
                            <span class="num">{{index+1}}</span>
                            <span class="text">{{value.name}}</span>
                        </div>
                        <div class="special" v-if="value.isMessage">
                            {{value.name}}
                        </div>
                    </div>
                </div>
                <!-- 学院/省内/国内 -->
                <div class="other-rank-content content">
                    <div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
                        <div class="normal">
                            <span class="num">{{index+1}}</span>
                            <span class="text">{{value.name}}</span>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 下 -->
            <div v-if="type==1" class="multi-col single-row special-message">
                {{cmpTableData.commonMessage}}
            </div>
            <div v-if="type==2" class="multi-col double-row special-message">
                {{cmpTableData.commonMessage}}
            </div>
            <div v-if="type==3" class="multi-col triple-row special-message">
                {{cmpTableData.commonMessage}}
            </div>

        </div>
        

    </div>
   
    
</template>
<script>
export default {
    name:'CompareTable',
    created(){
        console.log(this.cmpTableData);
    },
    props:{
            cmpTableData:{
                type:Object,
                default:{
                    self:[
                        {isMessage:false,name:'治疗药物检测的临床意义'},
                        {isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
                        {isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
                        ],
                    other:[
                            {name:'聚集糖尿病治疗与管理'},
                            {name:'治疗药物检测的临床意义是什么'},
                            {name:'治疗药物检测的临床意义'}
                        ]
                    
                }
            },
            type:{
                type:Number,
                default:4//type===4时为正常的样式
            }
        
        },
}
</script>

<style lang="scss" scoped>
@import 'src/style/mixin';
    /*公用的样式*/
    .rank-table-content{
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
    }

    .rank-table-content .content.my-rank-content{
        width:px2rem(157.5px);//包含右边的border

    }
    .rank-table-content .content.other-rank-content{
        width:px2rem(157px);

    }
    .content.my-rank-content .item{
        border-top:px2rem(0.5px) solid rgb(236,238,241);
        border-right:px2rem(0.5px) solid rgb(236,238,241);
    }
    .content.other-rank-content .item{
        border-top:px2rem(0.5px) solid rgb(236,238,241);
       
    }
    .rank-table-content .content .item{
        height:px2rem(58px);
        display:flex;display:-webkit-flex;justify-content:center;align-items:center;
         .normal span{
            font-size:px2rem(12px);
            display:inline-block;
            vertical-align:middle;//行内块垂直居中
        }
        .normal span.num{
            width:px2rem(13px);
            height:px2rem(13px);
            line-height:px2rem(13px);
            text-align:center;
            background-color: rgb(202,168,97);
            border-radius: px2rem(6.5px);
            color:#fff;
            font-weight:400;
        }
        .normal span.text{
            width:px2rem(114px);
            line-height:px2rem(16px);
            text-align:center;
            // padding-left:px2rem(10px);
            font-weight:400;
        }

        .special{
             font-size:px2rem(12px);
             text-align:center;
             padding:px2rem(20px);
             color:#999;
        }
        
    }
    //多行公共代码：type5/type6/
    .rank-table-content .content .multi-row{
        display:table-cell;
        vertical-align: middle;
        font-size:px2rem(12px);
        text-align:center;
        padding:0 px2rem(20px);
        color:#999;
       
    }
    //type5
    .rank-table-content .my-rank-content.content .multi-row.double-row{
        height:px2rem(116.5px);//58*2+0.5
        border-top:px2rem(0.5px) solid rgb(236,238,241);
        border-right:px2rem(0.5px) solid rgb(236,238,241);
    }
    //type6
    .rank-table-content .my-rank-content.content .multi-row.triple-row{
        height:px2rem(175px);//58*2+0.5
        border-top:px2rem(0.5px) solid rgb(236,238,241);
        border-right:px2rem(0.5px) solid rgb(236,238,241);
    }
    //多行公共代码：type1/type2/type3
    .special-message{
        display:table-cell;
        vertical-align: middle;
        font-size:px2rem(12px);
        text-align:center;
        padding:0 px2rem(20px);
        color:#999;
    }
    .multi-col{
        border-top:px2rem(0.5px) solid rgb(236,238,241);
        width:px2rem(315px);
    }
    .multi-col.single-row{
         height:px2rem(58px);
    }
    .multi-col.double-row{
         height:px2rem(116.5px);
    }
    .multi-col.triple-row{
         height:px2rem(175px);
    }
</style>


