<template>
    <div class="ht-base-page-header-data">
        <ht-base-row>

        <ht-base-col  :span="24" class="page-header-box">
            <ht-base-col :span="1">
                <div class="page-header-back">
                    <div tabindex="0" class="ht-page-header-back-button"
                         style="border: 0px; background: transparent; padding: 0px;outline: none; line-height: inherit; display: inline-block;"
                         @click="pageHeaderBack">
                        <ht-base-icon :type='backIcon' style="cursor: pointer;width:14px;height: 14px;"></ht-base-icon>
                    </div>
                    <div class="divider divider-vertical"></div>
                </div>
            </ht-base-col>
            <ht-base-col :span="15">
                <span class="page-header-heading-title" style="margin-left: 12px;">
                    {{title}}
                </span>
                <span class="page-header-heading-sub-title">
                    {{subTitle}}
                </span>
                <span class="page-header-heading-tags">
                    <ht-base-tag :color="tagColor">{{tags}}</ht-base-tag>
                </span>
            </ht-base-col>
            <ht-base-col :span="8">
                <ht-base-button v-for="(i,index) in buttonArray" :key="index"
                                :type="i.buttonType" :size="i.buttonSize"> {{i.buttonText}} </ht-base-button>

            </ht-base-col>
        </ht-base-col>
        <ht-base-col :span="24" class="page-header-content">
            <ht-base-col :span="15" offset="1">
                <div class="content" style="padding: 0;margin-left: 12px;">
                    <slot name="content"></slot>
                </div>
            </ht-base-col>
            <ht-base-col :span="8">
                <div class="extraContent">
                    <div class="statistic" v-for="(i,index) in statisticArray" :key="index">
                        <div class="statistic-title">{{i.statisticTitle}}</div>
                        <div class="statistic-content">
                            <span class="statistic-content-value">{{i.statisticContent}}</span>
                        </div>
                    </div>
                </div>
            </ht-base-col>
        </ht-base-col>

        </ht-base-row>
    </div>
</template>

<script>
    export default {
        name: 'HtBasePageHeaderData',
        props: {
            backIcon: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            subTitle: {
                type: String,
                default: ''
            },
            tags: {
                type: String,
                default: ''
            },
            tagColor: {
                type: String,
                default: ''
            },
            buttonArray: {
                type: Array,
                default: [{
                    buttonType: '',
                    buttonText: ''
                }]
            },
            statisticArray: {
                type: Array,
                default: [{
                    statisticTitle: '',
                    statisticContent: ''
                }]
            }
        },
        methods: {
            pageHeaderBack() {
                this.$emit('onback');
            }
        }
    }
</script>
<style>
    .ht-base-page-header-data {

    }
</style>

