bigScreen/src/pages/CommonBigScreen/components/NewMedia.jsx

import { onMount, createSignal, createEffect, For } from "solid-js";
import utils from "../../../utils/index"
import "../../../assets/style/CommonBigScreenHome.css"

import wx from "../../../assets/img/微信.png";
import wxo from "../../../assets/img/微信-o.png";
import ks from "../../../assets/img/快手.png";
import kso from "../../../assets/img/快手-o.png";
import qdxw from "../../../assets/img/起点新闻.png";
import qdxwo from "../../../assets/img/起点新闻-o.png";
import ssp from "../../../assets/img/闪视频.png";
import sspo from "../../../assets/img/闪视频-o.png";
import sxtt from "../../../assets/img/陕西头条.png";
import sxtto from "../../../assets/img/陕西头条-o.png";
import tt from "../../../assets/img/头条.png";
import tto from "../../../assets/img/头条-o.png";
import wb from "../../../assets/img/微博.png";
import wbo from "../../../assets/img/微博-o.png";
import dy from "../../../assets/img/抖音.png";
import dyo from "../../../assets/img/抖音-o.png";

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

    timeout = timeoutFun()
    let p = {};
    createEffect(() => {
        if (prop.styleCss) p = prop.styleCss;
        if (prop.width) p.width = `${prop.width}px`;
        if (prop.height) p.height = `${prop.height + 40}px`;
    })

    const getimg = (text, isSelect) => {
        if (text === '微信') return isSelect ? wxo : wx;
        if (text === '微博') return isSelect ? wbo : wb;
        if (text === '抖音') return isSelect ? dyo : dy;
        if (text === '头条') return isSelect ? tto : tt;
        if (text === '快手') return isSelect ? kso : ks;
        if (text === '陕西头条') return isSelect ? sxtto : sxtt;
        if (text === '闪视频') return isSelect ? sspo : ssp;
        if (text === '起点新闻') return isSelect ? qdxwo : qdxw;
    }

    return (
        <div class="livRang newMdia" style={p}>
            <div class="head">{prop.title}</div>
            <div style={{ "white-space": "nowrap", "display": "flex" }}>
                <For each={prop.list}>{(item, i) => <div class="TabBtn">
                    <img onClick={() => imgClick(i())} class="tabIcon" src={getimg(item.name, act() === i())} />
                    {/* <span style="vertical-align: middle;">{item.name}</span> */}
                </div>}</For>
            </div>
            <div class="table" >
                <div class="tr" style={{ "background-color": "#03375e" }}>
                    <div class='td'>序号</div>
                    <div class='td' style={{ "flex": "2" }}>部门</div>
                    <div class='td' style={{ "flex": "2" }}>账号</div>
                    <div class='td' style={{ "flex": "2" }}>当月阅读量</div>
                </div>
                <div style={{
                    height: `${prop.height - 82}px`,
                    overflow: 'hidden'
                }}>
                    <For each={TableList()}>{(item, i) => <div class="tr trColor">
                        <div class='td'>{i() + 1}</div>
                        <div class='td' style={{ "flex": "2" }}>
                            {item.depName}
                        </div>
                        <div class='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 class='td' style={{ "flex": "2" }}>{utils.formatNum(item.readCount)}</div>
                    </div>}</For>
                </div>
            </div>
        </div>
    );
}

export default NewMedia;