<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ 'BTC/USDT' }}</navigation>
		<!-- 价格百分比 -->
		<view class="header">
			<view class="top">
				<!-- 实时价格 -->
				<text class="price">34985.93</text>
				<!-- 百分比,根据数据正负判断颜色 -->
				<text class="percent" :class="{ rise: false }">-15.30%</text>
			</view>
			<view class="bottom">
				<view class="left">
					<view class="title">{{ i18n.Highest }}</view>
					<view class="value">45930.24</view>
				</view>
				<view class="center">
					<view class="title">{{ i18n.Lowest }}</view>
					<view class="value">45930.24</view>
				</view>
				<view class="right">
					<view class="title">{{ i18n.Amount }}</view>
					<view class="value">28394893.30943094</view>
				</view>
			</view>
		</view>
		<view class="tab">
		    <view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">1M
		    </view>
		    <view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">30M
		    </view>
		    <view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">60M
		    </view>
		    <view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">1D
			</view>
			<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">30D
		    </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 buyList" :key="index">
							<text class="price">0.87897874</text>
							<text class="num buy">{{ item }}</text>
							<view class="buybg" :style="`width: ${20 * index}%;`"></view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="title">
						<view class="quantity">{{ i18n.Quantity }}</view>
						<view class="price">{{ i18n.SellPrice20 }}</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item, index) in sellList" :key="index">
							<text class="price">0.87897874</text>
							<text class="num sell">{{ item }}</text>
							<view class="sellbg" :style="`width: ${20 * index}%;`"></view>
						</view>
					</view>

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

		<view class="btn">
			<!-- open按钮 -->
			<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
				{{ i18n.open }}
			</u-button>
			<!-- close按钮 -->
			<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
				{{ i18n.close }}
			</u-button>
		</view>

	</view>
</template>

<script>
	import ktest from '@/utils/ktest.js'
	export default {
		name: "trade",
		components: {
			ktest
		},
		data() {
			return {
				buyList: 7,
				sellList: 9,
				kdata: [],
				type:1

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

			},
			splitData(rawData) {
				let categoryData = [];
				let values = [];
				let volumes = [];
				for (let i = 0; i < rawData.length; i++) {
					categoryData.push(rawData[i].splice(0, 1)[0]);
					values.push(rawData[i]);
					volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
				}
				return {
					categoryData: categoryData,
					values: values,
					volumes: volumes
				};
			},
			depthChange(e) {
				console.log(e);
			},
			goto(page) {
				let url = '';
				switch (page) {
					case 'kLine':
						url = '/pages/markets/kLine'
						break;
					default:
						break;
				}
				uni.navigateTo({
					url,
				});
			},
			openBtnClick(){
				// let categoryData = [];
				// 				let values = [];
				// 				let volumes = [];
				// this.kdata.values.pop();
				// this.kdata.volumes.pop();
				this.kdata.values.push([17827.33+Math.floor(Math.random()*100),
				 17829.73+Math.floor(Math.random()*100), 
				 17799.8+Math.floor(Math.random()*100), 
				 17877.84+Math.floor(Math.random()*100)	, 85130000+Math.floor(Math.random()*100)])
				this.kdata.volumes.push([3140,1688777777,1])
				this.kdata.categoryData.push('2016-06-22')
			}

		},
	}
</script>
<script module="klineE" lang="renderjs">
	let kline
	export default {
		mounted() {
			console.log('1111', this.kdata.categoryData);
			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) {
				
				console.log('newValue', newValue)
				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){
					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: [{
							    
								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: 1,
							dimension: 2,
							pieces: [{
									value: 1,
									color: downColor
								},
								{
									value: -1,
									color: upColor
								}
							]
						},
						grid: [{
							top: '8%',
								left: '50rpx',
								right: '10rpx',
								height: '60%',
								backgroundColor: 'transparent',
							},
							{
								left: '0%',
								right: '0%',
								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: [{
								name: 'Dow-Jones index',
								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: 'close'
								          }
								        ]
								      },
								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: '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;
				}

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