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

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

function ListeningRate(prop) {
    onMount(() => { })

    return (
        <div class="livRang" style={{
            width: `${prop.width}px`
        }}>
            <div class="head">{prop.title}</div>
            <div style={{ display: 'flex' }}>

                <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`,
                    }}>
                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 > 6 ? 'none' : 'flex' }}>
                            <div class='td'>{i() + 1}</div>
                            <Show when={item.activity.length > 11}>
                                <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
                                    {item.activity}
                                </marquee>
                            </Show>
                            <Show when={item.activity.length <= 11}>
                                <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
                                    {item.activity}
                                </dev>
                            </Show>
                            <div class='td'>{utils.formatNumber(item.readCount)}</div>
                        </div>}</For>
                    </div>
                </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`,
                    }}>
                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 <= 6 ? 'none' : 'flex' }}>
                            <div class='td'>{i() + 1}</div>
                            <Show when={item.activity.length > 11}>
                                <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
                                    {item.activity}
                                </marquee>
                            </Show>
                            <Show when={item.activity.length <= 11}>
                                <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
                                    {item.activity}
                                </dev>
                            </Show>
                            <div class='td'>{utils.formatNumber(item.readCount)}</div>
                        </div>}</For>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ListeningRate;