<template>
    <div class="InsufficientDate-form animate__animated animate__fadeInDown">
        <div class="row items-center">
            <el-icon color="#564bec">
                <IconAttention  theme="multi-color" size="48" :fill="['#564bec' ,'#564bec' ,'#FFF' ,'#43CCF8']"></IconAttention>
            </el-icon>
            <div class="col q-pl-md q-pr-lg">
                <span class="fz14 q-pl-md PingFangSC">您好，您的云服务将于{{userInfo.expire}}正式到期，截止目前仅剩{{EndDays}}天，到期后将无法正常登录使用、为了保证正常使用，请及时续费!如果已启动付费流程，请忽略此消息。</span> 
                <a class="fz14 PingFangSC cursor-pointer" @click="goRenew">立即续费→</a>
            </div>
            <span class="close-btn cursor-pointer column items-center flex-center"
            @click.stop="Off"><IconClose :size="16"></IconClose></span>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { useRouter } from "vue-router";
    import { useUserStore } from "@/store";
    import { storeToRefs } from "pinia";
    import { openNewBlank, dateDiffer } from "@/utils/common";
    const router = useRouter();
    const useUser = useUserStore();
    const { userInfo } = storeToRefs(useUser);
    const props = defineProps({
        DetaTem:{
            type: Boolean,
            default: false,
        },
        Details:{
            type: Object,
            default: {},
        }
    })
    const emit = defineEmits<{
        (event: 'close'): void,
        (event: 'scanCode'): void,
    }>()
    if(router.currentRoute.value.path=='/p/show') emit('close')
    const EndDays = dateDiffer(userInfo.value.expire)
    const Off = () => {
        emit('close')
    }

    const goRenew = () =>{
        router.push({
            path:`/p/show`
        })
    }
</script>
<style lang="scss" scoped>
.InsufficientDate-form{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background: #dedcff;
    border-radius: 10px;
    padding: 10px 20px;
    z-index: 9;
}
.close-btn{
    text-align: center;
    color: black;
    border-radius: 50%;
    z-index: 3;
}
.close-btn:hover{
    color:$themeColor;
}
</style>