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();
let animationID = -1;

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

function titleStyle() {
    onMount(() => {
        animation()
    })
    onCleanup(()=>{
        animationID >= 0 && window.cancelrequestAnimFrame(animationID);
    })
    return <div className="headTitle">
        <div className="title">
            <div className="bgUp"></div>
            <div className="bgDown"></div>
            <div className="textTop">
                舆情态势感知
                <span style="font-size: 0.2rem;padding-left: 1em">陕西广电融媒体集团</span>
            </div>
            <div className="textBottom">
                <i className="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;
