<template>
    <div class="ht-base-descriptions-level-border-demo">
        <ht-base-descriptions title="角色信息" bordered>
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list1"  :label="item.label" :key="i" v-if="i <= 2"
                                           :span="item.span">{{item.value}}
                </ht-base-descriptions-item>
            </ht-base-descriptions-row>
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list1" :label="item.label" :key="i" v-if="i > 2 && i <5 "
                                           :span="item.span">{{item.value}}
                </ht-base-descriptions-item>
            </ht-base-descriptions-row>
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list1" :label="item.label" :key="i" v-if="i === 5"
                                           :span="item.span">{{item.value}}
                </ht-base-descriptions-item>
            </ht-base-descriptions-row>
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list1" :label="item.label" :key="i" v-if="i > 5 && i <9 "
                                           :span="item.span">{{item.value}}
                </ht-base-descriptions-item>
            </ht-base-descriptions-row>
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list1" :label="item.label" :key="i" v-if="i === 9"
                                           :span="item.span">
                    <div style="float: left;padding: 10px 0 ">
                        <p v-for="item in item.value">{{item}}</p>
                    </div>
                </ht-base-descriptions-item>
            </ht-base-descriptions-row>
        </ht-base-descriptions>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseDescriptionsLevelBorderDemo',
        data() {
            return {
                list1: [
                    {
                        label: '项目名称',
                        value: '云数据库'
                    },
                    {
                        label: '账单模式',
                        value: '预付'
                    },
                    {
                        label: '自动续订',
                        value: '是'
                    },
                    {
                        label: '订购时间',
                        value: '2018-04-24'
                    },
                    {
                        label: '使用时间',
                        value: '2019-04-24',
                        span: 2
                    },
                    {
                        label: '项目状态',
                        value: '正在进行中',
                        span: 3
                    },
                    {
                        label: '实施金额',
                        value: '￥80.00',
                    },
                    {
                        label: '折扣金额',
                        value: '¥20.00',
                    },
                    {
                        label: '官方收据',
                        value: '¥60.00',
                    },
                    {
                        label: '配置信息',
                        value: ["数据磁盘类型：MongoDB",
                            "数据库版本：3.4",
                            "包装：dds.mongo.mid",
                            "存储空间：10 GB",
                            "Replication_factor：3",
                            "地区：华东1"
                        ],
                        span: 3
                    },
                ]
            }
        }
    }
</script>
<style>
    .ht-base-descriptions-level-border-demo {

    }
</style>

