<template>
    <div class="ht-base-page-header-data-demo">
        <ht-base-page-header-data v-bind='formData'>
            <template slot="content">
                <ht-base-row>
                    <ht-base-col v-for="(i,index) in descriptionVal" :key="index" :span="i.gridNum">
                        <div class="demo-description" style="padding: 0;">
                            <div class="demo-term">
                                {{i.key}}：
                            </div>
                            <div class="demo-detail">
                                <span v-if="i.valShow">{{i.val}}</span>
                                <a href="###" v-if="i.websiteShow">{{i.val}}</a>
                            </div>
                        </div>
                    </ht-base-col>
                </ht-base-row>
            </template>
        </ht-base-page-header-data>
    </div>
</template>

<script>
    export default {
        name: 'HtBasePageHeaderDataDemo',
        data() {
            return {
                formData: {
                    backIcon: 'LiRa_left',
                    title: '北京天源迪科信息技术有限公司',
                    subTitle: '产业互联网变革推动者',
                    tagColor: 'red',
                    tags: '开业',
                    buttonArray: [{
                        buttonType: 'primary',
                        buttonText: '主题按钮',
                        buttonSize:'small'
                    }, {
                        buttonType: 'default',
                        buttonText: '主题按钮',
                        buttonSize:'small'

                    }, {
                        buttonType: 'default',
                        buttonText: '主题按钮',
                        buttonSize:'small'

                    }],
                    statisticArray: [{
                        statisticTitle: '统一社会信用代码',
                        statisticContent: '91110108571295930R'
                    }],
                },
                descriptionVal: [
                    {
                        key: '公司类型',
                        val: '有限责任公司（法人独资)',
                        gridNum: 12,
                        websiteShow: false,
                        valShow: true,
                    }, {
                        key: '公司网址',
                        val: 'www.tydic.com',
                        gridNum: 12,
                        websiteShow: true,
                        valShow: false,
                    }, {
                        key: '登记机关',
                        val: '北京市工商行政管理局海淀分局',
                        gridNum: 12,
                        websiteShow: false,
                        valShow: true,
                    }, {
                        key: '企业地址',
                        val: '北京市海淀区北四环西路56号8层802',
                        gridNum: 12,
                        websiteShow: false,
                        valShow: true,
                    }, {
                        key: '经营范围',
                        val: '计算机软硬件产品的研发；技术咨询、技术服务；销售自主研发的产品；计算机系统集成。',
                        gridNum: 24,
                        websiteShow: false,
                        valShow: true,
                    }
                ]
            }
        }
    }
</script>
<style lang="less">
    .ht-base-page-header-data-demo {

        .demo-description {
            display: table;
            border: none;
            padding-bottom: 8px;
            font-size: 12px;
            margin: 2px;
            .demo-term {
                display: table-cell;
                margin-right: 8px;
                padding-bottom: 8px;
                white-space: nowrap;
                line-height: 20px;
            }

            .demo-detail {
                display: table-cell;
                padding-bottom: 8px;
                width: 100%;
                line-height: 20px;
            }

        }
    }
</style>

