<script>
/**
 * vs-systitle 2022-07-01
 * 
 * height 系统标题高度 80
 * titleBg 系统背景图片
 * hasTime 是否展示时间 true
 * hasWeather 是否展示天气 true
 * hasWeaLabel 是否展示天气状态图标 true
 * temperature 温度 23°C
 * weaState 天气状况 rain  可选 cloud/多云 rain/雨 snow/雪 sun/晴
 * weaTop 天气容器距离顶部高度 10
 * timeTop 时间容器距离顶部高度 10
 * 
 * @title-click 点击标题回调函数
 * 
 * 该组件使用了插槽 可以扩展自定义内容
 */
export default {
    name: "vs-systitle",
};
</script>
<script setup>
import {
    ref,
    reactive,
    onMounted,
} from "vue";
const props = defineProps({
    height: {
        type: Number,
        default: 80,
    },
    titleBg: {
        type: String,
        default: '',
    },
    hasTime: {
        type: Boolean,
        default: true,
    },
    hasWeather: {
        type: Boolean,
        default: true,
    },
    hasWeaLabel: {
        type: Boolean,
        default: true,
    },
    temperature: {
        type: String,
        default: '23°C',
    },
    weaState: {
        type: String,
        default: 'rain', 
    },
    weaTop: {
        type: Number,
        default: 10,
    },
    timeTop: {
        type: Number,
        default: 10,
    }

});

const style = reactive({
    title: {
        height: props.height + 'px'
    },
    logo: {
        backgroundImage: `url(${props.titleBg})`
    },
    time: {
        top: props.weaTop + 'px'
    },
    weather: {
        top: props.timeTop + 'px'
    }
})

const time = reactive({
    week: '',
    d1: '',
    d2: ''
})

const getTime = function () {
    let date = new Date(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds();
    var year = date.getFullYear();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    time.d1 = `${year}-${month}-${day}`;
    time.d2 = `${hour}:${minute}:${second}`
}

const getWeek = function () {
    var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var now = new Date();
    var day = now.getDay();
    var week = weeks[day];
    return week;
}


onMounted(() => {
    if (props.hasTime) {
        time.week = getWeek();
        setInterval(() => {
            getTime();
        }, 1000)
        getTime();
    }
});

const emit = defineEmits(["title-click"]);
const logoClickHandle = function () {
    emit("title-click");
}

</script>

<template>
    <div :style="style.title" class="vs-systitle">
        <div v-if="hasTime" :style="style.time" class="vs-time">
            <div class="vs-time--emph">{{ time.d2 }}</div>
            <div class="vs-time--weak">
                <span class="vs-time--weak--spant">{{ time.week }}</span>
                <span class="vs-time--weak--spanb">{{ time.d1 }}</span>
            </div>
        </div>
        <div @click="logoClickHandle" :style="style.logo" class="vs-logo"></div>
        <div :style="style.weather" v-if="hasWeather" class="vs-weather">
            <i v-if="hasWeaLabel" :class="weaState"></i>
            <span>{{ temperature }}</span>
        </div>
        <slot />
    </div>
</template>

<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);

.vs-systitle {
    width: 100%;
    position: absolute;
    z-index: 999;
    left: 0px;
    top: 0px;
    color: #fff;


    .vs-logo {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .vs-time {
        position: absolute;
        right: 10px;
        width: 200px;
        overflow: hidden;

        .vs-time--emph {
            font-size: 25px;
            float: left;
        }

        .vs-time--weak {
            float: left;
            font-size: 12px;
            margin-left: 10px;

            .vs-time--weak--spant {
                letter-spacing: 12px;
            }

            span {
                display: block;
            }
        }
    }

    .vs-weather {
        width: 80px;
        position: absolute;
        left: 30px;

        span {
            font-size: 20px;
            padding-left: 10px;
        }

        i {
            float: left;
            width: 23px;
            height: 23px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .sun {
            background-image: url('../icon/sun.png');
        }

        .cloud {
            background-image: url('../icon/cloud.png');
        }

        .rain {
            background-image: url('../icon/rain.png');
        }
        .snow {
            background-image: url('../icon/snow.png');
        }
    }
}
</style>
