<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>
		<view class="tab">
			<view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min
			</view>
			<view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min
			</view>
			<view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min
			</view>
			<view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min
			</view>
			<view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min
			</view>
			<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day
			</view>
			<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week
			</view>
			<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon
			</view>
		</view>
		<!-- K线图 -->
		<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
			style="height:500rpx;width: 100%;position: relative;  padding: 0px; margin: 0px; border-width: 0px; cursor: default;">

		</view>
		<!-- 买卖挂牌表 -->
		<view class="MarketTrades">
			<view class="headTitle">Market trades</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.open }}
			</u-button>
			<!-- close按钮 -->
			<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')">
				{{ i18n.close }}
			</u-button>
		</view>

	</view>
</template>

<script>
	import ktest from '@/utils/ktest.js'
	export default {
		name: "trade",
		components: {
			ktest
		},
		data() {
			return {
				kdata: {},
				type: '1min',
				symbol: null,
				marketDetail: {
					close: 0,
					usdRate: 0
				},
				bboList: {},
				sum: {}

			};
		},
		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: {
			
			into() {
				this.symbol = uni.getStorageSync('symbol');
				if (!this.symbol) {
					// #ifdef H5
					history.back()
					// #endif

					// #ifdef APP-PLUS	
					uni.navigateBack()
					// #endif
				}
				this.getMarketDetail();
				this.initWebSocket();
				this.getBboList()
			},
			statisticsSum() {
				this.sum.buy = 0
				this.sum.sell = 0
				console.log(this.sum.buy);

				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);
			},

			formateDate(time) {
				// var date = new Date(parseInt(time * 1000));
				// var Y = date.getFullYear();
				// var M = '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				// var D = '-' + date.getDate();
				// var h = ' ' + date.getHours();
				// var m = ':' + date.getMinutes();
				// var s = ':' + date.getSeconds();
				// var time;
				// if (this.type.indexOf('min') > -1) {
				// 	time = Y + M + D + h + m;
				// } else if (this.type === '1day' || this.type === '1week') {
				// 	time = Y + M + D;
				// } else {
				// 	time = Y + M;
				// }

				// return time;
				var time;
				time=this.$index.formatyymmddhhmmss(parseInt(time * 1000))
				if (this.type === '1mon' ) {
					time =  time.split(' ')[0];
					time=time.substring(time.indexOf('/')+1,time.length)
				} else if (this.type === '1day' || this.type === '1week') {
					time =  time.split(' ')[0];
				}
				return time;
			},
			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)
						}

					}
				});
			},
			
			upkline(data) {

				if (data.id === this.kdata.values[this.kdata.values.length - 1][5]) {
					this.kdata.values.pop();
					this.kdata.volumes.pop();
					this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]);
					this.kdata.volumes.push([this.kdata.volumes.length, data.high, data.open > data.close ? 1 : -1])
				} else {
					this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]);
					this.kdata.volumes.push([this.kdata.volumes.length, this.kdata.volumes.length, data.high, data.open >
						data.close ? 1 : -1
					])
					this.kdata.categoryData.push(this.formateDate(data.kTime));
				}
			},
			splitData(rawData) {
				let categoryData = [];
				let values = [];
				let volumes = [];
				for (let i = 0; i < rawData.length; i++) {
					var ldata = rawData[i];
					categoryData.push(this.formateDate(ldata.kTime));

					values.push([ldata.open, ldata.close, ldata.low, ldata.high, ldata.kTime, ldata.id]);
					volumes.push([i, ldata.high, ldata.open > ldata.close ? 1 : -1]);
				}
				return {
					categoryData: categoryData,
					values: values,
					volumes: volumes,
					webSocketChannel: 'market.' + this.symbol.symbol + ".kline." + this.type
				};


			},
			depthChange(e) {
				console.log(e);
			},
			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>
<script module="klineE" lang="renderjs">
	let kline
	export default {
		mounted() {

			if (typeof window.echarts === 'function') {
				//this.initEcharts()
			} else {
				// // 动态引入较大类库避免影响页面展示
				// const script = document.createElement('script');
				// //this.kdata=this.splitData(this.kdata);
				// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				// script.src = './static/echarts.js';
				// script.onload = this.initEcharts.bind(this);
				// document.head.appendChild(script);
			}
		},

		methods: {
			receive(newValue, oldValue, ownerVm, vm) {

				if (this.channel != newValue.webSocketChannel) {
					this.is = false
				}
				this.channel = newValue.webSocketChannel

				const script = document.createElement('script');
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = './static/echarts.js';
				script.onload = this.upData.bind(this);
				document.head.appendChild(script);


			},

			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.values.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data.values[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(3));
				}
				return result;
			},
			upData(myChart) {
				const upColor = '#00C873';
				const downColor = '#FF3750';
				var chartDom = document.getElementById('kline');
				if (!this.is) {
					console.log("this.is11111111", this.is)
					this.myChart = echarts.init(chartDom);
				}

				this.is = true;
				var option;
				this.myChart.setOption(
					(option = {

						tooltip: {
							trigger: 'axis',
							axisPointer: {
								animation: false,
								type: 'cross',
								lineStyle: {
									width: 1,
									opacity: 3
								}
							}
						},
						xAxis: [{
								type: 'category',
								data: this.kdata.categoryData,
								boundaryGap: false,
								axisLine: {
									show: false,
									onZero: false
								},

								axisTick: {
									show: false
								},
								splitLine: {
									show: false
								},
								min: 'dataMin',
								max: 'dataMax',
								axisPointer: {
									z: 100
								}
							},
							{
								type: 'category',
								gridIndex: 1,
								data: this.kdata.categoryData,
								boundaryGap: false,
								axisLine: {
									onZero: false
								},
								axisTick: {
									show: false
								},
								splitLine: {
									show: false
								},
								axisLabel: {
									show: false
								},
								min: 'dataMin',
								max: 'dataMax'
							}
						],
						yAxis: [{
								position: 'right',
								scale: true,

								axisLine: {

									show: false
								},
								axisTick: {
									show: true
								},
								splitArea: {
									show: false, // areaStyle: {
									// 	color: 'transparency',
									// },
								},
								splitLine: {
									show: true,
									lineStyle: {
										// 使用深浅的间隔色
										color: ['#211F32']
									}
								}
							},
							{
								scale: true,
								gridIndex: 1,
								splitNumber: 2,
								axisLabel: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								splitLine: {
									show: false
								}
							}
						],


						visualMap: {
							show: false,
							seriesIndex: 5,
							dimension: 2,
							pieces: [{
									value: 1,
									color: downColor
								},
								{
									value: -1,
									color: upColor
								}
							]
						},
						grid: [{
								top: '8%',
								left: '10rpx',
								right: '50rpx',
								height: '60%',

								backgroundColor: 'transparent',
							},
							{
								left: '10rpx',
								right: '50rpx',
								top: '80%',
								height: '16%'
							}
						],

						dataZoom: [{
								type: 'inside',
								start: 98,
								end: 100
							},
							{
								show: false,
								xAxisIndex: [0, 1],
								type: 'slider',
								top: '85%',
								start: 98,
								end: 100
							}
						],
						series: [{

								type: 'candlestick',
								data: this.kdata.values,
								itemStyle: {
									color: upColor,
									color0: downColor,
									borderColor: undefined,
									borderColor0: undefined
								},
								markLine: {
									symbol: ['none', 'none'],
									data: [


										{
											name: 'max line on close',
											type: 'max',
											valueDim: 'highest'
										}
									]
								},

								tooltip: {
									formatter: function(param) {
										param = param[0];
										return [
											'Date: ' + param.name +
											'<hr size=1 style="margin: 3px 0">',
											'Open: ' + param.data[0] + '<br/>',
											'Close: ' + param.data[1] + '<br/>',
											'Lowest: ' + param.data[2] + '<br/>',
											'Highest: ' + param.data[3] + '<br/>'
										].join('');
									}
								}
							},
							{
								name: 'MA5',
								type: 'line',
								showSymbol: false,
								data: this.calculateMA(5, this.kdata),
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
							{
								name: 'MA10',
								type: 'line',
								showSymbol: false,
								data: this.calculateMA(10, this.kdata),
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
							{
								name: 'MA20',
								type: 'line',
								showSymbol: false,
								data: this.calculateMA(20, this.kdata),
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
							{
								name: 'MA30',
								type: 'line',
								showSymbol: false,
								data: this.calculateMA(30, this.kdata),
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},

							{
								name: 'Volume',
								type: 'bar',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: this.kdata.volumes,
								itemStyle: {
									color: upColor,
									borderColor: undefined,
								},
							}

						]
					}),
					true
				);

			}
		},
		watch: {
			// 如果 `question` 发生改变，这个函数就会运行
			columData: function(newQuestion, oldQuestion) {

				// this.updateEcharts(this.option)
			}
		},
	}
</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;
		
				.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;

					.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;
			margin: 96rpx 32rpx;

			.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>
