<template>
    <div v-if="showContent" class="alert-box">
        <el-row class="alert-title">
            <svg-icon icon-class="device" size="25" class-name="card-panel-icon" style="color: white; margin-top: 3px; float: left; margin-right: 10px" />
            <el-col :span="12">
                <div>{{ title }}</div>
            </el-col>
            <i class="el-icon-close close-icon" style="color: #eee; font-size: 16px; float: right; cursor: pointer; margin-right: 5px" @click="closeAlert"></i>
        </el-row>
        <div class="alert-content">{{ content }}</div>
    </div>
</template>
<script>
export default {
    props: {
        message: {
            title: '',
            content: '',
        },
        showTip: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        message: {
            handler(newVal) {
                if (newVal) {
                    this.message = newVal;
                    if (this.message.showDialog == 1) {
                        this.showContent = this.showTip;
                        this.title = this.message.title;
                        this.content = this.message.content;
                    }
                    this.autoClose = setTimeout(() => {
                        this.closeAlert();
                    }, 2000);
                }
            },
        },
    },
    data() {
        return {
            title: '',
            content: '',
            showContent: false,
            autoClose: null,
        };
    },
    computed: {},
    mounted() {
        if (this.message) {
            if (this.message.showDialog == 1) {
                this.showContent = this.showTip;
                this.title = this.message.title;
                this.content = this.message.content;
            }
            // 设置两秒后自动关闭
            this.autoClose = setTimeout(() => {
                this.closeAlert();
            }, 2000);
        }
    },
    beforeDestroy() {
        clearTimeout(this.autoClose); // 组件销毁时清除定时器
    },
    methods: {
        closeAlert() {
            this.showContent = false;
            clearTimeout(this.autoClose);
        },
    },
};
</script>

<style>
.alert-box {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 300px; /* 可以根据需要调整宽度 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid red;
    background: white;
    border-radius: 5px 5px 0 0px;
    z-index: 9999; /* 确保提示框在最上层 */
}

.alert-title {
    background-color: red; /* 标题背景色 */
    color: white; /* 标题文字颜色 */
    padding: 10px;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.alert-content {
    background-color: white; /* 提示内容背景色 */
    padding: 15px;
}

.close-btn {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
    font-weight: bold;
    float: right;
    background-color: white; /* 提示内容背景色 */
    padding: 10px;
}

.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: red;
}
</style>
