<template>

	<div>
		<div style='background-color:#101010;'>
			<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>
		</div>

		<!--   控制图1 !-->
		<div class="button-sp-area">
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0,0)">D</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0,1)">W</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0,4)">1M</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0,5)">15M</button>
		</div>


	</div>

</template>

<script>
	import pako from "pako"
	
	function unzip(text) {
		return pako.inflate(text, {
			to: 'string'
		});
	}

	export default {

		data() {
			let data = {
				Symbol: '600000.sh',
				ChartWidth: 350,
				ChartHeight: 500,
			};

			return data;
		},

		onLoad() {
			uni.connectSocket({
				url: 'wss://api.huobi.pro/ws'
			});
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开！');
				//pako.gzip(JSON.stringify({ "req": "topic to req", "id": "id generate by client" }))
				uni.sendSocketMessage({
					data: JSON.stringify({
					  "req": "market.btcusdt.kline.1min",
					  "id": "id10"
					})
				});
			});
			uni.onSocketError(function(res) {
				console.log('WebSocket连接打开失败，请检查！');
			});
			uni.onSocketMessage(function(res) {
				let data = JSON.parse(unzip(res.data));
				console.log(data);
				if(data.ping){
					//pako.gzip(JSON.stringify({"pong": data.ping}))
					uni.sendSocketMessage({
						data: JSON.stringify({"pong": data.ping})
					});
				}
			});
		},
		beforeDestroy() {
			uni.closeSocket();
			uni.onSocketClose(function(res) {
				console.log('WebSocket 已关闭！');
			});
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					var width = res.windowWidth;
					var height = res.windowHeight;
					this.ChartWidth = width;
					this.ChartHeight = height - 130;
					this.$nextTick(() => {
						this.CreateHQChart();
					})
				}
			});
		},

		onHide() {
			this.ClearHQChart();
		},

		onUnload() {
			this.ClearHQChart();
		},

		methods: {
			checkOpenSocket() {
				let self = this;
				uni.sendSocketMessage({
					data: 'ping',
					success: (res) => {
						return;
					},
					fail: (err) => { // 未连接打开websocket连接
						self.openConnection();
					}
				});
			},
			CreateHQChart() {
				var chartHeight = this.ChartHeight / 2;
				let hqchartCtrl = this.$refs.HQChartCtrl;
				hqchartCtrl.NetworkFilter = this.NetworkFilter;
				hqchartCtrl.SetSize(this.ChartWidth, chartHeight);
				hqchartCtrl.OnSize();
				hqchartCtrl.CreateHQChart();

			},

			ClearHQChart() {
				let hqchartCtrl = this.$refs.HQChartCtrl;
				if (hqchartCtrl) hqchartCtrl.ClearChart();
			},

			ChangeMinutePeriod(id, days) {
				let hqchartCtrl = this.$refs.HQChartCtrl;

				hqchartCtrl.ChangeMinutePeriod(days);
			},

			ChangeKLinePeriod(id, period) {
				let hqchartCtrl = this.$refs.HQChartCtrl;
				// https://blog.csdn.net/jones2000/article/details/90272733
				hqchartCtrl.ChangeKLinePeriod(period);
			},

			NetworkFilter(data, callback) {
				// https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/demo/ws_minute_demo.html
				console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}`);
				console.log("=====================================");
			},
		}
	}
</script>

<style>
</style>
