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

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

function ListeningRate(prop) {
    const [TableList] = createStore(prop.list)
    onMount(() => { })
    const maxlen = Math.ceil(prop.width / 28);
    return (
        <div className="livRang" style={`width:${prop.width}px;${prop.styleCss}`}>
            <div className="head">{prop.title}</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'>传播次数</div>
                </div>
                <div style={`height:${prop.height - 42}px;overflow-y: auto;`}>
                    <For each={TableList}>{(item, i) => <div className="tr trColor">
                        <div className='td'>{i() + 1}</div>
                        <div className='td' style='flex:2;min-width: 0'>
                            {/* <Show when={maxlen <= item.activity.length}>
                                <marquee behavior="scroll">{item.activity} </marquee>
                            </Show>
                            <Show when={maxlen > item.activity.length}> */}
                                {item.activity}
                            {/* </Show> */}
                            
                        </div>
                        <div className='td'>{utils.formatNumber(item.readCount)}</div>
                    </div>}</For>
                </div>
            </div>
        </div>
    );
}

export default ListeningRate;
