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

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

function DataFormmat(timeString) {
    if (!timeString || typeof timeString !== 'string') return "";
    const y = timeString[0] + timeString[1] + timeString[2] + timeString[3];
    const m = timeString[4] + timeString[5];
    const d = timeString[6] + timeString[7];
    return [y, m, d].join("-");
}

function Usertrend(prop) {
    let $canvas = undefined, origin = prop.list || [];
    function TrendChart(width, height, $canvas) {
        const data = (origin || []).map(v => {
            return {
                Data: DataFormmat(v.dt),
                sales: v.readCount
            }
        });
        const chart = new Chart({
            container: $canvas,
            autoFit: true,
            height,
            width,
            padding: [
                10,
                40,
                30,
                70,
            ]
        });
        let max = 0, maxText = "", min = Infinity, minText = "";
        (data || []).map(v => {
            if (v.sales > max) {
                max = v.sales;
                maxText = v.Data;
            }
            if (v.sales < min) {
                min = v.sales;
                minText = v.Data;
            }
        })
        chart.data(data);
        chart.scale('Data', {
            range: [0, 1],
            tickCount: 10,
            type: 'timeCat'
        });
        chart.scale('sales', {
            nice: true,
        });
        // chart.annotation().dataMarker({
        //     position: [maxText, max],
        //     top: true,
        //     text: {
        //         content: '最高值：' + max,
        //         style: {
        //             fontSize: 13,
        //             fill: "#ffffff",
        //         }
        //     },
        //     line: {
        //         length: 30,
        //     },
        // });
        chart.axis('sales', {
            label: {
                formatter: n => {
                    return utils.formatNumber(n,2);
                },
                style: {
                    fill: "#fff"
                },
            },
            grid: null
        });
        chart.axis('Data', {
            label: {
                style: {
                    fill: "#fff"
                },
            },
            grid: null
        });
        chart.tooltip({
            showCrosshairs: true,
        });

        chart.line().shape('smooth').position('Data*sales');
        chart.area().shape('smooth').position('Data*sales');
        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 Usertrend;
