<template>
    <view class="statement">
        <view
            class="statement-prompt-wrapper"
        >
            <view>
                <view v-if="source" class="statement-source">
                    <view class="statement-icon">
                        <image :src="icon" mode="scaleToFill" lazy-load class="statement-icon-image"/>
                    </view>
                    <view class="statement-text">{{ source }}</view>
                    内容支持
                </view>
                <view v-for="(item, index) in msg" :key="index">{{ item }}</view>
            </view>
        </view>
    </view>
</template>
<script>

/**
 *  @file index.js
 *  @author yantingxi
 */

export default {
    config: {
        component: true
    },
    props: {
        msg: {
            type: Array,
            default: () => []
        },
        icon: {
            type: String,
            default: ''
        },
        source: {
            type: String,
            default: ''
        }
    }
};
</script>
<style lang="less" scoped>

.statement {
    background: #f5f5f5;
    -webkit-tap-highlight-color: transparent;

    &-prompt-wrapper {
        font-size: 13px;
        line-height: 21px;
        color: #999;
        text-align: center;
        padding: 11px 0;
    }

    &-source {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    &-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        vertical-align: top;

        &-image {
            width: 100%;
            height: 100%;
        }
    }

    &-text {
        padding-left: 4px;
    }
}
</style>

