import { cloneDeep } from 'lodash';
import { getLineAxisPointer, getShadowAxisPointer } from './axisPointer'

export const columnChart_tooTip = {
    show: true,
    trigger: 'axis',
    axisPointer: {
        type: 'shadow',
        axis: 'auto',
    },
    borderColor: '#7CB5EC',
    borderWidth: 1,
    backgroundColor: 'rgba(247, 247, 247, 0.85)',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border-radius:4px',
    textStyle: {
        color: "#333333",
        fontSize: 11
    },
    padding: 8,
    hideDelay: 500,
    formatter: (param) => {

        let str = '';
        // let tooltipUnit = 'mm';    //替换 tooltip里显示的单位
        if (param.length > 0) {
            str = '<span>' + param[0].name + '<span><br/>'
            param.forEach(element => {
                str += '<span style="color:' + element.color + '">' + element.seriesName + '：</span> <b>' + element.value + '</b><br/>'
            });
        }

        return str;
    }
}

export const getToolTipOfAxisChart = function (style: any, unit: string): any {
    let paramJsonObj = {
        trigger: "axis",
        transitionDuration: 0,
        confine: true, //是否将 tooltip 框限制在图表的区域内
        enterable: true,
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line",
            snap: true,
            label: {
                show: true,
            }, // 默认为直线，可选为：'line' | 'shadow'
        },
        borderColor: "#7CB5EC",
        borderWidth: 1,
        // backgroundColor: "#F7F7F7",
        backgroundColor: 'rgba(247, 247, 247, 0.85)',
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); borderRadius: 3; max-height: 400px;overflow: auto;font-size: 12px;",
        textStyle: {
            color: "#333333",
            fontSize: style.fontSize,
        },
        padding: 6,
        formatter: (params) => {
            console.log("params", params);
            // let str = "<div class='tool-tip'>";
            let str = "";
            //   let unit = "℃"; //替换 tooltip里显示的单位
            if (params.length > 0) {
                str += "<span>" + params[0].name + "<span><br/>";
                params.forEach((element) => {
                    str += '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' + element.color + ';"></span>';
                    str += '<span style="color:' + element.color + ';">' + element.seriesName + "：</span> <b>" + element.data + " " + unit + "</b><br/>";
                });
            }
            return str;
        },
    }
    return paramJsonObj;
}

export const getToolTipOfAxisChartNoXaxisData = function (style: any, unit: string): any {
    let paramJsonObj = {
        trigger: "axis",
        transitionDuration: 0,
        confine: true, //是否将 tooltip 框限制在图表的区域内
        enterable: true,
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line",
            snap: true,
            label: {
                show: true,
            }, // 默认为直线，可选为：'line' | 'shadow'
        },
        borderColor: "#7CB5EC",
        borderWidth: 1,
        // backgroundColor: "#F7F7F7",
        backgroundColor: 'rgba(247, 247, 247, 0.85)',
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); borderRadius: 3; max-height: 400px;overflow: auto;font-size: 12px;",
        textStyle: {
            color: "#333333",
            fontSize: style.fontSize,
        },
        padding: 6,
        formatter: (params) => {
            console.log("params", params);
            // let str = "<div class='tool-tip'>";
            let str = "";
            //   let unit = "℃"; //替换 tooltip里显示的单位
            if (params.length > 0) {
                str += "<span>" + params[0].data[0] + "<span><br/>";
                params.forEach((element) => {
                    str += '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' + element.color + ';"></span>';
                    str += '<span style="color:' + element.color + ';">' + element.seriesName + "：</span> <b>" + element.data[1] + " " + unit + "</b><br/>";
                });
            }
            return str;
        },
    }
    return paramJsonObj;
}

export const getToolTipOfItemChart = function (style: any, unit: string): any {
    let paramJsonObj = {
        trigger: "item",
        transitionDuration: 0,
        confine: true, //是否将 tooltip 框限制在图表的区域内
        borderColor: "#7CB5EC",
        borderWidth: 1,
        // backgroundColor: "#F7F7F7",
        backgroundColor: 'rgba(247, 247, 247, 0.85)',
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); borderRadius: 3;",
        textStyle: {
            color: "#333333",
            fontSize: style.fontSize,
        },
        padding: 6,
        formatter: (param) => {
            let str = "<span >" + param.name + "<span><br/>";
            str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' +
                param.color +
                ';"></span>';
            str +=
                '<span style="color:' +
                param.color +
                '">' +
                param.seriesName +
                "：</span> <b>" +
                param.value +
                unit +
                "</b><br/>";
            return str;
        },
    }
    return paramJsonObj;
}

export const getToolTipOfItemChartTranslation = function (style: any, unit: string, translationNumber: number): any {
    let paramJsonObj = {
        trigger: "item",
        transitionDuration: 0,
        confine: true, //是否将 tooltip 框限制在图表的区域内
        borderColor: "#7CB5EC",
        borderWidth: 1,
        // backgroundColor: "#F7F7F7",
        backgroundColor: "rgba(247, 247, 247, 0.85)",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); borderRadius: 3;",
        textStyle: {
            color: "#333333",
            fontSize: style.fontSize,
        },
        padding: 6,
        formatter: (param) => {
            let value = param.value[1] + translationNumber;
            let str = "<span >" + param.name + "<span><br/>";
            str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' +
                param.color +
                ';"></span>';
            str +=
                '<span style="color:' +
                param.color +
                '">' +
                param.seriesName +
                "：</span> <b>" +
                value + 
                unit +
                "</b><br/>";
            return str;
        },
    }
    return paramJsonObj;
}


export function getCommonTooltipOfAxis(tooltipUnit?: string | string[], formatter?: any) {

    const commonTooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: getShadowAxisPointer(),
        borderColor: '#7CB5EC',
        borderWidth: 1,
        backgroundColor: 'rgba(247, 247, 247, 0.85)',
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border-radius:4px',
        textStyle: {
            color: "#333333",
            fontSize: 11
        },
        padding: 8,
        hideDelay: 500,
        // formatter : formatter
        formatter: function (params) {
            let str = '';
            // let tooltipUnit = 'mm';    //替换 tooltip里显示的单位
            if (params.length > 0) {
                str = '<span>' + params[0].name + '<span><br/>'
                if (Array.isArray(tooltipUnit)) {
                    params.forEach((element, index) => {
                        str += '<span style="color:' + element.color + '">' + element.seriesName + '：</span> <b>' + element.value + tooltipUnit[index] + '</b><br/>'
                    });
                } else {
                    params.forEach(element => {
                        str += '<span style="color:' + element.color + '">' + element.seriesName + '：</span> <b>' + element.value + tooltipUnit + '</b><br/>'
                    });
                }
            }
            return str;
        }
    }
    if (formatter) {
        const option = cloneDeep(commonTooltip)
        option.formatter = formatter
        return option;
    }
    return commonTooltip;
}

/**
 * 获取item tooltip
 * @param tooltipUnit 单位
 * @param formatter 回调函数
 * @param position 位置
 */
export function getCommonTooltipOfItem(tooltipUnit?: string, formatter?: any, position?: any) {
    const commonTooltip: { [k: string]: any } = {
        show: true,
        trigger: 'item',
        confine: true,
        borderColor: '#7CB5EC',
        borderWidth: 1,
        backgroundColor: 'rgba(247, 247, 247, 0.85)',
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border-radius:4px',
        textStyle: {
            color: "#333333",
            fontSize: 11
        },
        padding: 8,
        hideDelay: 500,
        // formatter : formatter
        formatter: function (params) {
            let str = '';
            // let tooltipUnit = 'mm';    //替换 tooltip里显示的单位
            console.log(params)

            str = '<span>' + params.name + '<span><br/>'


            str += '<span style="color:' + params.color + '">' + params.seriesName + '：</span> <b>' + params.value + tooltipUnit + '</b><br/>'


            return str;
        }
    }
    if (formatter) {
        commonTooltip.formatter = formatter;
    }
    if (position) {
        commonTooltip['position'] = position;
    }
    console.log(commonTooltip)
    return commonTooltip;
}