<template>
	<view>
		<view id="kline" :windowWidth="width" :change:windowWidth="KlineJs.setWidth" :windowHeight="height"
			:change:windowHeight="KlineJs.setHeight" :symbol="symbol"
			:change:symbol="KlineJs.setSymbol"></view>
	</view>
</template>

<script>
	import props from './props.js'
	export default {
		name: "kline",
		mixins: [props],
		data() {
			return {

			};
		},
		created() {

		}
	}
</script>

<script module="KlineJs" lang="renderjs">
	import {
		widget
	} from '@/static/charting_library/charting_library.js'
	import {
		chartConfig
	} from './tradingView/chartConfig.js'

	// 图表库实例化后储存的函数
	var widgetObj = null
	// 进入页面 默认展示的产品
	var index_market = 'btcusdt'
	// 进入页面 默认展示的产品周期
	var index_activeCycle = '1'

	export default {
		data() {
			return {
				chartHeight: 0,
				chartWidth: 0,
				chartSymbol:'btc'
			}
		},
		//该生命周期慢于不是renderjs的生命周期
		mounted() {
			//初始化图表
			this.initChart()
		},
		methods: {
			setSymbol(symbol){
				console.log(symbol)
				this.chartSymbol=symbol
			},
			setWidth(width) {
				console.log("可用窗口宽度:", width)
				this.chartWidth = width
			},
			setHeight(height) {
				console.log("可用窗口高度:", height)
				this.chartHeight = 300
			},
			initChart() {
				// chartConfig 在chartConfig.js里面
				// 给chartConfig添加展示周期
				chartConfig.interval = index_activeCycle
				chartConfig.intervals = ['1','5']
				// 给chartConfig添加展示产品
				chartConfig.symbol = this.symbol
				//设置图表宽高
				chartConfig.width = this.chartWidth
				chartConfig.height = this.chartHeight
				// 初始化 TradingView
				console.log(window.TradingView.version())
				const language = uni.getStorageSync("language")|| 'en_US';
				if(language.indexOf('zh')>-1){
					chartConfig.locale=language
				}else{
					chartConfig.locale=language.split('_')[0]
				}
				
				
				widgetObj = new widget(chartConfig)
				console.log(widgetObj)
				widgetObj.onChartReady(() => {
					// 这是k线图 展示的 7日均线和30日均线。
					widgetObj.chart().createStudy('Moving Average', false, false, [5], null, {
						'Plot.linewidth': 2,
						'Plot.color': '#2ba7d6'
					})
					
					this.$nextTick(() => {
						widgetObj.chart().resetData()
					})
				})
			},

		}
	}
</script>

