/**
 * 图表的样式结构: 为chartOptions.defaultOption下的所有属性,应该是所有图表类型的并集
 * DOM的结构与此对应: DOM操作后修改此处参数,直接存储后台, 渲染图表时候经过一层引擎转换才能使用各个图表插件渲染; 后台拿到此参数,可对应绑定到DOM上
 *
 * 设计细节:
 * 1. 各个图表类型之间的设置项不同,有交集和并集,此处设置统一存储并集参数
 * 2. 切换图表类型时,亦应保留所具有的设置参数,为切换回上一个图表类型保留设置
 */
import { deepCopy } from '../utils/chartUtil';
const baseComponent = {
    label: {
        fontSize: 12, //字体大小 //fontSize为'custom'时,取cusFontSize的值
        color: '#333', //颜色
        fontFamily: 'sans-serif', //字体
        fontGroup: [], //字体, 加粗:选中:'bold',无:'normal'; 斜体: 选中:'italic',无:'normal';方向:选中:'vertical',无:'horizen'
        cusFontSize: 12, //自定义文字大小
    },
    formatter: {
        prefix: '', //前缀
        suffix: '', //后缀
        ratio: 1, //数值比例
        digit: 'auto', //小数位数
    },
};
const chartComponent = {
    //标题设置
    title: {
        show: false, //是否显示
        text: '默认标题', //标题内容
        label: deepCopy(baseComponent.label),
        position: {
            value: 'left-top', //custom:自定义 //left-top  为custom的时候,取offsetX, offsetY
            offsetX: 40, //自定义的X位置,单位百分比
            offsetY: 50, //自定义的Y位置,单位百分比
        },
    },
    //副标题
    subtitle: {
        show: false, //是否显示
        text: '', //标题内容
        label: deepCopy(baseComponent.label),
        distance: {
            value: 'auto', //'auto': 默认, 'far': 远 // 'normal': 一般 'close':近 custom :取cusGap作为距离
            cusGap: 40, //自定义距离
        },
    },
    // 图表设置
    config: {
        color: 'transparent', //默认颜色//'#333'
        fontFamily: 'Sans-serif',
        grid: {
            value: 'normal', //''normal':正常 'wide':宽 // 'narrow':窄 // 'slender':瘦长 'flat':扁平
            top: 5,
            left: 10,
            right: 20,
            bottom: 10,
        },
    },
    //图例设置
    legend: {
        show: true,
        selectMode: 'multiple', //'single':单选 //'多选':multiple //'禁用':'disable'
        selected: [
            //图例显示选择 //动态数据渲染 //分:初始化图表+后台加载使用数据结构中数据 /编辑时根据系列实时变化
            {
                seriesName: '衣服', //
                isShow: true,
            },
            {
                seriesName: '食材', //
                isShow: true,
            },
            {
                seriesName: '图书', //
                isShow: true,
            },
        ],
        label: deepCopy(baseComponent.label), //图例文字样式
        position: {
            value: 'left-top', //custom:自定义 //left-top  为custom的时候,取offsetX, offsetY
            offsetX: 40, //自定义的X位置,单位百分比
            offsetY: 50, //自定义的Y位置,单位百分比
            direction: 'horizontal', //图例位置水平或者垂直 horizontal(水平)/vertical(垂直)
        },
        width: {
            //图例图标大小
            value: 'auto', //'auto':默认/ 'big':大/'medium':中/'small':小/'custom':自定义
            cusSize: 25, //图例自定义宽度 ,单位px
        },
        height: {
            //图例图标大小
            value: 'auto', //'auto':默认/ 'big':大/'medium':中/'small':小/'custom':自定义
            cusSize: 14, //图例自定义宽度 ,单位px
        },
        distance: {
            value: 'auto', //'auto':默认 /far':远 / 'general':一般 / 'near':近 /'custom':自定义
            cusGap: 10, //自定义距离
        },
        itemGap: 10,
    },
    //提示设置
    tooltip: {
        show: true, //鼠标提示显示
        label: deepCopy(baseComponent.label), //文字样式
        backgroundColor: 'rgba(50,50,50,0.7)', // 鼠标提示框背景色
        triggerOn: 'mousemove', // 'mousemove':鼠标滑过 click':单击 触发条件
        triggerType: 'item', //触发类型 //'axis':坐标轴触发 'item':数据项图形触发
        axisPointer: {
            // 指示器配置
            type: 'line', // 'line':默认直线指示器 //'cross': 十字指示器配置 //'shadow': 阴影指示器配置
            style: {
                // 指示器样式
                color: '#555',
                width: 'normal', //宽度:'normal':正常 'bold': 粗 'bolder':加粗
                type: 'solid', //'solid': 实线 'dash': 虚线 'dot':点线
            },
        },
        format: [
            //鼠标提示后缀
            {
                seriesName: '衣服',
                prefix: '', //前缀
                suffix: '', //后缀 (自定义单位)
                ratio: 1, //除以的数 // 1为默认, 0.1 /0.001 /...
                digit: 'auto', //小数位数 'auto' :不处理 // 数值:0 , 1 ,2 ...
            },
            {
                seriesName: '食材',
                prefix: '', //前缀
                suffix: '', //后缀
                ratio: 1,
                digit: 'auto',
            },
            {
                seriesName: '图书',
                prefix: '', //前缀
                suffix: '', //后缀
                ratio: 1,
                digit: 'auto',
            },
        ],
        position: 'auto', // 鼠标提示位置 //'inside':中心位置 //'left'/'top'/'right'/'top'
    },
    // XY轴
    axis: {
        axisType: 'xAxisDown', //要显示的坐标轴类型
        xAxisUp: {
            show: false, //显示X轴
            title: {
                showTitle: false, //显示X轴
                text: '', //标题内容
                nameGap: 15, //标题与轴线距离
                rotate: 0, //标题倾斜角度
                label: deepCopy(baseComponent.label),
                fzPosition: 'end', //标题对齐方式,end: 尾部, middle: 中间
            },
            name: '显示X轴',
            inverse: false, //反向坐标轴 (echarts有)
            //刻度线
            tickLine: {
                show: true, //显示刻度线
                width: 1, //刻度线宽度
                color: 'auto', //刻度线颜色
            },
            //刻度
            tick: {
                show: true, //显示刻度
                position: 'outside', //刻度位置,默认: outside朝外 / inside: 朝内
                length: 5, //刻度长度
                width: 1, //刻度宽度
                color: 'auto', //刻度颜色
            },
            //标签
            tickLabel: {
                show: true, //显示刻度标签
                label: deepCopy(baseComponent.label),
                rotate: 0, //倾斜标签角度
                prefix: '', //标签前缀
                suffix: '', //标签后缀
                optimize: 0,
                distance: 0, //标签与轴线距离
                min: 'auto', //最小值
                max: 'auto', //最大值
                ratio: 1,
                digit: 'auto',
            },
            //网格线
            netLine: {
                show: false, //显示网格线
                width: 1, //网格线宽度
                type: 'solid', //网格线类型
                color: 'auto', //网格线颜色
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
            },
            //网格区域
            netArea: {
                show: false, //显示网格区域
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
                colorOne: 'auto', //网格第一颜色
                colorTwo: 'auto', //网格第二颜色
            },
            axisLine: {
                //第二根X轴必需
                onZero: false,
            },
        },
        xAxisDown: {
            show: true, //显示X轴
            title: {
                showTitle: false, //显示X轴
                text: '', //标题内容
                nameGap: 15, //标题与轴线距离
                rotate: 0, //标题倾斜角度
                label: deepCopy(baseComponent.label),
                fzPosition: 'end', //标题对齐方式,end: 尾部, middle: 中间
            },
            name: '显示X轴',
            inverse: false, //反向坐标轴 (echarts有)
            //刻度线
            tickLine: {
                show: true, //显示刻度线
                width: 1, //刻度线宽度
                color: 'auto', //刻度线颜色
            },
            //刻度
            tick: {
                show: true, //显示刻度
                position: 'outside', //刻度位置,默认: outside朝外 / inside: 朝内
                length: 5, //刻度长度
                width: 1, //刻度宽度
                color: 'auto', //刻度颜色
            },
            //标签
            tickLabel: {
                show: true, //显示刻度标签
                label: deepCopy(baseComponent.label),
                rotate: 0, //倾斜标签角度
                prefix: '', //标签前缀
                suffix: '', //标签后缀
                optimize: 0, //标签间隔个数
                distance: 0, //标签与轴线距离
                min: null, //最小值
                max: null, //最大值
                ratio: 1,
                digit: 'auto',
            },
            //网格线
            netLine: {
                show: false, //显示网格线
                width: 1, //网格线宽度
                type: 'solid', //网格线类型
                color: 'auto', //网格线颜色
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
            },
            //网格区域
            netArea: {
                show: false, //显示网格区域
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
                colorOne: 'auto', //网格第一颜色
                colorTwo: 'auto', //网格第二颜色
            },
        },
        yAxisLeft: {
            show: true, //显示X轴
            title: {
                showTitle: false, //显示X轴
                text: '', //标题内容
                nameGap: 15, //标题与轴线距离
                rotate: 0, //标题倾斜角度
                label: deepCopy(baseComponent.label),
                fzPosition: 'end', //标题对齐方式,end: 尾部, middle: 中间
            },
            name: '显示Y轴',
            inverse: false, //反向坐标轴 (echarts有)
            //刻度线
            tickLine: {
                show: true, //显示刻度线
                width: 1, //刻度线宽度
                color: 'auto', //刻度线颜色
            },
            //刻度
            tick: {
                show: true, //显示刻度
                position: 'outside', //刻度位置,默认: outside朝外 / inside: 朝内
                length: 5, //刻度长度
                width: 1, //刻度宽度
                color: 'auto', //刻度颜色
            },
            //标签
            tickLabel: {
                show: true, //显示刻度标签
                label: deepCopy(baseComponent.label),
                rotate: 0, //倾斜标签角度
                formatter: deepCopy(baseComponent.formatter),
                split: 5, //分割段数
                min: null, //最小值
                max: null, //最大值
                prefix: '', //标签前缀
                suffix: '', //标签后缀
                ratio: 1,
                digit: 'auto',
                distance: 0, //标签与轴线距离
            },
            //网格线
            netLine: {
                show: false, //显示网格线
                width: 1, //网格线宽度
                type: 'solid', //网格线类型
                color: 'auto', //网格线颜色
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
            },
            //网格区域
            netArea: {
                show: false, //显示网格区域
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
                colorOne: 'auto', //网格第一颜色
                colorTwo: 'auto', //网格第二颜色
            },
        },
        yAxisRight: {
            show: false, //显示X轴
            title: {
                showTitle: false, //显示X轴
                text: '', //标题内容
                nameGap: 15, //标题与轴线距离
                rotate: 0, //标题倾斜角度
                label: deepCopy(baseComponent.label),
                fzPosition: 'end', //标题对齐方式,end: 尾部, middle: 中间
            },
            name: '显示Y轴',
            inverse: false, //反向坐标轴 (echarts有)
            //刻度线
            tickLine: {
                show: true, //显示刻度线
                width: 1, //刻度线宽度
                color: 'auto', //刻度线颜色
            },
            //刻度
            tick: {
                show: true, //显示刻度
                position: 'outside', //刻度位置,默认: outside朝外 / inside: 朝内
                length: 5, //刻度长度
                width: 1, //刻度宽度
                color: 'auto', //刻度颜色
            },
            //标签
            tickLabel: {
                show: true, //显示刻度标签
                label: deepCopy(baseComponent.label),
                rotate: 0, //倾斜标签角度
                formatter: deepCopy(baseComponent.formatter),
                split: 5, //分割段数
                min: null, //最小值
                max: null, //最大值
                prefix: '', //标签前缀
                suffix: '', //标签后缀
                ratio: 1,
                digit: 'auto',
                distance: 0, //标签与轴线距离
            },
            //网格线
            netLine: {
                show: false, //显示网格线
                width: 1, //网格线宽度
                type: 'solid', //网格线类型
                color: 'auto', //网格线颜色
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
            },
            //网格区域
            netArea: {
                show: false, //显示网格区域
                interval: {
                    //网格分割间隔数
                    value: 'auto',
                    cusNumber: 0,
                },
                colorOne: 'auto', //网格第一颜色
                colorTwo: 'auto', //网格第二颜色
            },
        },
    },
};

//此类数据抽出来作为模板数据,每次使用deepCopy一份即可
//注: 若页面展示的是语义化的参数,则此处也只定义语义化的参数,具体数值在引擎里做转换
//若界面选择的直接是用户期望的数值,则直接采用数值即可
/**
 *  位置信息
 *
 */
const positionOption = [
    { value: 'left-top', label: '左上' },
    { value: 'left-middle', label: '左中' },
    { value: 'left-bottom', label: '左下' },
    { value: 'right-top', label: '右上' },
    { value: 'right-middle', label: '右中' },
    { value: 'right-bottom', label: '右下' },
    { value: 'center-top', label: '中上' },
    { value: 'center-middle', label: '居中' },
    { value: 'center-bottom', label: '中下' },
    { value: 'custom', label: '自定义' },
];

//距离
const distanceOption = [
    { value: 'auto', label: '默认' },
    { value: 'far', label: '远' },
    { value: 'normal', label: '一般' },
    { value: 'close', label: '近' },
    { value: 'custom', label: '自定义' },
];

// 字体大小集合
const fontSizeOption = [
    { value: 6, label: '6px' },
    { value: 8, label: '8px' },
    { value: 10, label: '10px' },
    { value: 12, label: '12px' },
    { value: 14, label: '14px' },
    { value: 16, label: '16px' },
    { value: 18, label: '18px' },
    { value: 20, label: '20px' },
    { value: 22, label: '22px' },
    { value: 24, label: '24px' },
    { value: 30, label: '30x' },
    { value: 36, label: '36px' },
    { value: 'custom', label: '自定义' },
];

// 线样式
const lineStyleOption = [
    { value: 'solid', label: '实线' },
    { value: 'dashed', label: '虚线' },
    { value: 'dotted', label: '点线' },
];

// 线宽度
const lineWeightOption = [
    { value: 'normal', label: '正常' },
    { value: 'bold', label: '粗' },
    { value: 'bolder', label: '加粗' },
];

// 普通位置集合
const posOption = [
    { value: 'auto', label: '默认' },
    { value: 'inside', label: '中心位置' },
    { value: 'top', label: '上侧' },
    { value: 'left', label: '左侧' },
    { value: 'right', label: '右侧' },
    { value: 'bottom', label: '底侧' },
];

// 数值比例集合
const ratioOption = [
    { value: 100, label: '乘以100' },
    { value: 10, label: '乘以10' },
    { value: 1, label: '默认' },
    { value: 0.1, label: '除以10' },
    { value: 0.01, label: '除以100' },
    { value: 0.001, label: '除以1000' },
    { value: 0.0001, label: '除以一万' },
    { value: 0.00001, label: '除以10万' },
    { value: 0.000001, label: '除以一百万' },
    { value: 0.0000001, label: '除以一千万' },
    { value: 0.00000001, label: '除以一亿' },
    { value: 0.000000001, label: '除以十亿' },
];

// 数值位数集合
const digitOption = [
    { value: 'auto', label: '自动显示' },
    { value: 0, label: '整数' },
    { value: 1, label: '1位小数' },
    { value: 2, label: '2位小数' },
    { value: 3, label: '3位小数' },
    { value: 4, label: '4位小数' },
    { value: 5, label: '5位小数' },
    { value: 6, label: '6位小数' },
    { value: 7, label: '7位小数' },
    { value: 8, label: '8位小数' },
];

// (图例)大小集合
const sizeOption = [
    { value: 'auto', label: '默认' },
    { value: 'big', label: '大' },
    { value: 'medium', label: '中' },
    { value: 'small', label: '小' },
    { value: 'custom', label: '自定义' },
];

// 间隔集合
const intervalOption = [
    { value: 'auto', label: '默认' },
    { value: 0, label: '每个刻度' },
    { value: 1, label: '间隔1个' },
    { value: 2, label: '间隔2个' },
    { value: 3, label: '间隔3个' },
    { value: 'custom', label: '自定义' },
];

//字体大小
const fontSizeList = [
    { label: '默认', value: 'auto' },
    { label: '6px', value: 6 },
    { label: '8px', value: 8 },
    { label: '10px', value: 10 },
    { label: '12px', value: 12 },
    { label: '14px', value: 14 },
    { label: '16px', value: 16 },
    { label: '18px', value: 18 },
    { label: '24px', value: 24 },
    { label: '28px', value: 28 },
    { label: '36px', value: 36 },
    { label: '自定义', value: 'custom' },
];

//label字体样式 1 // 'bold','italic','vertical'
const fontStyleIBV = {
    bold: {
        des: '加粗',
        text: 'B',
    },
    italic: {
        des: '斜体',
        text: 'I',
    },
    vertical: {
        des: '文字方向',
        text: '垂直',
    },
};
//label字体样式 2 // 'italic','bold'
const fontStyleIB = {
    bold: {
        des: '加粗',
        text: 'B',
    },
    italic: {
        des: '斜体',
        text: 'I',
    },
};

// model data
const chartModelData = [["地区", "衣服", "食材", "图书"], ["上海", 134, 345, 51], ["北京", 345, 421, 234], ["广州", 453, 224, 156], ["杭州", 321, 634, 213], ["南京", 654, 542, 231]];

// base chart option
const chartOptions = {
    //图表类型设置集合
    chartAllType: 'echarts|line|default',

    //图表配置
    defaultOption: deepCopy(chartComponent),

    //图表数据
    chartData: deepCopy(chartModelData),
} //图表设置项

export {
    chartComponent,
    positionOption,
    distanceOption,
    fontSizeOption,
    lineStyleOption,
    lineWeightOption,
    posOption,
    ratioOption,
    digitOption,
    sizeOption,
    fontSizeList,
    intervalOption,
    fontStyleIBV,
    fontStyleIB,
    chartOptions
};