<template>
    <div class="hc-page-status-box" :class="ui">
        <div class="page-status">
            <img class="page-status-img" :src="nowebp" alt="" v-if="isType === 'NoForm'"/>
            <div class="page-status-text" v-if="isText">{{isText}}</div>
            <div class="page-status-desc" v-if="isDesc">{{isDesc}}</div>
        </div>
    </div>
</template>

<script setup>
import {ref,watch} from "vue";
import nowebp from '~src/assets/view/Web2x_x.webp';

const props = defineProps({
    ui: {
        type: String,
        default: ""
    },
    text: {
        type: String,
        default: "暂无相关数据"
    },
    desc: {
        type: String,
        default: ""
    },
    type: {
        type: String,
        default: "NoForm"
    },
})

//变量
const isType = ref(props.type)
const isText = ref(props.text)
const isDesc = ref(props.desc)

//监听
watch(() => [
    props.type,
    props.text,
    props.desc,
], ([type, text, desc]) => {
    isType.value = type
    isText.value = text
    isDesc.value = desc
})
</script>

<style lang="scss" scoped>
.hc-page-status-box {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .page-status {
        position: relative;
        .page-status-img {
            width: 350px;
        }
        .page-status-text {
            text-align: center;
            font-size: 20px;
            color: #aaa;
        }
        .page-status-desc {
            text-align: center;
            font-size: 14px;
            color: #c5c5c5;
            margin-top: 8px;
        }
    }
}
</style>
