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

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

function Column(prop) {
    let $canvas = undefined;
    function TrendChart(width, height, $canvas) {
        const data = prop.list.map(v=> {
            return {
                type: v.scheduleName, 
                value: v.watchRate
            }
        });

        const chart = new Chart({
            container: $canvas,
            autoFit: true,
            height,
            width,
            padding: [
                20,
                20,
                50,
                20
            ]
        });
        chart.data(data);

        chart.axis('type', {
            tickLine: {
                alignTick: false,
            },
            label: {
                autoHide: false,
                formatter: n => {
                    const nl = n.split(""), len = nl.length > 6 ? 5 : nl.length, out = [];
                    for (let i = 0; i < len; i++) {
                        if(i%3 !== 2 || i === len - 1) {
                            out.push(nl[i]);
                            continue
                        }
                        out.push(nl[i] + '\n');
                    }
                    if(nl.length <= 6) return out.join("")
                    else return out.join("") + "..."
                },
                style: {
                    fill: "#fff"
                }
            }
        });
        chart.axis('value', false);

        chart.tooltip({
            showMarkers: false,
        });
        chart.interval().position('type*value');
        chart.interaction('element-active');

        // 添加文本标注
        data.forEach((item) => {
            chart
                .annotation()
                .text({
                    position: [item.type, item.value],
                    content: item.value,
                    style: {
                        textAlign: 'center',
                        fill: "#fff"
                    },
                    offsetY: -10,
                });
        });
        chart.render();
    }
    onMount(() => {
        TrendChart(prop.width, prop.height, $canvas)
    })
    return (
        <div className="livRang" style={`width:${prop.width}px;`}>
            <div className="head">{prop.title}</div>
            <div ref={$canvas}></div>
        </div>
    );
}

export default Column;
