<template>
  <div class="icon-wrapper">
      <span class="icon" :style="{background: colorData.bg, 'border-color': colorData.bc}"></span>
      <span class="icon-text"><slot></slot></span>
  </div>
</template>

<script>
const colorMap = {
    normal: {
        bg: '#2E8CF0',
        bc: '#CBE3FB'
    },
    primary: {
        bg: '#5D59B4',
        bc: '#B3B0B4'
    },
    success: {
        bg: '#54C54E',
        bc: '#D5F1D3'
    },
    warning: {
        bg: '#FF9900',
        bc: '#D8EEDD'
    },
    danger: {
        bg: '#DC1A1A',
        bc: '#F6C6C6'
    },
    disabled: {
        bg: '#808490',
        bc: '#E0E1E4'
    }
};
export default {
    props: {
        color: {
            type: String,
            default: 'normal'
        }
    },
    data () {
        return {
        };
    },
    computed: {
        colorData () {
            return colorMap[this.color];
        }
    },
    methods: {

    }
};
</script>
<style lang="scss" scoped>
    .icon-wrapper {
        display: flex;
        align-items: center;
        .icon {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #2E8CF0;
            border: 4px solid #CBE3FB;
        }
        .icon-text {
            margin: 3px 0 0 5px;
            display: inline-block;
            width: calc(100% - 21px);
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>
