<template>
    <div class="count_wrap">
        <div class="date_wrap">
            <div class="time">{{ nowTime }}</div>
            <div class="date">
                <span>{{ nowDate }}</span>
                <span>{{ week }}</span>
            </div>
        </div>
        <div class="order_info">
            <div class="item">
                <div class="title">未结算订单</div>
                <div class="num">0</div>
            </div>
            <div class="item">
                <div class="title">未结算金额</div>
                <div class="num">0.00</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs'
import weekday from 'dayjs/plugin/weekday'
dayjs.extend(weekday)

import { ref, onMounted, onUnmounted } from 'vue'

const nowTime = ref(dayjs().format('HH:mm'))
const nowDate = ref(dayjs().format('M月D日 '))
const weekFormat = {
    1: '星期一',
    2: '星期二',
    3: '星期三',
    4: '星期四',
    5: '星期五',
    6: '星期六',
    7: '星期天',
}
const week = ref(weekFormat[dayjs().weekday()])

const timer = ref(null)
function updateTime() {
    timer.value = setInterval(() => {
        nowTime.value = dayjs().format('HH:mm')
        console.log('时间更新了')
    }, 30000)
}

onMounted(() => {
    updateTime()
})

onUnmounted(() => {
    clearInterval(timer.value)
    timer.value = null
})
</script>

<style scoped lang="scss">
.time {
    font-family: 'num';
    font-size: 42px;
    letter-spacing: 10px;
    font-weight: bold;
}

.count_wrap {
    padding: 0 var(--el-font-size-base);

    .date_wrap {
        padding: var(--el-font-size-base) 0;
        border-bottom: 1px solid #ececec;

        .date {
            font-size: var(--el-font-size-base);
        }
    }

    .order_info {
        padding: var(--el-font-size-base) 0;
        display: flex;

        .item {
            flex: 1;

            .num {
                font-family: 'num';
                font-size: 26px;
                letter-spacing: 4px;
                padding-top: 10px;
                font-weight: bold;
            }
        }
    }
}
</style>