// localStorage.removeItem("tradingview.chartproperties");
// 在初始化 Highcharts 图表之前清除 TradingView 配置
localStorage.removeItem("tradingview.chartproperties");

// 然后继续初始化 Highcharts 或处理 Datafeed 类
// const datafeed = new Datafeed(vm);
// const chart = Highcharts.stockChart('container', {
// 	// Highcharts 配置
// });
$(function() {
	// Light Theme for Highcharts
	let light = {
		chart: {
			backgroundColor: "#ffffff",
			borderColor: "#e6e6e6",
			borderWidth: 1
		},
		title: {
			style: {
				color: '#333',
				fontSize: '16px'
			}
		},
		xAxis: {
			gridLineColor: '#dcdee0',
			labels: {
				style: {
					color: '#333',
					fontSize: '9px'
				}
			},
			lineColor: '#dcdee0'
		},
		yAxis: {
			gridLineColor: '#dcdee0',
			labels: {
				style: {
					color: '#333',
					fontSize: '9px'
				}
			},
			lineColor: '#dcdee0'
		},
		legend: {
			itemStyle: {
				color: '#333'
			}
		},
		plotOptions: {
			candlestick: {
				upColor: '#2EBD85',
				downColor: '#F4465D',
				borderColor: '#2EBD85',
				borderWidth: 1
			}
		}
	};

	// Dark Theme for Highcharts
	let dark = {
		chart: {
			backgroundColor: "#2b2b37",
			borderColor: "#49495F",
			borderWidth: 1
		},
		title: {
			style: {
				color: '#fff',
				fontSize: '16px'
			}
		},
		xAxis: {
			gridLineColor: '#49495F',
			labels: {
				style: {
					color: '#fff',
					fontSize: '9px'
				}
			},
			lineColor: '#49495F'
		},
		yAxis: {
			gridLineColor: '#49495F',
			labels: {
				style: {
					color: '#fff',
					fontSize: '9px'
				}
			},
			lineColor: '#49495F'
		},
		legend: {
			itemStyle: {
				color: '#fff'
			}
		},
		plotOptions: {
			candlestick: {
				upColor: '#2EBD85',
				downColor: '#F4465D',
				borderColor: '#2EBD85',
				borderWidth: 1
			}
		}
	};

	// Final TV Style (light and dark theme options)
	let tvStyle = {
		light,
		dark
	};
	class Datafeed {
		constructor(vm) {
			this.self = vm; // 传入的数据和配置
		}
		
		// onReady 方法：传递图表支持的配置
		onReady(callback) {
		    // 返回 Highcharts 所需的配置选项
		    callback({
		        supported_resolutions: ['1', '5', '15', '30', '60', '240', '1D'],
		        supports_search: false,
		        supports_group_request: false
		    });
		}

		// resolveSymbol 方法：解析符号，返回图表所需的元数据
		resolveSymbol(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
		    // 解析符号（这里只是模拟数据，实际上可能需要连接到外部API来获取详细信息）
		    const symbolInfo = {
		        name: symbolName,
		        description: 'Some stock symbol',
		        type: 'stock',
		        timezone: 'America/New_York',
		        session: '24x7',
		        minmov: 1, // 最小变动单位
		        pricescale: 100, // 价格缩放
		        has_intraday: true, // 是否支持日内数据
		        has_daily: true, // 是否支持日线数据
		    };
		    // 解析完成后回调
		    onSymbolResolvedCallback(symbolInfo);
		}
		// getBars 方法：获取数据，转换为 Highcharts K线图所需的格式
		getBars(symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback) {
		    // 模拟获取K线数据的逻辑（从数据源或服务器获取数据）
		    const bars = []; // 假设这是从你的数据源返回的数据
		
		    // 将数据转换为 Highcharts 所需的格式
		    bars.forEach(bar => {
		        const chartData = {
		            x: bar.time, // 时间戳（单位：毫秒）
		            open: bar.open,
		            high: bar.high,
		            low: bar.low,
		            close: bar.close,
		            volume: bar.volume
		        };
		
		        onHistoryCallback([chartData], { noData: false });
		    });
		
		    // 错误回调（如果有的话）
		    onErrorCallback('Some error occurred');
		}

		subscribeBars(symbolInfo, resolution, onRealtimeCallback) {
		    const updateInterval = 1000; // 更新频率，例如每秒更新一次
		
		    // 伪代码，假设这里每秒钟获取一次数据
		    setInterval(() => {
		        // 获取实时的价格数据（实际操作中需要从数据源获取）
		        const latestBar = getLatestBarFromDataSource(); // 假设这是从服务器获取的数据
		        // 转换为 Highcharts 格式
		        const chartData = {
		            x: latestBar.time,
		            open: latestBar.open,
		            high: latestBar.high,
		            low: latestBar.low,
		            close: latestBar.close,
		            volume: latestBar.volume
		        };
		        // 调用回调函数，推送数据到 Highcharts
		        onRealtimeCallback(chartData);
		    }, updateInterval);
		}

		// subscribeBars 方法：订阅数据更新
		subscribeBars(symbolInfo, resolution, onRealtimeCallback, listenerGUID) {
			this.self.subscribeBars(symbolInfo, resolution, (bar) => {
				// 转换并推送实时更新的 K线数据
				const updatedBar = {
					x: bar.time * 1000, // 时间戳转换为毫秒
					open: bar.open,
					high: bar.high,
					low: bar.low,
					close: bar.close,
					volume: bar.volume || 0
				};
				onRealtimeCallback(updatedBar);
			});
		}

		// unsubscribeBars 方法：取消订阅数据更新
		unsubscribeBars(listenerGUID) {
			this.self.unsubscribeBars(listenerGUID);
		}

		// 默认的符号信息
		defaultSymbol() {
			return {
				'timezone': 'Asia/Shanghai',
				'minmov': 1,
				'minmov2': 0,
				'fractional': true,
				'session': '24x7',
				'has_intraday': true,
				'has_no_volume': false,
				'has_daily': true,
				'has_weekly_and_monthly': true,
				'pricescale': 10000
			};
		}
	}


	class Page {
		constructor() {
			this.datafeed = undefined; // 数据源
			this.page = 1;
			this.onRealtimeCallback = undefined;
			this.TView = undefined;
			this.interval = this.getQuery('interval') || '60'; // 默认 60 分钟
			this.symbolName = this.getQuery('symbol'); // 从 URL 获取 symbol
			this.theme = this.getQuery('theme') || 'dark'; // 默认 dark 主题
			this.lang = this.getQuery('lang') || 'en'; // 默认语言
			this.resolutions = this.getQuery('resolutions') || ["5", "15", "30", "60", "240", "1D", "1W",
				"1M"
			];
			this.isLoad = false;
			this.url = this.getQuery('getLinkUrl'); // 获取链接
			this.TVID = "tradingview_10798345"; // TV ID
			this.Ws = undefined;
			this.msg = '';
			this.contract = this.getQuery('contract');
			this.init(); // 初始化
			this.studies = []; // 配置项
			this.tvBars = []; // 数据

		}

		// 获取路径上的参数
		getQuery(name) {
			const urlParams = new URLSearchParams(window.location.search);
			return urlParams.get(name); // 返回 URL 查询参数的值
		}

		// 初始化
		init() {
		    this.linkSocket();
		    // 数据模型
		    this.datafeed = new Datafeed(this);
		
		    // 配置图表
		    this.chart = Highcharts.chart('tradingview_10798345', {
		        chart: {
		            type: 'candlestick', // 设置图表类型为 K线图
		            height: 500,
		            zoomType: 'x', // 允许水平缩放
		            events: {
		                // load: () => {
		                //     this.chart.update({
		                //         tooltip: {
		                //             positioner: function (labelWidth, labelHeight, point) {
		                //                 return { x: point.plotX, y: point.plotY };
		                //             }
		                //         }
		                //     });
		                // }
		            }
		        },
		        title: {
		            text: null // 不显示标题
		        },
		        rangeSelector: {
		            selected: 1 // 选择默认时间范围
		        },
		        time: {
		            timezone: 'Asia/Shanghai' // 设置时区
		        },
		        tooltip: {
		            split: true,
		            valueDecimals: 2, // 小数点后2位
		            valuePrefix: '$' // 显示货币符号
		        },
		        navigator: {
		            enabled: false // 禁用导航器
		        },
		        scrollbar: {
		            enabled: false // 禁用滚动条
		        },
		        xAxis: {
		            type: 'datetime', // X轴显示时间
		            labels: {
		                formatter: function () {
		                    return Highcharts.dateFormat('%Y-%m-%d %H:%M', this.value);
		                }
		            },
		            title: {
		                text: '时间'
		            }
		        },
		        yAxis: {
		            title: {
		                text: '价格'
		            }
		        },
		        series: [{
		            name: 'K线',
		            data: this.tvBars, // 假设这是通过 Datafeed 获取的 K线数据
		            type: 'candlestick', // 设置为K线图
		            tooltip: {
		                valueDecimals: 2 // 设置价格的精度
		            }
		        }],
		        exporting: {
		            enabled: false // 禁用导出功能
		        },
		        credits: {
		            enabled: false // 禁用版权信息
		        },
		        legend: {
		            enabled: false // 禁用图例
		        }
		    });
		
		    // 监听图表上的事件
		    this.chart.series[0].points.forEach((point, i) => {
		        point.on('mouseOver', function () {
		            const time = point.x;
		            const price = point.open; // 取开盘价或其他价格
		            console.log('Time:', time, 'Price:', price);
		            this.showKlineQuoter(time);
		        });
		    });
		}

		// 创建Highcharts图表
		createChart() {
			console.log('222', this.tvBars);
			const chartOptions = {
				chart: {
					renderTo: 'tradingview_10798345', // 图表容器ID
					type: 'candlestick', // 设置图表类型为蜡烛图
					backgroundColor: this.theme === 'light' ? '#fff' : '#2b2b37', // 根据主题选择背景颜色
					height: 500, // 设置图表高度
					events: {
						// load: function() {
						// 	const chart = this;
						// 	// 使用 chart 来绑定 mousemove 事件
						// 	chart.container.addEventListener('mousemove', function(event) {
						// 		// 获取鼠标位置的时间戳
						// 		const time = chart.xAxis[0].toValue(event.offsetX);
						// 		const resolutionTime = this
						// 			.getResolutionTime(); // 获取分辨率的时间周期
						// 		const fTime = Math.floor(time / resolutionTime) *
						// 			resolutionTime; // 根据分辨率计算时间
						// 		console.log('fTime', fTime);
						// 		chart.showKlineQuoter(fTime); // 显示对应的K线数据
						// 	});
						// }
					}
				},
				title: {
					// text: `${this.symbolName} Kline Chart`, // 标题显示symbol名称
					style: {
						color: this.theme === 'light' ? '#000' : '#fff' // 依据主题设置标题颜色
					}
				},
				subtitle: {
					// text: `Interval: ${this.interval}`, // 显示时间间隔
					style: {
						color: this.theme === 'light' ? '#000' : '#fff' // 依据主题设置副标题颜色
					}
				},
				xAxis: {
					type: 'datetime', // 设置x轴为时间格式
					labels: {
						style: {
							color: this.theme === 'light' ? '#000' : '#fff' // 依据主题设置x轴标签颜色
						}
					}
				},
				yAxis: {
					title: {
						text: 'Price', // y轴标题
						style: {
							color: this.theme === 'light' ? '#000' : '#fff' // 依据主题设置y轴标题颜色
						}
					},
					labels: {
						style: {
							color: this.theme === 'light' ? '#000' : '#fff' // 依据主题设置y轴标签颜色
						}
					},
				},
				series: [{
					data: this.tvBars, // K线数据，假设数据格式已适配
					// data: [
					//             [Date.UTC(2025, 2, 1), 100],
					//             [Date.UTC(2025, 2, 2), 105],
					//             [Date.UTC(2025, 2, 3), 110]
					//  ],
					type: 'candlestick', // 设置图表类型为蜡烛图
					upColor: '#4fff33', // 设置上涨时的颜色
					color: '#f00707', // 设置下跌时的颜色
					lineColor: '#f00707', // 设置线的颜色
					dataGrouping: {
						enabled: true, // 启用数据分组
						groupPixelWidth: 10 // 每个分组的宽度
					}
				}],
				plotOptions: {
					candlestick: {
						color: '#f00707', // 下跌时的颜色
						upColor: '#4fff33' // 上涨时的颜色
					}
				},
				navigation: {
					buttonOptions: {
						enabled: false // 禁用导航按钮
					}
				},
				tooltip: {
					pointFormatter: function() {
						// 格式化鼠标悬停时显示的tooltip内容
						return `<b>Time:</b> ${new Date(this.x).toLocaleString()}<br>
		                            <b>Open:</b> ${this.open}<br>
		                            <b>High:</b> ${this.high}<br>
		                            <b>Low:</b> ${this.low}<br>
		                            <b>Close:</b> ${this.close}<br>`;
					}
				}
			};

			// 渲染Highcharts图表
			console.log(chartOptions);
			Highcharts.stockChart(chartOptions);
		}
		upsertTvBars(isFirstCall, bars) {
			if (isFirstCall) {
				this.tvBars = []; // 初始化 tvBars 数组
			}

			bars.forEach((bar) => {
				// 确保不会重复添加时间戳相同的条目
				if (this.tvBars.length === 0 || !this.tvBars.find(o => o.time === bar.time)) {
					// 将数据转换为 Highcharts K 线图需要的格式：[时间戳, 开盘价, 最高价, 最低价, 收盘价]
					const highchartsBar = [
						bar.time, // 时间戳
						bar.open, // 开盘价
						bar.high, // 最高价
						bar.low, // 最低价
						bar.close // 收盘价
					];
					this.tvBars.push(highchartsBar);
				}
			});

			// 按照时间戳排序
			this.tvBars.sort((a, b) => {
				if (a[0] < b[0]) return -1;
				if (a[0] > b[0]) return 1;
				return 0;
			});

			// 更新 Highcharts 图表的数据
			this.updateChart();
		}
		showKlineQuoter(time) {
			if (this.tvBars.length === 0) return;
			const {
				from,
				to
			} = this.chart.xAxis[0].getExtremes(); // 获取 visible range
			const bar = this.tvBars.find(o => o.time === time * 1000); // 查找对应的 bar
			if (!bar) return;

			const barTime = bar.time / 1000 + 60 * 60 * 8; // 时区调整
			const fromSize = barTime - from;
			const toSize = to - barTime;

			// 更新 TV Quoter 面板
			const tvQuoter = $('#tv-quoter');
			tvQuoter.css({
				visibility: 'visible',
			});

			// 调整 Quoter 面板的位置
			if (fromSize > toSize) {
				tvQuoter.css({
					left: '10px',
					right: 'auto'
				});
			} else {
				tvQuoter.css({
					right: '10px',
					left: 'auto'
				});
			}

			// 计算涨跌幅
			let zhangdiefu = (bar.close - bar.open) / bar.open;
			let zhangdiee = bar.close - bar.open;

			// 更新 quoter 显示的数据
			tvQuoter.find('[data-name="date"]').text(this.timestampToTime(bar.time));
			tvQuoter.find('[data-name="date_lang"]').text(this.lang == 'zh-CN' ? '时间' : 'Date');
			tvQuoter.find('[data-name="open"]').text(bar.open);
			tvQuoter.find('[data-name="open_lang"]').text(this.lang == 'zh-CN' ? '开' : 'Open');
			tvQuoter.find('[data-name="high"]').text(bar.high);
			tvQuoter.find('[data-name="high_lang"]').text(this.lang == 'zh-CN' ? '高' : 'H');
			tvQuoter.find('[data-name="low"]').text(bar.low);
			tvQuoter.find('[data-name="low_lang"]').text(this.lang == 'zh-CN' ? '低' : 'L');
			tvQuoter.find('[data-name="close"]').text(bar.close);
			tvQuoter.find('[data-name="close_lang"]').text(this.lang == 'zh-CN' ? '收' : 'Close');
			tvQuoter.find('[data-name="volume"]').text((+bar.volume).toFixed());
			tvQuoter.find('[data-name="volume_lang"]').text(this.lang == 'zh-CN' ? '成交量' : 'Executed');
			tvQuoter.find('[data-name="zhangdiefu"]').text((zhangdiefu * 100).toFixed(2) + '%');
			tvQuoter.find('[data-name="zhangdiefu_lang"]').text(this.lang == 'zh-CN' ? '涨跌幅' : 'Change%');
			tvQuoter.find('[data-name="zhangdiefu"]').css('color', zhangdiee > 0 ? '#53b987' : '#eb4d5c');
			tvQuoter.find('[data-name="zhangdiee"]').text(zhangdiee.toFixed(4));
			tvQuoter.find('[data-name="zhangdiee_lang"]').text(this.lang == 'zh-CN' ? '涨跌额' : 'Change');
			tvQuoter.find('[data-name="zhangdiee"]').css('color', zhangdiee > 0 ? '#53b987' : '#eb4d5c');

			// Highcharts 更新数据：例如，更新显示的特定点的 hover 信息
			let chart = this.chart; // 获取 Highcharts 图表对象

			// 查找与给定时间相匹配的点
			const point = chart.series[0].data.find(p => p.x === bar.time);
			if (point) {
				// 更新图表的 tooltip 或者标记
				chart.tooltip.refresh(point); // 刷新 tooltip 显示当前点的数据
			}
		}
		timestampToTime(timestamp) {
			const date = new Date(timestamp);
			const yyyy = `${date.getFullYear()}`;
			const yy = `${date.getFullYear()}`.substr(2);
			const MM = `0${date.getMonth() + 1}`.slice(-2);
			const dd = `0${date.getDate()}`.slice(-2);
			const HH = `0${date.getHours()}`.slice(-2);
			const mm = `0${date.getMinutes()}`.slice(-2);

			// 获取Highcharts的分辨率（假设你已经设置了chart的分辨率）
			const resolution = this.TView.chart().resolution();
			let dateStr = '';

			if (resolution === 'D' || resolution === 'W' || resolution === 'M') {
				// 日期格式为 yyyy-MM-dd
				dateStr = `${yyyy}-${MM}-${dd}`;
			} else {
				// 日期格式为 yy-MM-dd HH:mm
				dateStr = `${yy}-${MM}-${dd} ${HH}:${mm}`;
			}

			return dateStr;
		}

		getResolutionTime() {
			const chart = this.TView.chart();
			const resolution = chart.resolution(); // 获取图表的分辨率（例如：'1', '5', 'D', 'W'等）

			switch (resolution) {
				case '1':
					return 60; // 1分钟
				case '5':
					return 5 * 60; // 5分钟
				case '10':
					return 10 * 60; // 10分钟
				case '15':
					return 15 * 60; // 15分钟
				case '30':
					return 30 * 60; // 30分钟
				case '60':
					return 60 * 60; // 1小时
				case '120':
					return 120 * 60; // 2小时
				case '240':
					return 4 * 60 * 60; // 4小时
				case 'D':
					return 24 * 60 * 60; // 1天
				case 'W':
					return 7 * 24 * 60 * 60; // 1周
				case 'M':
					return 4 * 7 * 24 * 60 * 60; // 1月（假设每月4周）
				default:
					return 1; // 如果分辨率没有匹配项，默认返回1秒
			}
		}

		createStudy() {
			let chart = this.TView.chart(); // 获取图表实例
			let theme = this.theme; // 获取主题

			// 假设你的数据是存储在 `data` 中，这里会为每条移动平均线创建一个新的 `series`
			const data = this.data; // 图表的数据

			// 计算不同周期的移动平均线
			const movingAverage = (data, period) => {
				let maData = [];
				for (let i = period - 1; i < data.length; i++) {
					let sum = 0;
					for (let j = i - period + 1; j <= i; j++) {
						sum += data[j][1]; // 假设 `data[j][1]` 是价格
					}
					maData.push([data[i][0], sum / period]); // 将时间戳和均值添加到结果
				}
				return maData;
			};

			// 定义三个不同周期的移动平均线
			let ma5 = movingAverage(data, 5);
			let ma10 = movingAverage(data, 10);
			let ma20 = movingAverage(data, 20);

			// 创建图表
			chart.update({
				series: [{
						name: 'MA 5',
						data: ma5,
						type: 'line',
						color: theme === "light" ? "#efc149" : 'rgb(238, 218, 154)',
						lineWidth: 3
					},
					{
						name: 'MA 10',
						data: ma10,
						type: 'line',
						color: theme === "light" ? "#7fcec0" : 'rgb(123, 201, 187)',
						lineWidth: 3
					},
					{
						name: 'MA 20',
						data: ma20,
						type: 'line',
						color: "rgb(194, 148, 247)",
						lineWidth: 3
					}
				]
			});
		}
		// 连接socket并更新Highcharts图表数据
		linkSocket() {
			// 连接socket
			this.Ws = new Ws(this.getQuery('ws'))
			
			this.Ws.on('message', (evt) => {
				console.log('111111112');
				console.log('Received message:', evt);  // 查看 evt 的结构
				// 检测ping消息并回应pong
				if (evt.cmd === 'ping' || evt.type === 'ping') {
					this.Ws.send({
						cmd: 'pong'
					});
				}
				console.log('Received message:', evt); // 打印事件内容
				// 处理特定的消息
				if (evt.sub == this.msg) {
					// 假设evt.data是图表数据的更新，按需求处理
					const updatedData = this.getMap(evt.data);
					console.log('updatedData', updatedData);
					// 更新Highcharts图表数据
					// this.updateChartData(updatedData);
					console.log('123123',updatedData);
					this.onRealtimeCallback(this.getMap(updatedData))
				}
			});
		}
		// 更新Highcharts图表数据
		updateChartData(newData) {
			// 假设newData是数组形式的数据，[时间戳, 值]
			const series = this.chart.series[0]; // 获取第一个数据系列

			// 向图表中添加新的数据点
			series.addPoint(newData, true, true); // 参数: 新数据, 是否重新计算坐标轴, 是否移除旧数据点

			// 或者更新整个数据系列
			// series.setData(newData);
		}
		// 图表语言映射
		chartLang() {
			switch (this.lang) {
				case "zh-CN":
					return 'zh';
				case "zh-TW":
					return 'zh_TW';
				case "tr":
					return 'tr';
				case "jp":
					return 'ja';
				case "kor":
					return 'ko';
				case "de":
					return 'de_DE';
				case "fra":
					return 'fr';
				case "it":
					return 'it';
				case "pt":
					return 'pt';
				case "spa":
					return 'es';
				default:
					return 'en';
			}
		}
		getMap(data) {
			return [
				data.id * 1000,
				data.close * 1,
				data.open * 1,
				data.high * 1,
				data.low * 1,
				data.vol * 1,
			];
		}
		
		// 获取数据
		getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onDataCallback, onErrorCallback,
			isFirstCall) {
				console.log('这里获取数据');
			let page = this.page > 3 ? 3 : this.page;
			let data = {
				symbol: symbolInfo.name,
				period: this.resolution(resolution),
				form: rangeStartDate,
				to: rangeEndDate,
				size: page * 200,
				zip: 2
			};

			this.page++;
			this.isLoad = true;
			this.unSub(); // 取消订阅

			// 使用 AJAX 请求获取数据
			$.get(this.url, data).then(res => {
				// 解压并转换数据为 Highcharts 可用格式
				let arr = this.unzip(res.data.data).map(item => {
					return this.getMap(item); // 假设 getMap(item) 返回 Highcharts 可识别的格式
				});

				// 更新数据到 Highcharts 图表
				this.upsertTvBars(isFirstCall, arr); // 这里假设你已经在 Highcharts 中设置了图表
				onDataCallback(arr); // 调用回调，传递数据

				// 更新消息和订阅机制
				this.msg = this.createMsg();
				this.sub(); // 重新订阅
			}).catch(err => {
				// 错误回调，返回空数据
				onDataCallback([]);
			});
		}
		// 解压并适配 Highcharts 数据格式
		unzip(b64Data) {
			// 解码 Base64 字符串
			let u8 = atob(b64Data);

			// 使用 pako 解压
			let jiya = pako.inflate(u8);

			// 将 Uint8Array 转换为字符串
			let str = this.Uint8ArrayToString(jiya);

			// 解析为 JSON 格式
			let jsonData = JSON.parse(str);

			// 假设解压后的数据是一个数组，并且每个数据项包含时间戳和价格值
			// 比如 jsonData = [{time: 1625479000000, value: 123}, ...]

			// 将数据转换为 Highcharts 可识别的格式 [[timestamp, value], ...]
			let highchartsData = jsonData.map(item => {
				return [item.time, item.value]; // 假设数据项有 'time' 和 'value' 字段
			});

			return highchartsData;
		}

		// 将 Uint8Array 转换为字符串的函数
		Uint8ArrayToString(fileData) {
			var dataString = "";
			for (var i = 0; i < fileData.length; i++) {
				dataString += String.fromCharCode(fileData[i]);
			}
			return dataString;
		}

		// 将解压后的 JSON 数据适配为 Highcharts 数据格式
		unzipAndAdaptToHighcharts(b64Data) {
			// 1. 解码 Base64 字符串
			let u8 = atob(b64Data);

			// 2. 使用 pako 解压 Base64 字符串
			let jiya = pako.inflate(u8);

			// 3. 将解压后的 Uint8Array 转换为字符串
			let str = this.Uint8ArrayToString(jiya);

			// 4. 解析 JSON 数据
			let jsonData = JSON.parse(str);

			// 5. 假设解压后的数据格式为 [{time: timestamp, value: dataValue}, ...]
			// 6. 转换为 Highcharts 支持的数据格式 [[timestamp, value], ...]
			let highchartsData = jsonData.map(item => {
				return [item.time, item.value]; // 假设每个数据项有 'time' 和 'value' 字段
			});

			return highchartsData;
		}


		// 获取传给后台的精度
		resolution(resolution) {
			let T = "";
			if (isNaN(resolution * 1)) {
				T = resolution
					.replace("D", "day")
					.replace("W", "week")
					.replace("M", "mon");
			} else {
				if (resolution > 60) {
					T = Math.floor(resolution / 60) + "hour";
				} else {
					T = resolution + "min";
				}
			}
			return T;
		}

		// 获取推送回调，适配为 Highcharts 数据更新机制
		subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) {
			this.onRealtimeCallback = onRealtimeCallback;

			if (!this.symbolName) {
				setTimeout(() => {
					// 在Highcharts中实现数据更新机制，这里模拟重新加载数据
					onResetCacheNeededCallback();
				}, 100);
			}

			// 假设我们通过某种方式获取到新的数据，比如通过API或WebSocket
			// 这个地方模拟新的数据推送
			const newData = [
				// 这里的数据是模拟的，格式为 [timestamp, value]
				[Date.now(), Math.random() * 100], // 时间戳和随机值
			];

			// 更新 Highcharts 图表的数据
			if (this.chart) {
				// 假设 chart 是 Highcharts 的实例
				this.chart.series[0].addPoint(newData[0], true, true); // 添加新数据点
			}

			// 使用 onRealtimeCallback 更新图表数据
			if (onRealtimeCallback) {
				onRealtimeCallback(newData);
			}
		}

		// 生成符号的名称，处理为小写
		getSymbol(name) {
			return name.split("/").join("").toLowerCase();
		}

		// 生成订阅消息的内容
		createMsg() {
			if (this.contract) {
				return `swapKline_${this.symbolName}_${this.resolution(this.interval)}`;
			} else {
				return `Kline_${this.getSymbol(this.symbolName)}_${this.resolution(this.interval)}`;
			}
		}

		// 解析时间粒度
		resolution(resolution) {
			let T = "";
			if (isNaN(resolution * 1)) {
				T = resolution.replace("D", "day").replace("W", "week").replace("M", "mon");
			} else {
				if (resolution > 60) {
					T = Math.floor(resolution / 60) + "hour";
				} else {
					T = resolution + "min";
				}
			}
			return T;
		}

		// 订阅消息，推送给 WebSocket
		sub() {
			console.log('订阅消息:', this.msg);
			this.Ws.send({
				cmd: "sub",
				msg: this.msg
			});
		}

		// 取消订阅
		unSub() {
			if (!this.msg) return;
			this.Ws.send({
				cmd: "unsub",
				msg: this.msg
			});
		}

	}
	new Page()
})