<template>
    <div class="content" v-if="data.length > 0">
        <div class="broad" v-for="item in data">
            <span :class="swCodeName(item.code, 1)">
                <i :class='swCodeName(item.code, 0)'></i>
                <span v-if="item.userId == '0'">海精灵</span>
                <span v-else>
                    <Abar :href='"/user/user?no=" + item.userNo'>                        
                        {{ item.nick }}
                    </Abar>
                </span>:
                <span v-html="item.msg"></span>
            </span>
        </div>
    </div>
</template>
<script setup lang="ts">
// 1. 定义接收父组件传来的参数 props
const props = defineProps({
    data: {
        type: Array<any>,
        default: () => ([])
    }
})

const swCodeName = (code: string, type: number) => {
    let result = '';
    switch (code) {
        case "Gift":
            if (type == 0) {
                result = "broad-gift";
            }
            else {
                result = "";
            }
            break;

        case "System":
            if (type == 0) {
                result = "broad-system";
            }
            else {
                result = "masked";
            }
            break;

        case "Award":
            if (type == 0) {
                result = "broad-award";
            }
            else {
                result = "masked1";
            }
            break;

        case "Remind":
            if (type == 0) {
                result = "broad-remind";
            }
            else {
                result = "caise6";
            }
            break;

        case "Promote":
            if (type == 0) {
                result = "broad-promote";
            }
            else {
                result = "caise7";
            }
            break;
    }
    return result;
}
</script>
<style  >
.broad {
    font-size: 15px;
}

.broad-gift {
    background-image: url('/images/broad/gift.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px; /*设置图片大小*/
    margin-right: 2px;
    vertical-align: middle;
    border: 0;
}
.broad-system {
    background-image: url('/images/broad/system.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px; /*设置图片大小*/
    margin-right: 2px;
    vertical-align: middle;
}

.broad-award {
    background-image: url('/images/broad/award.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px; /*设置图片大小*/
    margin-right: 2px;
    vertical-align: middle;
}

.broad-remind {
    background-image: url('/images/broad/remind.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px; /*设置图片大小*/
    margin-right: 2px;
    vertical-align: middle;
}

.broad-promote {
    background-image: url('/images/broad/promote.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px; /*设置图片大小*/
    margin-right: 2px;
    vertical-align: middle;
}
.broad-hot1 {
    background-image: url('/images/broad/hot1.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px; /*设置图片大小*/
    margin-right: 2px;
    vertical-align: middle;
}
.masked {
    display: inline;
    width: 200px;
    height: 22px;
    /*渐变背景*/

    background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
    color: transparent;
    /*文字填充色为透明*/

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    /*背景剪裁为文字，只将文字显示为背景*/

    background-size: 200% 100%;
    /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
    /* 动画 */

    animation: masked-animation 4s infinite linear;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
        /*background-position 属性设置背景图像的起始位置。*/
    }

    100% {
        background-position: -100% 0;
    }
}

.masked2 {
    display: inline;
    width: 200px;
    height: 22px;
    /*渐变背景*/

    background-image: -webkit-linear-gradient(left, #ffa080, #ffa060 10%, #ffa040 20%, #ffa020 30%, #ffa0a0 40%, #ffa080 50%, #ffa060 80%, #ffa040 70%, #ffa020 80%, #ffa000 90%, #ffff00);
    color: transparent;
    /*文字填充色为透明*/

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    /*背景剪裁为文字，只将文字显示为背景*/

    background-size: 200% 100%;
    /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
    /* 动画 */

    animation: masked-animation 4s infinite linear;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
        /*background-position 属性设置背景图像的起始位置。*/
    }

    100% {
        background-position: -100% 0;
    }
}

.masked1 {
    display: inline;
    width: 200px;
    height: 22px;
    /*渐变背景*/

    background-image: -webkit-linear-gradient(left, #ff0080, #ff0060 10%, #ff0040 20%, #ff0020 30%, #ff00a0 40%, #ff0080 50%, #ff0060 80%, #ff0040 70%, #ff0020 80%, #ff0000 90%, #ffff00);
    color: transparent;
    /*文字填充色为透明*/

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    /*背景剪裁为文字，只将文字显示为背景*/

    background-size: 200% 100%;
    /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
    /* 动画 */

    animation: masked-animation 4s infinite linear;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
        /*background-position 属性设置背景图像的起始位置。*/
    }

    100% {
        background-position: -100% 0;
    }
}

.lmma {
    color: #ffff00;
}

.caise_jt {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
    color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    -o-background-clip: text
}

.caise3 {
  /* 删除 -moz -ms -o 全部废弃前缀 */
  background: linear-gradient(180deg, #f2f, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
  /* 兼容webkit内核浏览器（Chrome/Edge/移动端） */
  background: -webkit-linear-gradient(180deg, #f2f, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

  /* 移除多余 color: #f2f; 会被透明覆盖 */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  /* 滚动动画必备，之前缺失 */
  background-size: 200% 200%;
  animation: ran 5s linear infinite;
}


@keyframes ran {
    from {
        backgroud-position: 0 0;
    }

    to {
        background-position: 200px 0;
    }
}

.caise4 {
    color: aqua;
    letter-spacing: 0;
    text-shadow: 0px 1px 0px #999, 0px 1px 0px #888, 0px 1px 0px #777, 0px 1px 0px #666, 0px 1px 0px #555, 0px 1px 0px #444, 0px 1px 0px #333, 0px 1px 7px #001135
}

.caise5 {
    text-shadow: 1px 1px 6px deeppink;
    color: deeppink
}

.caise6 {
    background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);
    -webkit-text-fill-color: transparent;
    /* 将字体设置成透明色 */
    -webkit-background-clip: text;
    /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 3s linear infinite;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.caise7 {
    --interval: 1s;
    text-shadow: 0 0 5px var(--color1), 0 0 5px var(--color2), 0 0 5px var(--color3), 0 0 5px var(--color4);
    will-change: filter, color;
    filter: saturate(60%);
    animation: flicker steps(100) var(--interval) 1s infinite;
}

.caise7:nth-of-type(1) {
    color: yellow;
    --color1: azure;
    --color2: orangered;
    --color3: mediumblue;
    --color4: dodgerblue;
    font-family: Gruppo;
}

.caise7:nth-of-type(2) {
    color: lightpink;
    --color1: pink;
    --color2: mediumblue;
    --color3: dodgerblue;
    --color4: azure;
    font-family: Bad Script;
}

.caise7:nth-of-type(3) {
    color: lightyellow;
    --color1: yellow;
    --color2: dodgerblue;
    --color3: green;
    --color4: mediumblue;
    font-family: Kumar One Outline;
}

.caise7:nth-of-type(4) {
    color: lightyellow;
    --color1: gold;
    --color2: dodgerblue;
    --color3: pink;
    --color4: azure;
    font-family: Londrina Outline;
}

.caise7:nth-of-type(5) {
    color: azure;
    --color1: azure;
    --color2: aqua;
    --color3: dodgerblue;
    --color4: blue;
    font-family: Sriracha;
}

.caise7:nth-of-type(6) {
    color: azure;
    --color1: green;
    --color2: pink;
    --color3: dodgerblue;
    --color4: green;
    font-family: Yellowtail;
}

.caise7:nth-of-type(7) {
    color: lightyellow;
    --color1: yellow;
    --color2: orange;
    --color3: pink;
    --color4: purple;
    font-family: Bad Script;
}

.caise7:nth-of-type(8) {
    color: yellow;
    --color1: yellow;
    --color2: pink;
    --color3: azure;
    --color4: pink;
    font-family: Monoton;
}

.caise7:nth-of-type(9) {
    color: lightyellow;
    --color1: yellow;
    --color2: gold;
    --color3: azure;
    --color4: pink;
    font-family: Sriracha;
}

@keyframes flicker {
    50% {
        color: white;
        filter: saturate(200%) hue-rotate(90deg);
    }
}
</style>