<template>
    <div class="lj-msg-box">
        <template  v-for="(item, idx) in data" >
            <div class="box-item" :key="idx">
                <div class="lj-msg-title">
                    <div class="msg-title" @click="handleCheckDscrp(item.dscrp)">
                        <slot name="title">
                            {{ item.content }}
                        </slot>
                        <i v-if="item.dscrp" class="iconfont icon-help1"></i>
                    </div>
                    <div class="msg-title__lostfilm">
                    </div>
                </div>
                <div class="lj-msg-value">
                    <slot name="default">
                        {{ item.sql_rslt | filterEmpty }}
                    </slot>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        };
    },

    props: {
        data: Array,
    },
    methods: {
        handleCheckDscrp(data) {
            if (!data) return;
            $lj.toast(data)
        }
    },
    filters: {
        filterEmpty(val) {
            return val ? val : "-"
        }
    }
};
</script>

<style lang="less">
.lj-msg-box {
    display: flex;
    padding: 5px 16px;
    flex-wrap: wrap;
    position: relative;
    margin: 0 20px;
    background-color: @light-barkground-secondary;
    border-radius: 8px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;

    .box-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 100px;
        padding: 3px 0;

        .lj-msg-title {
            display: flex;
            font-size: 14px;
            line-height: 18px;
            color: @light-label-secondary;
            padding-left: 2px;

            .msg-title {
                flex: 1;
            }
            .msg-title__lostfilm {
                flex-shrink: 0;

            }
            .iconfont {
                font-size: 14px;
            }
        }
        .lj-msg-value {
            padding-left: 2px;
        }
        // .lj-msg-title {
        //     margin-top: 2px;
        //     font-size: 14px;
        //     line-height: 18px;
        //     color: @light-label-tertiary;
        // }
        // & + .box-item {
        //     margin-left: 4px;
        // }
    }
}
</style>