import { onMount, onCleanup, createSignal } from "solid-js"

import utils from "../utils/index"

import "./titleStyle.css"

const [timeDate, settimeDate] = createSignal(utils.getTime())
let lastTime = Date.now();

function animation() {
    window.animationID = window.requestAnimFrame(() => {
        const nowTime = Date.now();
        window.cancelrequestAnimFrame(window.animationID);
        animation()
        if ((nowTime - lastTime) < 60000) return
        lastTime = nowTime;
        settimeDate(utils.getTime())
    })
}

function titleStyle() {
    onMount(() => {
        animation()
    })
    onCleanup(()=>{
        window.animationID >= 0 && window.cancelrequestAnimFrame(window.animationID);
    })
    return <div class="headTitle">
        <div class="title">
            <div class="bgUp"></div>
            <div class="bgDown"></div>
            <div class="textTop">
                舆情态势感知
                <span style={{"font-size":"0.2rem","padding-left":"1em"}}>陕西广电融媒体集团</span>
            </div>
            <div class="textBottom">
                <i class="iconfont icon-shijian"></i>
                <span>
                    &nbsp;
                    {timeDate().year}-{timeDate().month}-{timeDate().day}
                    &nbsp;
                    &nbsp;
                    {timeDate().hour}:{timeDate().min}
                </span>
            </div>
        </div>
    </div>
}

export default titleStyle;
