<template>

	<!--  #ifdef  H5 -->
	<div class='kline' v-bind:id='KLineID' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}"
		ref='kline'></div>
	<!--  #endif -->

	<!--  #ifndef  H5 -->

	<canvas v-bind:id='KLineID' v-bind:canvas-id='KLineID' class='kline2'
		v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" @touchstart="KLineTouchStart"
		@touchmove='KLineTouchMove' @touchend='KLineTouchEnd'></canvas>

	<!--  #endif -->

</template>

<script>
	// #ifdef H5
	import HQChart from '@/uni_modules/jones-hqchart2/js_sdk/umychart.uniapp.h5.js'
	// 禁用 Log
	HQChart.JSConsole.Chart.Log = () => {}
	HQChart.JSConsole.Complier.Log = () => {}
	// #endif

	// #ifndef H5
	import {
		JSCommon
	} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.wechat.3.0.js'
	import {
		JSCommonHQStyle
	} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.style.wechat.js'
	import {
		JSConsole
	} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.console.wechat.js'

	//禁用日志
	JSConsole.Complier.Log = () => {};
	JSConsole.Chart.Log = () => {};
	// #endif

	function DefaultData() {}

	DefaultData.GetKLineOption = function() {
		let data = {
			Type: '历史K线图',

			Windows: //窗口指标
				[{
						Index: "MA",
						Modify: false,
						Change: false
					},
					{
						Index: "VOL",
						Modify: false,
						Change: false
					}
					/*
            { 
				Index:'多线段指标',Modify: false, Change: false,
				API: 
				{
					Name:'多线段指标',
					Script:null,
					Args:null, 
					Url:'http://127.0.0.1:18080/api/jsindex' 
				} 
			}
			*/
				],

			IsCorssOnlyDrawKLine: true,
			CorssCursorTouchEnd: true,
			IsClickShowCorssCursor: true,
			CorssCursorInfo: {
				Left: 2,
				Right: 2,
				Bottom: 1,
				IsShowCorss: true
			}, //十字光标刻度设置
			//IsFullDraw:true,

			Border: //边框
			{
				Left: 1,
				Right: 1, //右边间距
				Top: 25,
				Bottom: 25,
			},

			KLine: {
				DragMode: 1,
				Right: 1, //复权 0 不复权 1 前复权 2 后复权
				Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线 
				PageSize: 30,
				IsShowTooltip: false,
				DrawType: 0,
				DataWidth: 10
			},
			// KLineTitle: //标题设置
			// {
			// 	IsShowName: false, //不显示股票名称
			// 	IsShowSettingInfo: false //不显示周期/复权
			// },
			ExtendChart: [{
					Name: 'KLineTooltip'
				}, //开启手机端tooltip
			],

			Frame: //子框架设置
				[{
						SplitCount: 3,
						Custom: [{
							Type: 0,
							Position: 'right'
						}]
					},
					{
						SplitCount: 2
					},
					{
						SplitCount: 3
					},
				],

		};

		return data;
	}

	DefaultData.CreateGuid = function() {
		function S4() {
			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
		}

		return "guid" + (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
	}

	var g_JSChart = new Map();

	export default {
		name: "HQChartControl",

		props: [
			'DefaultSymbol'
		],


		data() {
			let data = {
				Symbol: '600000.sh',
				ChartWidth: 350,
				ChartHeight: 500,
				KLineID: "HQChart_" + DefaultData.CreateGuid(),

				KLine: {
					Option: DefaultData.GetKLineOption(),
				},

				ChartType: "KLine",
			};

			return data;
		},

		created() {
			if (this.DefaultSymbol) this.Symbol = this.DefaultSymbol; //默认股票
			this.ChartType = "KLine";
		},

		methods: {
			SetSize(width, height) {
				this.ChartWidth = width;
				this.ChartHeight = height;
			},

			GetJSChart() {
				if (g_JSChart.has(this.KLineID)) return g_JSChart.get(this.KLineID);

				return null;
			},

			SetJSChart(jsChart) {
				g_JSChart.set(this.KLineID, jsChart)
			},

			ClearChart() {
				var jsChart = this.GetJSChart();
				if (jsChart) {
					jsChart.ChartDestory();
					this.SetJSChart(null);
				}

				// #ifdef H5
				var divKLine = document.getElementById(this.KLineID);
				while (divKLine.hasChildNodes()) {
					divKLine.removeChild(divKLine.lastChild);
				}
				// #endif
			},

			OnSize() {
				// #ifdef H5
				this.OnSize_h5();
				// #endif
			},

			OnSize_h5() {
				var chartHeight = this.ChartHeight;
				var chartWidth = this.ChartWidth;

				var kline = this.$refs.kline;
				kline.style.width = chartWidth + 'px';
				kline.style.height = chartHeight + 'px';

				var jsChart = this.GetJSChart();
				if (jsChart) jsChart.OnSize();
			},

			CreateHQChart() {
				this.CreateKLineChart();
			},

			CreateKLineChart_h5() //创建K线图
			{
				this.ClearChart();

				var blackStyle = HQChart.HQChartStyle.GetStyleConfig(HQChart.STYLE_TYPE_ID.BLACK_ID);
				HQChart.JSChart.SetStyle(blackStyle);
				//this.$refs.kline.style.backgroundColor=blackStyle.BGColor;	//div背景色设置黑色

				var chart = HQChart.JSChart.Init(this.$refs.kline);

				this.KLine.Option.Symbol = this.Symbol;
				this.KLine.Option.NetworkFilter = this.NetworkFilter;

				chart.SetOption(this.KLine.Option);

				this.SetJSChart(chart);
			},

			CreateKLineChart_app() {
				this.ClearChart();

				var element = new JSCommon.JSCanvasElement();
				// #ifdef APP-PLUS
				element.IsUniApp = true; //canvas需要指定下 是uniapp的app
				// #endif
				element.ID = this.KLineID;
				element.Height = this.ChartHeight; //高度宽度需要手动绑定!!
				element.Width = this.ChartWidth;

				var blackStyle = JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);

				JSCommon.JSChart.SetStyle(blackStyle);

				var chart = JSCommon.JSChart.Init(element);
				this.KLine.Option.NetworkFilter = this.NetworkFilter;
				this.KLine.Option.Symbol = this.Symbol;
				this.KLine.Option.IsClickShowCorssCursor = true;
				this.KLine.Option.IsFullDraw = true; //每次手势移动全屏重绘
				chart.SetOption(this.KLine.Option);

				this.SetJSChart(chart);
			},

			CreateKLineChart() {
				this.ChartType = "KLine";

				// #ifdef H5
				this.CreateKLineChart_h5();
				// #endif

				// #ifndef H5
				this.CreateKLineChart_app();
				// #endif
			},
			IsKLineChart() {
				var jsChart = this.GetJSChart();
				if (!jsChart) return false;
				var className = jsChart.JSChartContainer.ClassName;
				if (className == "KLineChartContainer" || className == "KLineChartHScreenContainer") return true;

				return false;
			},

			//K线周期切换
			ChangeKLinePeriod(period) {
				var jsChart = this.GetJSChart();
				this.KLine.Option.KLine.Period = period;
				if (this.IsKLineChart() && jsChart) {
					jsChart.ChangePeriod(period);
				} else {
					this.CreateKLineChart();
				}
			},

			//切换指标 windowId=窗口索引 name=指标名字
			ChangeKLineIndex(windowId, name) {
				var jsChart = this.GetJSChart();
				if (this.IsKLineChart() && jsChart) jsChart.ChangeIndex(windowId, name);
			},

			//切换股票
			ChangeSymbol(symbol) {
				this.Symbol = symbol;
				var jsChart = this.GetJSChart();
				if (jsChart) jsChart.ChangeSymbol(symbol);
			},

			///////////////////////////////////////////////
			//手势事件 app/小程序才有
			//KLine事件
			KLineTouchStart(event) {
				var jsChart = this.GetJSChart();
				if (jsChart) jsChart.OnTouchStart(event);
			},

			KLineTouchMove(event) {
				var jsChart = this.GetJSChart();
				if (jsChart) jsChart.OnTouchMove(event);
			},

			KLineTouchEnd(event) {
				var jsChart = this.GetJSChart();
				if (jsChart) jsChart.OnTouchEnd(event);
			},

			/////////////////////////////////////////////////////////////////////////////////////////
			NetworkFilter(data, callback) {
				console.log(`[HQChartTemplate:NetworkFilter] Name=${data.Name} Explain=${data.Explain}`);
			},

		},

	}
</script>

<style>
</style>
