import { onMount } from "solid-js";
import { Chart } from '@antv/g2';
// import DataSet from '@antv/data-set';

import "../../../assets/style/BigScreenHome.css"


function ListeningRate(prop) {
    let $canvas = undefined;
    function TrendChart(width, height, $canvas) {
        const data = prop.list.map(v => {
            return {
                type: v.channelName,
                value: v.watchRate
            }
        }).reverse();
        const chart = new Chart({
            container: $canvas,
            width,
            height,
            padding: [10, 60, 10, 10]
        });
        chart.data(data);
        chart.axis('value', false);
        chart.axis('type', {
            title: null,
            tickLine: null,
            subTickLine: null,
            line: null,
            title: null,
            label: {
                style: {
                    fill: "#fff"
                },
                formatter: () => {
                    return ""
                }
            }
        });
        // chart.tooltip({
        //     shared: true,
        //     itemTpl: `
        //     <div style="margin-bottom: 10px;list-style:none;">
        //         <span style="background-color:{color};" class="g2-tooltip-marker"></span>
        //         {value}
        //     </div>
        //     `
        // })
        chart.tooltip(false)
        chart.legend(false);
        chart.coordinate().transpose();
        chart
            .interval()
            .position('type*value')
            .color('l(0) 0:#1890ff 1:#70cdd0');
        // 添加文本标注
        data.forEach((item) => {
            chart
                .annotation()
                .text({
                    position: [item.type, item.value],
                    content: item.type,
                    style: {
                        textAlign: 'center',
                        fill: '#fff',
                    },
                    offsetX: 30,
                });
        });
        chart.render();
    }
    onMount(() => {
        TrendChart(prop.width, prop.height - 10, $canvas)
    })
    return (
        <div className="livRang" style={`width:${prop.width}px;`}>
            <div className="head">{prop.title}</div>
            <div ref={$canvas}></div>
        </div>
    );
}

export default ListeningRate;
