<template>
    <div class="reward-info">
        感谢
        <em>{{info.userNick}}</em>
        赠送的
        <img v-if="_parseJSONGift(info.filterContent).img" :src="_parseJSONGift(info.filterContent).img">
        <img v-else :src="require(`@/assets/reward/gift-${_parseJSONGift(info.filterContent).imgType}.png`)" alt="">
        ({{_parseJSONGift(info.filterContent).name}} * <em>{{_parseJSONGift(info.filterContent).num}}</em>)
    </div>
</template>

<script>
    export default {
        props: {
            info: {}
        },
        data(){
            return {
                
            }
        },
        methods: {
            _parseJSONGift(str){
                return  JSON.parse(str);
            },
        }
    }
</script>

<style lang="less" scoped>
    .reward-info{
        display: inline-block;
        max-width: 90%;
        line-height: 20px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        background: #edcb91;
        text-align: center;

        .icon-red{
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            background-image: url("./img/icon-red.png");
            background-repeat: no-repeat;
            background-size: 15px auto;
            background-position: center center;
        }
        em{
            color: #d84e43;
        }
        img{
            height: 30px;
            vertical-align: middle;
        }
    }
</style>