<template>
	<view class="">
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<!-- 顶部标题 -->
			<view slot="top" class="width-100b flex align-center justify-between padding-w-30 bj-102030"
				:style="{height: `calc(${statusBar}px + 100rpx)`,paddingTop:`${statusBar}px`}">
				<view class="flex align-center">
					<i @click="router.goBack()" class="cuIcon-back font-40 margin-r-20 color-white"></i>
					<view @click="leftshow = true" class="width-360 flex align-center">
						<image class="width-40 height-40" src="/static/imgs/transaction/left6@2x.png" mode=""></image>
						<text class="font-36 numbold-font margin-w-15 color-white">{{coinInfo.show_name}}</text>
					</view>
				</view>
			</view>
			
		<view class="relative">
				<view class="height-140 bj-102030 padding-w-32 flex align-center justify-between">
					<view class="height-100 flex direction-column align-start justify-between">
						<text :class="zhangdie>=0?'color-12B886':'color-E27046'" class="font-50 numbold-font">{{Number(lastData.close||0).toFixed(coinInfo.price_jd)}}</text>
						<text :class="zhangdie>=0?'color-12B886':'color-E27046'" class="font-32 nummedium-font">{{zhangdie}}%</text>
					</view>
					<view class="height-90 flex direction-column align-start justify-between">
						<text class="font-26 color-F2F5FF">{{i18n.line.highprice}} {{Number(dayData.high).toFixed(coinInfo.price_jd)||0}}</text>
						<text class="font-26 color-F2F5FF">{{i18n.line.lowprice}} {{Number(dayData.low).toFixed(coinInfo.price_jd)||0}}</text>
					</view>
				</view>
			
				<view style="width: 750rpx; display: block;height: 816rpx; margin-top: 8rpx;">
					<!-- K线 -->
					<iframe style="width: 750rpx;height: 816rpx;overflow: hidden" :src="Ksrc"
						frameborder="0"></iframe>
				</view>
				<!-- 秒合约交易tab选择 -->
				<view class="width-100b bj-102030 height-72 padding-w-40 flex align-center justify-between">
					<view @click="tabsChange2(index)" class="flex-1 height-46 flex direction-column align-center justify-between" v-for="(item,index) in tablist2" :key="index">
						<text :class="current2==index?'bold-font color-1881D2':'color-9FBEDC medium-font'" class="font-28">{{item}}</text>
						<view :style="current2==index?'':'visibility: hidden;'" class="heng"></view>
					</view>
				</view>
		</view>
		
		<!-- 秒合约交易列表 -->
		<swiper :class="contractOrderList_s.length>2?'swiper':'swiper_no'" :current="current2" @animationfinish="animationfinish2"
			@change="onswiperchange2">
			<swiper-item v-for="(item,index) in tablist2" class="swiper-item" style="height: 100%;">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh_s">
					<secondListItem @timeOut="timeOut" :currentIndex="current2" :loading="loading_s"
					 :list="contractOrderList_s" :nowPrice="lastData.close"></secondListItem>
					<view class="height-140">
						
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		</z-paging>
		
		<view class="height-140 fixed width-100b bj-102030 flex align-center justify-between padding-w-32" style="bottom: 0px;">
			<view @click="riseTimeType=true" class="flex-1 height-100 flex align-center justify-between radiu-8 margin-r-8" style="border: 1px solid #0B1622;">
				<view class="flex-1 flex direction-column align-center justify-center">
					<text class="font-24 color-F2F5FF">{{i18n.cycle.num}}</text>
					<text class="font-24 color-F2F5FF">{{riseNumber}}</text>
				</view>
				<view class="flex-1 flex direction-column align-center justify-center">
					<text class="font-24 color-F2F5FF">{{i18n.fastBuy.text12}}</text>
					<text class="font-24 color-F2F5FF">{{riseTime}}s</text>
				</view>
				<view class="flex-1 flex direction-column align-center justify-center">
					<text class="font-24 color-F2F5FF">{{i18n.cycle.rate}}</text>
					<text class="font-24 color-F2F5FF">{{Number(coinInfo.winpl*100).toFixed(2)}} %</text>
				</view>
				<i class="cuIcon-unfold font-28 color-1881D2"></i>
			</view>
			<view class="flex align-center justify-end">
				<view @click="buyRise('rise')" class="width-164 height-100 bj-12B886 radiu-8 margin-r-8 text-center line-height-100">
					<text class="font-36 color-white">{{i18n.cycle.up}}</text>
				</view>
				<view @click="buyRise('fall')" class="width-164 height-100 bj-E27046 radiu-8 text-center line-height-100">
					<text class="font-36 color-white">{{i18n.cycle.down}}</text>
				</view>
			</view>
		</view>
		
		<!-- 左侧弹出 -->
		<u-popup v-model="leftshow" mode="left">
			<view class="width-600 bj-102030" style="padding: 70rpx 0rpx;height:100%;display: flex;flex-direction: column;">
				<view class="height-110 flex align-center padding-w-30">
					<text class="font-32 bold-font color-white">{{i18n.newWord.Trading}}</text>
				</view>
				<scroll-view scroll-y="true" style="overflow: scroll;flex: 1;">
					<view class="padding-w-30">
						<view @click="changeCoin(index,1)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in midList" :key="index" style="border-bottom: 1rpx solid #2C364B;">
							<view class="flex align-center">
									<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
								<text class="font-28 nummedium-font color-white">{{item.name}}<span class="font-26 color-F2F5FF nummedium-font">/USDT</span></text>
							</view>
							<text class="font-28 nummedium-font color-white">
							{{coinInfo.name==item.name&&lastData.close? (Number(lastData.close||0).toFixed(item.price_jd)) : Number(item.close).toFixed(item.price_jd)}}</text>
							<text v-if="coinInfo.name==item.name&&lastData.close"  class="font-28 nummedium-font"
								:class="zhangdie>=0?'color-12B886':'color-E27046'">{{zhangdie}}%</text>
							<text v-else  class="font-28 nummedium-font"
								:class="item.increase>0?'color-12B886':'color-E27046'">{{Number(item.increase*100).toFixed(2)}}%</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 实名认证弹窗 -->
		<u-popup style="z-index: 10100;" border-radius="4" mode="center" v-model="TSShow">
		   <view class="width-600 padding-b-20 bj-102030">
				<view class="width-100b height-220 padding-w-30 padding-c-40 flex direction-column align-center justify-between">
					<image class="width-64 height-64" src="/static/imgs/quantify/tongzhi@2x.png" mode=""></image>
					<view class="font-28 bold-font text-center padding-w-20 color-white">{{shimingTitle}}</view>
				</view>
				<view class="width-100b height-90 flex align-center justify-center">
					<view @click="router.push('/pages/my/safety/real')" class="qcbtn3">{{i18n.cycle.shiming}}</view>
				</view>
		   </view>
		</u-popup>
		
		<u-popup style="z-index: 999;" mode="bottom" v-model="riseTimeType">
		   <view class="padding-w-30" style="background-color: #202833;">
			   <view class="height-70 line-height-70">
					<text class="font-28 color-F2F5FF">{{i18n.cycle.moshi}}</text>
			   </view>
			   <view class="height-79 flex align-center">
					<view class="xuanzhebox">
						<text>USDT</text>
						<image class="width-60 height-60 absolute" style="right: 0rpx;" src="/static/imgs/new/gou1.png" mode=""></image>
					</view>
			   </view>
			   <view class="height-70 line-height-70">
			   		<text class="font-28 color-F2F5FF">{{i18n.cycle.open}}</text>
			   </view>
			   <view class="flex flex-wrap">
			   		<view @click="riseNumber=item" class="xuanzhebox margin-c-8 margin-r-10" v-for="(item,index) in numlist" :key="index">
			   			<text>{{item}}</text>
						<image v-if="riseNumber==item" class="width-60 height-60 absolute" style="right: 0rpx;" src="/static/imgs/new/gou1.png" mode=""></image>
			   		</view>
			   </view>
			   <view class="">
				   <input class="xuanzhebox padding-w-20" style="width: 338rpx;" type="number" v-model="riseNumber" :placeholder="i18n.cycle.openInput"/>
			   </view>
			   <view class="height-70 line-height-70">
			   		<text class="font-28 color-F2F5FF">{{i18n.cycle.time}}</text>
			   </view>
			   <view class="flex flex-wrap">
			   		<view @click="riseTime=item" class="xuanzhebox margin-c-8 margin-r-10" v-for="(item,index) in coinInfo.trade_time" :key="index">
			   			<text>{{item}} s</text>
						<image v-if="riseTime==item" class="width-60 height-60 absolute" style="right: 0rpx;" src="/static/imgs/new/gou1.png" mode=""></image>
			   		</view>
			   </view>
			   
			   <view class="height-80 flex align-center justify-between">
					<text class="font-28 nummedium-font color-F2F5FF">{{i18n.cycle.available}} ：<span class="color-12B886">{{Number(count_xh_usdt||0).toFixed(4)}} USDT</span></text>
					<text class="font-28 nummedium-font color-F2F5FF">{{i18n.cycle.rate}} ：<span class="color-12B886">{{Number(coinInfo.winpl*100).toFixed(2)}} %</span></text>
			   </view>
			   
			   <view class="height-140 flex align-center justify-between">
					<view @click="buyRise('rise')" class="loginBtn bj-12B886">
						<text class="font-36 color-white">{{i18n.cycle.up}}</text>
					</view>
					<view @click="buyRise('fall')" class="loginBtn bj-E27046">
						<text class="font-36 color-white">{{i18n.cycle.down}}</text>
					</view>
			   </view>	
		   </view>
		</u-popup>
		
	</view>
</template>

<script>
	import secondListItem from './components/second_list_item.vue'
	export default {
		components: {
			secondListItem,
		},
		data() {
			return {
				count_xh_usdt:0, //合约可用剩余usdt
				second_usdt:0, //秒合约可用剩余usdt
				midList:[], //左侧币种列表
				coinInfo:{}, //选中的当前币种信息
								
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				topTab:2,//顶部选项 1=合约交易  2=秒合约
				leftshow:false, //左侧弹窗开关
				
				// 秒合约
				tablist2:['交易中','已平仓'],
				current2:0,
				
				riseNumber:100, //开仓数量
				riseTime: 0, //开仓时间
				riseTimeType:false, //开仓时间弹窗开关
				numlist:['100','200','300','500','1000','2000'],
				contractOrderList_s:[], //秒合约交易订单列表
				state_s:'more',
				page_s:1,
				loading_s:true,
				
				BtnFlag:true, //按钮防重复点击
				TSShow:false,
				shimingTitle:'请先完成实名认证',
				
				// socket
				lastData:'',
				tick:"",
				
				myCoinList:[],
				Ksrc: '',
				dayData: {
					high:0,
					low:0
				},
				timer:null
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			zhangdie() {
				if (this.lastData.close) {
					let increase = Number(this.lastData.close) - Number(this.coinInfo.open)
					return Number(increase / Number(this.coinInfo.open) * 100).toFixed(2)
				} else {
					return 0
				}
			},
		},
		watch:{
			current2(oldValue,newValue){
				if(oldValue != newValue){
					this.refresh_list()
				}
			},
			leftshow(item){
				if(item==false){
					
				}else{
					this.getMore(this.coinInfo.symbol)
				}
			}
		},
		filters:{
			//过滤数字位数
			numFilter(item){
				if (item == undefined || item == null) {
					return 0;
				} else {
					if(Number(item) < 10){
						return Number(item).toFixed(6);
					}else if (Number(item) >= 10 && Number(item) < 1000) {
						return Number(item).toFixed(4);
					} else if (Number(item) >= 1000 && Number(item) < 1000000) {
						return (Number(item) / 1000).toFixed(4) + ' K';
					} else if (Number(item) >= 1000000 && Number(item) < 10000000000) {
						return (Number(item) / 1000000).toFixed(2) + ' M';
					} else {
						return (Number(item) / 10000000000).toFixed(2) + ' B';
					}
				}
			},
		},
		onLoad:function(){
			this.getMore()
		},
		onShow() {
			if(getApp().globalData.symbol == ''){
				getApp().globalData.symbol = this.coinInfo.symbol
				console.log(getApp().globalData.symbol )
			}
			this.onSocketMessage()
			this.linkSocket()  //链接socket订阅
			this.tablist2 = this.i18n.cycle.tablist2
			
			this.TSShow = false
			this.getWallet()
			uni.$on('reConnect', (res) => {
				console.log("重连WebSocket")
				this.onSocketMessage()
			})
		},
		onUnload :function(){
			clearTimeout(this.timer)
			getApp().globalData.symbol = ""
			uni.$off('reConnect')
			this.cancelSocket()  //取消socket订阅
		},
		methods: {
			onRefresh() {
				console.log('下拉刷新');
				if(this.topTab==2){
					this.getMore(this.coinInfo.symbol)
				}
				this.getWallet()
				setTimeout(()=>{
					this.$refs.paging.complete();
				}, 1500);
			},
			getWallet(){
				this.post('/wallet/wallet_index').then((res) => {
					// console.log('我的资产',res)
					if (res.code == 1) {
						this.count_xh_usdt = res.data.all.usdt_num
					}
				})
			},
			getDay(){
				this.post('/market/get_day_kline', {
					symbol: this.coinInfo.symbol
				}).then(res => {
					console.log('获取一天最高最低',res)
					if (res.code == 1) {
						this.dayData = res.data
						this.timer = setTimeout(()=>{
							this.getDay()
						},10000)
					}
				})
			},
			// 下拉加载更多
			pullTorefresh_s(){
				if (this.current2 == 0) return
				console.log('下拉加载更多')
				if (this.state_s == 'over') return
				if (this.loading_s == true) return
				this.page_s++
				this.get_Second_order()
			},
			// 刷新重置订单列表
			refresh_list(){
				if(this.topTab==2){
					this.contractOrderList_s = []
					this.page_s = 1
					this.state_s = 'more'
					this.get_Second_order()
				}
			},
			// 获取秒合约交易订单列表
			get_Second_order(){
				if(this.current2 == 0){
					this.loading_s = true
					this.post('/cycle/get_order',{
						symbol:this.coinInfo.symbol,
					}).then(res => {
						console.log('秒合约——交易中——订单列表',res)
						if (res.code == 1) {
							setTimeout(()=>{
								this.loading_s = false
								this.contractOrderList_s = res.data
							}, 500)
						}
					})
				}
				if(this.current2 == 1){
					if (this.state_s == 'over') return
						this.loading_s = true
						this.state_s = 'loading'
						this.post('/cycle/get_all_order', {
							page: this.page_s,
							symbol:this.coinInfo.symbol,
						}).then(res => {
							console.log('秒合约——已平仓——订单列表',res)
							if (res.code == 1) {
								setTimeout(()=>{
									this.loading_s = false
									this.contractOrderList_s = this.contractOrderList_s.concat(res.data.data)
									if (this.page_s >= res.data.last_page) {
										this.state_s = 'over'
									}
								}, 500)
							}
						})
				}
			},
			// 平仓倒计时结束
			timeOut(){
				this.current2=1
				this.getWallet()
			},
			// 选择开仓时间
			selectTime(index){
				// console.log(index)
				this.riseTime = this.coinInfo.trade_time[index]
			},
			// tabs通知swiper切换
			tabsChange2(index) {
				this.current2 = index;
			},
			onswiperchange2(e) {
				// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				let index = e.target.current || e.detail.current;
				this.tabsChange2(index);
				// #endif
			},
			animationfinish2(e) {
				let current = e.detail.current;
				this.current2 = current;
			},
			// 秒合约下单
			buyRise(type){
				if(!this.BtnFlag) return
				if(this.riseNumber==''){
					this.tos(this.i18n.cycle.openInput)
					return
				}
				if(this.riseTime==0){
					this.tos(this.i18n.cycle.timeclick)
					return
				}
				this.BtnFlag = false
				this.post('/cycle/start_order', {
					position: type,
					symbol: this.coinInfo.symbol,
					cycle: this.riseTime,
					num: this.riseNumber,
				},true).then(res => {
					console.log('秒合约下单',res)
					this.BtnFlag = true
					this.riseTimeType = false
					if (res.code == 1) {
						this.tos(res.msg)
						this.getWallet()
						if(this.current2 == 0){
							this.refresh_list()
						}else{
							this.current2 = 0
						}
					}else{
						if(res.data.jump == 1){
							this.shimingTitle = res.msg
							this.TSShow = true
						}
					}
				})
			},
			// 获取秒合约币种列表
			getMore(symbol){
				this.post('/cycle/get_cycle_coin').then(res => {
					if (res.code == 1) {
						console.log('秒合约交易币种列表',res)
						if(symbol){
							this.midList = res.data
							this.refresh_list()
						}else{
							this.cancelSocket()  //取消socket订阅
							this.midList = res.data
							this.coinInfo = this.midList[0]
							this.Ksrc = 'https://exchange.v5ico-kline.coddex.xyz/index.html?bb_type=' + this.coinInfo.bb_type + '&symbol=' + this.coinInfo.symbol + '&lang=' + uni.getStorageSync('Language')
							this.getDay()
							if(this.coinInfo.trade_time){
								this.riseTime = this.coinInfo.trade_time[0]
							}
							if(!this.leftshow){
								this.refresh_list()
							}
							getApp().globalData.symbol = this.coinInfo.symbol
							this.linkSocket()  //链接socket订阅
						}
					}
				})
			},
			// 选中币种
			changeCoin(index){
				this.cancelSocket()  //取消socket订阅
				this.riseTime = ''
				this.coinInfo = this.midList[index]
				this.Ksrc = 'https://exchange.v5ico-kline.coddex.xyz/index.html?bb_type=' + this.coinInfo.bb_type + '&symbol=' + this.coinInfo.symbol + '&lang=' + uni.getStorageSync('Language')
				clearTimeout(this.timer)
				this.getDay()
				this.refresh_list()
				getApp().globalData.symbol = this.coinInfo.symbol
				this.linkSocket()  //链接socket订阅
				if(this.lastData.close){
					this.lastData.close = Number(this.coinInfo.close)
				}
				this.leftshow = false
			},
			// 取消socket订阅
			cancelSocket(){
				this.sendSocketMessage({
					'subs':'depth',
					"user_id":uni.getStorageSync("user_id"),
					"unsub":"market."+this.coinInfo.symbol+".depth.step0",
					"id":"BTC",
				})
				this.sendSocketMessage({
					'subs':'tradenow',
					"user_id":uni.getStorageSync("user_id"),
					"unsub":"market."+this.coinInfo.symbol+".kline.1min",
					"id":"BTC",
				})
			},
			// 链接socket订阅
			linkSocket(){
				this.sendSocketMessage({
					'subs':'depth',
					"user_id":uni.getStorageSync("user_id"),
					"sub":"market."+this.coinInfo.symbol+".depth.step0",
					"id":"BTC",
				})
				this.sendSocketMessage({
					'subs':'tradenow',
					"user_id":uni.getStorageSync("user_id"),
					"sub":"market."+this.coinInfo.symbol+".kline.1min",
					"id":"BTC",
				})
			},
		}
	}
</script>

<style lang="scss">
	.limitBox_up{
		// width: 116rpx;
		height: 40rpx;
		padding: 0 14rpx;
		background: rgba(18,184,134,0.1);
		border-radius: 4rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #12B886;
		font-family: "Medium" !important;
	}
	.limitBox_down{
		// width: 116rpx;
		height: 40rpx;
		padding: 0 14rpx;
		background: rgba(226,112,70,0.1);
		border-radius: 4rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #E27046;
		font-family: "Medium" !important;
	}
	.heng{
		width: 100rpx;
		height: 2rpx;
		margin: 0 auto;
		background: #1881D2;
	}
	.swiper {
		/* #ifndef H5 */
		// 除了 H5 平台，其它平台均存在的代码
		height: calc(100vh - 676rpx - var(--status-bar-height));
		// height: calc(100vh - 882rpx - var(--status-bar-height));
		/* #endif */
	
		/* #ifdef H5 */
		// 只会出现在h5上
		height: calc(100vh - 676rpx - 104rpx);
		// height: calc(100vh - 882rpx - 104rpx);
		/* #endif */
	}
	.swiper_no {
		/* #ifndef H5 */
		// 除了 H5 平台，其它平台均存在的代码
		height: calc(100vh - 862rpx - var(--status-bar-height));
		// height: calc(100vh - 882rpx - var(--status-bar-height));
		/* #endif */
	
		/* #ifdef H5 */
		// 只会出现在h5上
		height: calc(100vh - 862rpx - 104rpx);
		// height: calc(100vh - 882rpx - 104rpx);
		/* #endif */
	}
	.loginBtn{
		width: 337rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		box-shadow: 0rpx 6rpx 10rpx rgba(16, 194, 168, 0.18);
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	 
	 .qcbtn3 {
	   width: 320rpx;
	   height: 86rpx;
	   background: #1881D2;
	   border-radius: 4rpx;
	   font-size: 28rpx;
	   font-weight: bold;
	   color: #FFFFFF;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	  }
	  .xuanzhebox{
		  width: 164rpx;
		  height: 60rpx;
		  background: #202833;
		  border: 1rpx solid #0B1622;
		  position: relative;
		  display: flex; 
		  align-items: center;
		  justify-content: center;
		  font-size: 28rpx;
		  color: #F2F5FF;
	  }
</style>
