<template>
    <div :class="['detail-list', size === 'small' ? 'small' : 'large', layout === 'vertical' ? 'vertical': 'horizontal']">
        <div class="extra"><slot name="extra"></slot></div>
        <div v-if="title" class="title">{{title}}</div>
        <el-row>
            <slot></slot>
        </el-row>
    </div>
</template>

<script>
import DetailListItem from './DetailListItem';
export default {
    name: 'index',
    item:DetailListItem,
    props: {
        title: {
            type: String,
            required: false
        },
        col: {
            type: Number,
            required: false,
            default: 3
        },
        size: {
            type: String,
            required: false,
            default: 'large'
        },
        layout: {
            type: String,
            required: false,
            default: 'horizontal'
        }
    },
    provide () {
        return {
            col: this.col > 4 ? 4 : this.col
        }
    }
}
</script>

<style lang="less">
.detail-list{
    .title {
        font-size: 16px;
        color: rgba(0,0,0,.85);
        font-weight: bolder;
        margin-bottom: 16px;
    }
    .extra{
        float:right;
        margin-right:20px
    }
    .term {
        // Line-height is 22px IE dom height will calculate error
        line-height: 20px;
        padding-bottom: 16px;
        padding-right: 8px;
        color: rgba(0,0,0,.85);
        white-space: nowrap;
        display: table-cell;
        text-align: right;
        &:after {
            content: ':';
            margin: 0 8px 0 2px;
            position: relative;
            top: -0.5px;
        }
    }
    .content{
        line-height: 22px;
        padding-bottom: 16px;
        color: rgba(0,0,0,.65);
        display: table-cell;
    }
    &.small{
        .title{
            font-size: 14px;
            color: rgba(0,0,0,.65);
            font-weight: normal;
            margin-bottom: 12px;
        }
        .term,.content{
            padding-bottom: 8px;
        }
    }
    &.large{
        .term,.content{
            padding-bottom: 16px;
        }
    }
    &.vertical{
        .term {
            padding-bottom: 8px;
        }
        .term,.content{
            display: block;
        }
    }
}
</style>
