<template>
    <div class="report__summary-center flex-1">
        <div class="report__summary-title text-ellipsis-one" slot="headertext">
            <span v-if="headerText">{{ headerText }}</span>
        </div>
        <div class="report__summary-subtitle" :class="ellipsis[ellipsisLine]" slot="maintext">
            {{ mainText | amtShortFilter }}
        </div>
        <div class="report__summary-footer text-ellipsis-one" slot="subvalue">
            <span v-if="footerText">{{ footerText }}</span>
        </div>
    </div>
</template>
<script>
    export default{
        name: "lj-text",
        components: {
            
        },
        props: {
            headerText: {
                type: String,
                default: ""
            },
            mainText: {
                type: String,
                default: ""
            },
            footerText: {
                type: String,
                default: ""
            },
            ellipsisLine: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                ellipsis: ["text-ellipsis-one","text-ellipsis-one","text-ellipsis-two"]
            }
        },
        methods: {
            handleSubTitleFilter(text) {
                if(Object.prototype.toString.call(text) === '[object String]') {
                    return text;
                }
                if(Object.prototype.toString.call(text) === '[object Number]') {
                    return this.amtShortFilter(text);
                }
            },
        },
        filters: {
            amtShortFilter(data) {
                if(Object.prototype.toString.call(data) === '[object String]') {
                    return data;
                }
                if(Object.prototype.toString.call(data) === '[object Number]') {
                    return $lj.numberFormatCHN(data, 2);
                }
            },
        },
        computed: {
            
        },
    }
</script>
<style  lang="less" scoped>
    .report__summary-center {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:not(:last-child):before {
            content: '';
            position: absolute;
            top: 30%;
            right: 0;
            width: 2px;
            height: 40%;
            background: @light-fill-quarternary;
        }
    }
    .report__summary-title {
        position: relative;
        color: @light-label-secondary;
        font-size: 14px;
        line-height: 22px;

        .iconfont {
            margin-left: 4px;
            font-size: 17px;

            &.to-tabs {
                margin-left: 0;
                font-size: 14px;
            }
        }
        .meta {
            color: @light-label-tertiary;
        }
    }
    .report__summary-subtitle {
        display: inline-flex;
        align-items: center;
        // margin-top: 5px;
        color: @light-label-primary;
        font-size: 18px;
        line-height: 24px;
        // font-weight: bold;

        &.bigger {
            font-size: 28px;
            font-weight: 500;
        }
    }
    .report__summary-footer {
        font-size: 12px;
        text-align: center;
        color: @light-label-secondary;
    }
</style>