<template>
    <div class="lj-report__summary center">
        <div class="report__summary-center flex-1" v-for="(item,index) in datas" :key="index">
            <div class="report__summary-title" :style="item.titleStyle">
                {{ item.mainlable }}
            </div>
            <div class="report__summary-subtitle" :style="item.subtitleStyle">
                <span>
                    {{ item.mainvalue | amtShortFilter }}
                </span>
            </div>
            <div class="report__summary-footer" :style="item.footerStyle" v-if="item.c">
                {{ item.mainsubvalue }}
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        name: "lj-text",
        components: {
            
        },
        props: {
            datas: {
                type: Array,
                default: function() {
                    return []
                }
            }
        },
        data() {
            return {

            }
        },
        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);
                }
            },
        }
    }
</script>
<style  lang="less" scoped>
.lj-report__summary {
    display: flex;
    justify-content: space-around;
    // padding: 10px 24px;
    &.center {
        justify-content: center;
    }
    .color-orange {
        color: @light-system-orange;
    }
    .color-green {
        color: @light-system-green1;
    }
    .color-green2 {
        color: @light-system-green2;
    }
    .color-red {
        color: @light-system-red;
    }
    .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: 1px;
            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;
    }
    .flex-1 {
        flex: 1;
    }
}
</style>