<template>
    <div class="hc-datav-total-card relative h-[120px] p-[14px]">
        <div class="card-angle absolute inset-0">
            <div class="angle a1 absolute left-0 top-0 h-[21px] w-[34px]" />
            <div class="angle a2 absolute right-0 top-0 h-[21px] w-[34px]" />
            <div class="angle a3 absolute bottom-0 left-0 h-[21px] w-[34px]" />
            <div class="angle a4 absolute bottom-0 right-0 h-[21px] w-[34px]" />
        </div>
        <div class="card-content relative h-full">
            <template v-if="isSlotDefault">
                <slot />
            </template>
            <template v-else>
                <div v-if="isSlotTitle" class="title text-[28px] font-bold">
                    <slot name="title" />
                </div>
                <div v-else class="title text-[28px] font-bold">{{ title }}</div>
                <div class="quantity absolute bottom-[-8px] right-[4px] font-bold" :style="{ color }">
                    <span class="num vertical-sub text-[60px]">{{ num }}</span>
                    <span v-if="unit" class="unit ml-[5px] text-[28px]">({{ unit }})</span>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, useSlots } from 'vue'
defineProps({
    title: {
        type: String,
        default: '',
    },
    num: {
        type: [String, Number],
        default: '0',
    },
    unit: {
        type: String,
        default: '亿',
    },
    color: {
        type: String,
        default: '',
    },
})

//判断<slot>是否有传值
const slots = useSlots()
const isSlotDefault = ref(!!slots.default)
const isSlotTitle = ref(!!slots.title)
</script>

<style scoped lang="scss">
.hc-datav-total-card {
    .card-angle {
        background-color: rgb(0 43 84 / 80%);
        border: 1px solid rgb(15 84 155 / 80%);
        border-radius: 4px;
        z-index: 0;
        .angle {
            border: 5px solid #66FFFF;
            &.a1 {
                border-right: 0;
                border-bottom: 0;
                border-radius: 4px 0 0 0;
            }
            &.a2 {
                border-left: 0;
                border-bottom: 0;
                border-radius: 0 4px 0 0;
            }
            &.a3 {
                border-top: 0;
                border-right: 0;
                border-radius: 0 0 0 4px;
            }
            &.a4 {
                border-top: 0;
                border-left: 0;
                border-radius: 0 0 4px 0;
            }
        }
    }
    .card-content {
        z-index: 1;
    }
}
</style>
