import { onMount, createSignal } from "solid-js";
import { createStore } from "solid-js/store";

import utils from "../../../utils/index"
import "../../../assets/style/BigScreenHome.css"

let timeout = undefined;
function NewMedia(prop) {
    const [origin, setOrigin] = createStore(prop.list || {})
    const [act, setact] = createSignal(0)
    const [TableList, setTableList] = createSignal(getlist())
    function getlist() {
        const setli = [];
        for (let i = 0; i < Math.floor((prop.height - 42) / 40); i++) {
            const v = ((origin[act()] || {}).data || [])[i];
            if (!v) break
            setli.push({
                userName: v.userName,
                depName: v.depName,
                readCount: v.readCount
            })
        }
        return setli
    }
    const maxlen = Math.ceil(prop.width / 90)
    onMount(() => { })
    function imgClick(index) {
        setact(index);
        setTableList(getlist())
    }
    function timeoutFun() {
        return setTimeout(() => {
            if (timeout) clearTimeout(timeout)
            const i = act() + 1 >= origin.length ? 0 : act() + 1;
            imgClick(i);
            timeout = timeoutFun();
        }, 3000);
    }

    timeout = timeoutFun()

    return (
        <div className="livRang" style={`width:${prop.width}px;height: ${prop.height + 40}px;${prop.styleCss}`}>
            <div className="head">{prop.title}</div>
            <div style="white-space: nowrap;display: flex">
                <For each={origin}>{(item, i) => <div className="TabBtn">
                    <img onClick={() => imgClick(i())} style="width: 100%;vertical-align: middle;margin-right: 3px" src={'/src/assets/img/' + item.name + (act() === i() ? '-o' : '') + '.png'} />
                    {/* <span style="vertical-align: middle;">{item.name}</span> */}
                </div>}</For>
            </div>
            <div className="table" >
                <div className="tr" style="background-color: #03375e;">
                    <div className='td'>序号</div>
                    <div className='td' style="flex: 2">部门</div>
                    <div className='td' style="flex: 2">账号</div>
                    <div className='td' style="flex: 2">当月阅读量</div>
                </div>
                <div style={`height:${prop.height - 82}px;overflow: hidden;`}>
                    <For each={TableList()}>{(item, i) => <div className="tr trColor">
                        <div className='td'>{i() + 1}</div>
                        <div className='td' style="flex: 2">
                            {item.depName}
                        </div>
                        <div className='td' style="flex: 2">
                            {/* <Show when={maxlen <= item.userName.length}>
                                <marquee behavior="scroll">{item.userName}</marquee>
                            </Show>
                            <Show when={maxlen > item.userName.length}> */}
                                {item.userName}
                            {/* </Show> */}
                        </div>
                        <div className='td' style="flex: 2">{utils.formatNumber(item.readCount)}</div>
                    </div>}</For>
                </div>
            </div>
        </div>
    );
}

export default NewMedia;
