<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ symbol.pair }}</navigation>
		<!-- 价格百分比 -->

		<!-- #ifdef APP-PLUS -->
		<view class="header">
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<view class="headerH5">
				<!-- #endif -->

				<view class="top">
					<!-- 实时价格 -->
					<text class="price">{{parseFloat(marketDetail.close).toFixed(marketDetail.baseCoinScale)}}</text>
					<!-- 百分比,根据数据正负判断颜色 -->
					<text class="percent"
						:class="{ rise: marketDetail.percent>=0 }">{{marketDetail.percent>=0?'+'+marketDetail.percent:marketDetail.percent}}%</text>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="title">{{ i18n.Highest }}</view>
						<view class="value">{{marketDetail.high}}</view>
					</view>
					<view class="center">
						<view class="title">{{ i18n.Lowest }}</view>
						<view class="value">{{marketDetail.low}}</view>
					</view>
					<view class="right">
						<view class="title">{{ i18n.Amount }}</view>
						<view class="value">{{marketDetail.amount}}</view>
					</view>
				</view>
			</view>
			
			<kline v-if="showKline" :width="chartWidth" :height="chartHeight" :symbol="symbol.symbol" :lang="language"></kline>
			
			<!-- 买卖挂牌表 -->
			<view class="MarketTrades">
				<view class="headTitle"> {{ i18n.Markettrades }}</view>
				<view class="table">
					<view class="box">
						<view class="title">
							<view class="quantity">{{ i18n.Quantity }}</view>
							<view class="price">{{ i18n.BuyingPrice }}</view>
						</view>
						<view class="list">
							<view class="item" v-for="(item, index) in bboList.buy" :key="index">
								<text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
								<text class="num buy">{{ item.price }}</text>
								<view class="buybg" :style="`width: ${item.size/sum.buy*100 }%;`"></view>
							</view>
						</view>
					</view>
					<view class="box">
						<view class="title">
							<view class="quantity">{{ i18n.Quantity }}</view>
							<view class="price">{{ i18n.SellPrice }}</view>
						</view>
						<view class="list">
							<view class="item" v-for="(item, index) in bboList.sell" :key="index">
								<text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
								<text class="num sell">{{ item.price }}</text>
								<view class="sellbg" :style="`width: ${item.size/sum.sell*100 }%;`"></view>
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="btn">
				<!-- open按钮 -->
				<u-button class="button" color="#00E8A2" throttleTime="500" @click="btnClick('buy')">
					{{ i18n.LONG }}
				</u-button>
				<!-- close按钮 -->
				<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')">
					{{ i18n.SHORT }}
				</u-button>
			</view>

		</view>
</template>

<script>
	import kline from '@/components/kline/kline.vue'
	export default {
		name: "trade",
		components: {
			kline
		},
		data() {
			return {
				kdata: {},
				type: '1min',
				symbol: null,
				marketDetail: {
					close: 0,
					usdRate: 0
				},
				bboList: {},
				sum: {},
				//设备信息
				device: {},
				//是否是移动H5
				isH5APP: false,
				// 窗口高度
				windowHeight: 0,
				// 窗口宽度
				windowWidth: 0,
				showKline: false,
				// k线图宽度
				chartWidth: 0,
				// K线图高度
				chartHeight: 0,
				//菜单栏高度(单位PX)
				menuHeight: 0,
				language:'en'

			};
		},
		computed: {
			i18n() {
				return this.$t("markets");
			},
		},
		onLoad() {
			//this.kdata = this.splitData(ktest.JSON);
			// //console.log(this.kdata, 1111)
			
			//延时计算窗口
			
		},
		onShow() {
			this.into();

		},
		onHide() {
			this.websock.closeSocket();
		},
		onUnload() {
			this.websock.closeSocket();
			
		},

		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)
					}
				})
			},
			into() {
				this.symbol = uni.getStorageSync('symbol');
				setTimeout(() => {
					//计算窗口
					this.calcWindow()
				}, 200)
				if (!this.symbol) {
					// #ifdef H5
					history.back()
					// #endif

					// #ifdef APP-PLUS	
					uni.navigateBack()
					// #endif
				}
				const language = uni.getStorageSync("language")|| 'en_US';
				if(language.indexOf('zh')>-1){
					this.language=language
				}else{
					this.language=language.split('_')[0]
				}
				this.getMarketDetail();
				this.initWebSocket();
				this.getBboList()
			},
			statisticsSum() {
				this.sum.buy = 0
				this.sum.sell = 0

				for (var buy in this.bboList.buy) {
					if (buy >= 8) {
						break;
					}
					this.sum.buy += parseFloat(this.bboList.buy[buy].size)
				}
				for (var sell in this.bboList.sell) {
					if (sell >= 8) {
						break;
					}
					this.sum.sell += parseFloat(this.bboList.sell[sell].size)
				}

			},
			onChangeType(type) {
				this.websock.unSubKline(this.type, this.symbol.symbol);
				this.type = type
				this.websock.subKHistory(this.type, this.symbol.symbol);
				this.websock.subKline(this.type, this.symbol.symbol);
			},

			
			getBboList() {
				const bboList = this.$api.bboList({
					"symbol": this.symbol.symbol
				});
				bboList.then(res => {
						// //console.log(9999999, res)
						this.bboList = res
						this.statisticsSum();
					})
					.catch(e => {
						// //console.log(e)
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			},
			getMarketDetail() {
				const marketDetail = this.$api.marketDetail({
					"symbol": this.symbol.symbol
				});
				marketDetail.then(res => {
						this.marketDetail = res

					})
					.catch(e => {
						// //console.log(e)
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			},
			initWebSocket() {


				this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL


				var that = this
				this.websock.getWebSocketMsg(data => {

					if (data.channel === 'conn') {
						that.websockId = data.data
						that.websock.setId(data.data);
						that.websock.subBbo(that.symbol.symbol)
						that.websock.subDetail(that.symbol.symbol)
						// that.websock.subKHistory(that.type, that.symbol.symbol)
						// that.websock.subKline(that.type, that.symbol.symbol)

					} else if (data.channel === 'market.pairsgroup') {
						that.symbolList = data.data.USDT;
					} else if (data.channel === 'market.' + that.symbol.symbol + '.bbo') {
						that.bboList = data.data;
						that.statisticsSum();
					} else if (data.channel === 'market.' + that.symbol.symbol + '.trade') {
						that.tradeList = data.data;
					} else if (data.channel === 'market.' + that.symbol.symbol + '.detail') {
						that.marketDetail = data.data;
					} else if (data.channel === 'market.' + that.symbol.symbol + ".kline." + that.type) {
						if (data.event === 'req') {
							//that.kdata = that.splitData(data.data)
						} else {
							//that.upkline(data.data)
						}

					}
				});
			},

			
			
			goto(page) {
				let url = '';
				switch (page) {
					case 'kLine':
						url = '/pages/markets/kLine'
						break;
					default:
						break;
				}
				uni.navigateTo({
					url,
				});
			},
			btnClick(type) {
				uni.setStorageSync('orderType', type);
				// #ifdef H5
				history.back()
				// #endif

				// #ifdef APP-PLUS	
				uni.navigateBack()
				// #endif
			}

		},
	}
</script>


<style lang="scss" scoped>
	.main {

		.header {
			background: #000000;
			margin-top: 200rpx;
			padding: 0 32rpx;


			.top {
				height: 80rpx;
				border-bottom: 2rpx solid #A1A0A8;

				.price {
					line-height: 80rpx;
					font-size: 40rpx;
				}

				.percent {
					vertical-align: text-top;
					margin-left: 20rpx;
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					background-color: rgba($color: #F26666, $alpha: 0.2);
					color: #F26666;

					&.rise {
						color: #00E8A2;
						background-color: rgba($color: #00E8A2, $alpha: 0.2);
					}
				}
			}

			.bottom {
				display: flex;
				font-size: 24rpx;

				.title {
					margin-top: 24rpx;
					line-height: 32rpx;
				}

				.value {
					margin: 24rpx 0;
					color: #A1A0A8;
				}

				.left {
					flex: 1;
					text-align: left;
				}

				.center {
					flex: 1;
					text-align: center;
				}

				.right {
					flex: 1;
					text-align: right;
				}

			}
		}

		.headerH5 {
			background: #000000;
			margin-top: 122rpx;
			padding: 0 32rpx;

			.top {
				height: 80rpx;
				border-bottom: 2rpx solid #A1A0A8;
				margin-top: 30px;
				.price {
					line-height: 80rpx;
					font-size: 40rpx;
				}

				.percent {
					vertical-align: text-top;
					margin-left: 20rpx;
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					background-color: rgba($color: #F26666, $alpha: 0.2);
					color: #F26666;

					&.rise {
						color: #00E8A2;
						background-color: rgba($color: #00E8A2, $alpha: 0.2);
					}
				}
			}

			.bottom {
				display: flex;
				font-size: 24rpx;

				.title {
					margin-top: 24rpx;
					line-height: 32rpx;
				}

				.value {
					margin: 24rpx 0;
					color: #A1A0A8;
				}

				.left {
					flex: 1;
					text-align: left;
				}

				.center {
					flex: 1;
					text-align: center;
				}

				.right {
					flex: 1;
					text-align: right;
				}

			}
		}


		.tab {
			
			display: flex;
			background: #000000;

			.item {
				height: 64rpx;
				line-height: 64rpx;
				flex: 1;
				font-size: 24rpx;
				text-align: center;

				&.select {
					background: rgba(0, 232, 162, 0.3);
					border-radius: 19px;
				}
			}


		}

		.kline {

			background: #000000;
		}

		.MarketTrades {
			.headTitle {
				padding-left: 32rpx;
				font-size: 34rpx;
				height: 80rpx;
				line-height: 80rpx;
			}

			.table {
				display: flex;
				font-size: 24rpx;

				.box {
					padding-left: 32rpx;
					flex: 1;
					overflow: hidden;
					height: 450rpx;
					margin-bottom: 132rpx;

					.title {
						display: flex;
						margin-bottom: 16rpx;
						color: #A1A0A8;

						.quantity {
							flex: 1;
						}

						.price {
							flex: 1;
							text-align: center;
						}
					}

					.list {
						overflow: hidden;

						.item {
							position: relative;
							width: 100%;
							height: 50rpx;
							line-height: 50rpx;
							display: flex;

							.price {
								display: block;
								width: 50%;
								text-align: left;
								z-index: 1;

							}

							.num {
								display: block;
								width: 50%;
								text-align: right;
								padding-right: 32rpx;
								z-index: 1;

								&.buy {
									color: #00E8A2;
								}

								&.sell {
									color: #F4506A;
								}
							}

							.buybg {
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 0;
								background: rgba($color: #00E8A2, $alpha: 0.1)
							}

							.sellbg {
								height: 100%;
								position: absolute;
								top: 0;
								right: 0;
								z-index: 0;
								background: rgba($color: #F4506A, $alpha: 0.1)
							}

						}
					}
				}




			}
		}

		.btn {
			display: flex;
			z-index: 999;
			position: fixed;
			bottom: 16rpx;
			left: 2%;
			width: 96%;

			.button {
				flex: 1;
				box-sizing: border-box;
				height: 96rpx;
				border-radius: 16rpx;
				font-weight: 700;
				font-size: 28rpx;
				color: #15141F !important;

				&:nth-child(2) {
					margin-left: 14rpx;
				}
			}
		}

	}
</style>
