<template>
	<view class="app">
		<!-- K线 -->
		<kline v-if="showKline" :width="chartWidth" :height="chartHeight"></kline>
	</view>
</template>

<script>
	import kline from '../../components/kline/kline.vue'

	export default {
		components: {
			kline
		},
		data() {
			return {
				//设备信息
				device: {},
				//是否是移动H5
				isH5APP: false,
				// 窗口高度
				windowHeight: 0,
				// 窗口宽度
				windowWidth: 0,
				showKline: false,
				// k线图宽度
				chartWidth: 0,
				// K线图高度
				chartHeight: 0,
				//菜单栏高度(单位PX)
				menuHeight: 0,
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			//页面进入开启横屏
			this.confirmPrimary()
			// #endif
			//延时计算窗口
			setTimeout(() => {
				//计算窗口
				this.calcWindow()
			}, 200)
		},
		onUnload() {
			// #ifdef APP-PLUS
			//页面退出开启竖屏
			this.cancelPrimary()
			// #endif
		},
		methods: {
			//计算窗口布局
			calcWindow() {
				//获取窗口宽高
				this.windowWidth = uni.getSystemInfoSync().windowWidth
				this.windowHeight = uni.getSystemInfoSync().windowHeight
				//计算K线图宽高
				this.device = uni.getDeviceInfo()

				let dType = this.device.deviceType
				//如果是PC pad 未知设备 则将高设为K线宽
				if (dType == 'pc' || dType == 'pad' || dType == 'unknow') {
					this.chartWidth = this.windowWidth
					this.chartHeight = this.windowHeight - this.menuHeight
				} else {
					//否则如果是APP因为已经旋转屏幕所以正常
					this.chartWidth = this.windowWidth
					this.chartHeight = this.windowHeight - this.menuHeight
				}
				//计算完成 显示K线图
				this.showKline = true
			},
			// 调整为横屏
			confirmPrimary() {
				plus.screen.lockOrientation('landscape-primary')
				plus.navigator.setFullscreen(true);
			},
			// //取消横屏（调整为竖屏）
			cancelPrimary() {
				plus.screen.lockOrientation('portrait-primary') 
				plus.navigator.setFullscreen(false);
			},
			toPage(url) {
				uni.navigateTo({
					url,
					fail(err) {
						console.log(err)
					}
				})
			},
		}
	};
</script>


<style lang="scss">
	body,
	page {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.app {
		width: 100%;
		height: 100%;

	}
</style>
