import { onMount, For } from "solid-js";

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

function ListeningRate(prop) {
    onMount(() => { })
    return (
        <div class="livRang" style={{
            width:`${prop.width}px`
        }}>
            <div class="head">{prop.title}</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'>传播次数</div>
                </div>
                <div style={{
                    height:`${prop.height - 42}px`,
                    overflow: 'auto'
                }}>
                    <For each={prop.list}>{(item, i) => <div class="tr trColor">
                        <div class='td'>{i() + 1}</div>
                        <div class='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 class='td'>{utils.formatNumber(item.readCount)}</div>
                    </div>}</For>
                </div>
            </div>
        </div>
    );
}

export default ListeningRate;
