<template>
	<view class="">
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>
			<!-- 顶部标题 -->
			<view slot="top" class="width-100b flex align-center justify-between padding-w-30"
				:style="{height: `calc(${statusBar}px + 100rpx)`,paddingTop:`${statusBar}px`,background:theme.bg}">
				<view class="flex align-center">
					<view @click="leftshow = true" class="width-360 flex align-center">
						<image class="width-48 height-48" :src="theme.imgs+'/left6@2x.png'" mode=""></image>
						<text class="font-36 numbold-font margin-w-10">{{coinInfo.coinname}}</text>
						<view :class="zhangdie>0?'limitBox_up':'limitBox_down'">{{zhangdie}}%</view>
					</view>
				</view>
				<view class="flex align-center justify-end">
					<!-- #ifdef H5 -->
						<image  @click="router.push('/pages/tradingView/h5?title='+(coinInfo.coinname)+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol)" class="width-56 height-56" :src="theme.imgs+'/tubiao@2x.png'" mode=""></image>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
						<image  @click="router.push('/pages/tradingView/index?title='+(coinInfo.coinname)+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol+'&close='+lastData.close)" class="width-56 height-56" :src="theme.imgs+'/tubiao@2x.png'" mode=""></image>
					<!-- #endif -->
				</view>
			</view>
			
			<!-- 合约/现货切换 - 铺满宽度 -->
			<view class="width-100b flex justify-center padding-w-30" :style="'background-color: '+theme.bg">
				<view class="topSwitchFull">
					<view class="topSwitchItem active" @tap="onSwitchMarket('contract')">{{i18n.trade.contract}}</view>
					<view class="topSwitchItem" @tap="onSwitchMarket('spot')">{{i18n.trade.spot}}</view>
				</view>
			</view>
			
		<view class="relative" :style="'background-color: '+theme.bg">
				<view class="width-100b height-680 margin-c-10 padding-w-30 flex align-center justify-between">
					<!-- 左侧 -->
					<view class="flex-1 height-100b" style="padding: 20rpx 10rpx 20rpx 0;">
						<!-- 合约交易部分 -->
						<!-- 买入 卖出 -->
						<view  class="width-388 margin-0-auto height-66 flex align-center justify-between">
							<view @click="buyType='more'" :class="buyType=='more'?'leftbox':'triangle-left'" :style="'color: '+theme.text">{{i18n.cycle.buyIn}}</view>
							<view @click="buyType='free'" :class="buyType=='free'?'rightbox':'triangle-right'" :style="'color: '+theme.text">{{i18n.cycle.sellout}}</view>
						</view>
						<!-- 市场交易 -->
						<view  class="width-388 height-64 margin-16-auto relative">
							<view @click="marketState=!marketState" class="xialabox" :style="marketState?'z-index:10100;':'z-index:10000;'"
								:class="marketState?'height-184':'height-64'">
								<view class="width-100b height-64 flex align-center justify-between padding-w-15">
									<text class="font-24">{{marketType=='market'?i18n.cycle.Market:i18n.cycle.LIMIT}}</text>
									<i class="cuIcon-unfold"></i>
								</view>
								<view class="width-100b padding-w-15" :style="'background-color: '+theme.bg+';color: '+theme.text">
									<view @click.stop="marketType = 'market',marketState=!marketState ,inputPirce=''" class="height-60 line-height-60 font-24">{{i18n.cycle.Market}}</view>
									<view @click.stop="marketType = 'limit',marketState=!marketState" class="height-60 line-height-60 font-24">{{i18n.cycle.LIMIT}}</view>
								</view>
							</view>
							<view @click="marketState=!marketState" v-if="marketState" class="maskBox"></view>
						</view>
						
						<!-- 当前最优价格 -->
						<view  class="width-388 height-64 margin-16-auto radiu-4 padding-w-15 flex align-center justify-between"
							style="border: 1px solid rgba(171, 171, 171, 0.2);">
							<text class="font-24 color-C3C3C3 medium-font">{{i18n.cycle.price}}</text>
							<input class="flex-1 font-24 nummedium-font padding-w-20" type="number" maxlength="14" :disabled="marketType=='market'?true:false" v-model="inputPirce" :placeholder="marketType=='market'?i18n.cycle.tag:i18n.cycle.tag1" placeholder-style="color:#999999;font-size:24rpx;"/>
							<text class="font-24 nummedium-font">USDT</text>
						</view>
						<!-- 数量 -->
						<view  class="width-388 height-64 margin-16-auto radiu-4 padding-w-15 flex align-center justify-between"
							style="border: 1px solid rgba(171, 171, 171, 0.2);">
							<text class="font-24 color-C3C3C3 medium-font">{{i18n.cycle.num}}</text>
							<input class="flex-1 font-24 nummedium-font padding-w-20" type="number" maxlength="13" v-model="inputHans" placeholder="0" placeholder-style="color:#999999;font-size:24rpx;"/>
							<text class="font-24 medium-font">{{i18n.cycle.hands}}</text>
						</view>
						<!-- 倍数 -->
						<view  class="width-388 height-64 margin-16-auto relative">
							<view @click="doubleState=!doubleState" class="xialabox1" :style="doubleState?'z-index:10100;':'z-index:10000;'"
								:class="doubleState?'':'height-64'">
								<view class="width-388 height-64 flex align-center justify-between padding-w-15">
									<text class="font-24 color-C3C3C3 medium-font margin-r-20">{{i18n.cycle.multiple}}</text>
									<text :class="multiple==0?'color-999999':''" class="flex-1 font-24 nummedium-font">{{multiple}}</text>
									<i class="cuIcon-unfold"></i>
								</view>
								<view class="padding-w-15"
								:style="'background-color: '+theme.bg+';color: '+theme.text">
									<view @click.stop="multiple = ite,doubleState=!doubleState" class="height-64 line-height-64 font-24 nummedium-font" v-for="(ite,idx) in setting.buy_num" :key="idx">{{ite}}</view>
								</view>
							</view>
							<view @click="doubleState=!doubleState" v-if="doubleState" class="maskBox"></view>
						</view>
						
						<view  class="width-388 margin-c-36">
							<view class="height-42 flex align-center justify-between">
								<text class="font-24 nummedium-font">1{{i18n.cycle.hands}}≈</text>
								<text class="font-24 nummedium-font">{{(lastData.close||0).toFixed(coinInfo.price_jd)}} USDT</text>
							</view>
							<view class="height-42 flex align-center justify-between">
								<text class="font-24 nummedium-font">{{i18n.cycle.available}}</text>
								<text class="font-24 nummedium-font">{{Number(count_xh_usdt||0).toFixed(2)}} USDT</text>
							</view>
						</view>
						<view  class="width-388 margin-0-auto">
							<button @click="tanView()" v-if="buyType=='more'" class="cu-btn loginBtn bj-00C481">{{i18n.cycle.long}}</button>
							<button @click="tanView()" v-if="buyType=='free'" class="cu-btn loginBtn bj-FF4040">{{i18n.cycle.short}}</button>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="flex-1 height-100b" style="padding: 20rpx 0 20rpx 10rpx;">
						<view class="width-272 margin-0-auto flex align-center justify-between">
							<view class="flex-1 font-24 color-C3C3C3 text-left">{{i18n.cycle.price}}</view>
							<view class="flex-1 font-24 color-C3C3C3 text-right">{{i18n.cycle.volume}}</view>
						</view>
						<view class="width-272 height-260 margin-10-auto flex" style="flex-direction: column-reverse;">
							<view v-if="index<5" class="height-52 flex align-center nummedium-font relative" 
							v-for="(item,index) in tick.asks">
								<view class="flex-1 font-22 color-FF4040 text-left hidden-nowrap-ellipsis-1">
									{{Number(item[0]).toFixed(coinInfo.price_jd)}}</view>
								<view class="flex-1 font-22 color-C3C3C3 text-right hidden-nowrap-ellipsis-1">
									{{item[1] | numFilter}}</view>
								<view class="progress bj-FFEBEB" :style="'width:'+ dethWidth(index,item[1],tick.asks) +'%;'"></view>
							</view>
						</view>
						<view v-if="lastData.close" class="width-272 margin-10-auto text-right">
							<text class="font-28 nummedium-font color-FF4040">{{Number(lastData.close).toFixed(coinInfo.price_jd)}}</text>
							<text class="font-26 numbold-font margin-l-10">USDT</text>
						</view>
						<view class="width-272 margin-10-auto">
							<view v-if="index<5" class="height-52 flex align-center nummedium-font relative"
								v-for="(item,index) in tick.bids">
								<view class="flex-1 font-22 color-00C481 text-left hidden-nowrap-ellipsis-1">
									{{Number(item[0]).toFixed(coinInfo.price_jd)}}</view>
								<view class="flex-1 font-22 color-C3C3C3 text-right hidden-nowrap-ellipsis-1">
									{{item[1] | numFilter}}</view>
								<view class="progress bj-E5F9F2" :style="'width:'+ dethWidth(index,item[1],tick.bids) +'%;'"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 合约交易tab选择 -->
				<view  class="width-100b height-72 padding-w-40 flex align-center justify-between">
					<view @click="tabsChange1(index)" class="flex-1 height-46 flex direction-column align-center justify-between" v-for="(item,index) in tablist1" :key="index">
						<text :class="current1==index?theme.selectcolor:theme.color" class="font-28">{{item}}</text>
					</view>
				</view>
		</view>
		
		<!-- 合约交易列表 -->
		<!-- swiper必须设置flex:1，因为swiper有默认的高度，只有设置flex:1才可以铺满页面  -->
		<swiper  :class="contractOrderList.length>2?'swiper':'swiper_no'" :current="current1" @animationfinish="animationfinish1"
			@change="onswiperchange1">
			<swiper-item v-for="(item,index) in tablist1" class="swiper-item" style="height: 100%;">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh">
					<contractListItem @setCheck="setCheck" @revocation="revocation" @closeOut="closeOut" :price_jd="coinInfo.price_jd"
					 :loading="loading" :currentIndex="getContractViewIndex()" :list="contractOrderList" :nowPrice="lastData.close" :shizhi="Number(setting.shizhi)"
					 :color="theme.text" :background="theme.bg" :fu_color="theme.fu_color"></contractListItem>
				</scroll-view>
			</swiper-item>
		</swiper>
		</z-paging>
		<!-- 左侧弹出 -->
		<u-popup v-model="leftshow" mode="left" border-radius="30">
			<view  class="width-600" 
			:style="'background-color: '+theme.bg+';color: '+theme.text"
			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">{{i18n.newWord.Trading}}</text>
				</view>
				<view class="width-550 height-70 margin-12-auto radiu-36 flex align-center padding-w-22" 
				style="border: 1px solid rgba(191, 195, 199, 0.2);">
					<u-icon name="search" color="#C3C3C3" size="28"></u-icon>
					<input @input="searchCion" confirm-type="search"
						class="padding-l-13 flex-1 font-26 line-height-70" type="text"
						:placeholder="i18n.index.tos1" v-model="searchVal" placeholder-style="font-size:26rpx;"/>
				</view>
				<view class="height-78 padding-w-30 flex align-center justify-between">
					<view @click="leftcurrent=1,setTimeLeft()" class="flex-1 height-60 flex direction-column align-center justify-center">
						<text :class="leftcurrent==1?'':'color-C3C3C3'" class="font-30">{{i18n.newWord.all}}</text>
						<view :style="leftcurrent==1?'':'visibility: hidden;'" class="heng"></view>
					</view>
					<view @click="leftcurrent=2,setTimeLeft()" class="flex-1 height-60 flex direction-column align-center justify-center">
						<text :class="leftcurrent==2?'':'color-C3C3C3'" class="font-30">{{i18n.newWord.self}}</text>
						<view :style="leftcurrent==2?'':'visibility: hidden;'" class="heng"></view>
					</view>
				</view>
				<scroll-view scroll-y="true" style="overflow: scroll;flex: 1;">
					<view v-if="leftcurrent==1" 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 rgba(191, 195, 199, 0.2);">
							<view class="flex align-center">
								<view @click.stop="collectCoin(item.symbol,index,1)" class="height-78 flex align-center justify-center">
									<image class="width-24 height-23" :src="item.is_sc?'/static/imgs/transaction/star_on@2x.png':'/static/imgs/transaction/star_off@2x.png'" mode=""></image>
									<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
								</view>
								<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USD{{item.symbol == 'xauusd'? '':'T'}}</span></text>
							</view>
							<text class="font-28 nummedium-font">
							{{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-00C481':'color-FF4040'">{{zhangdie}}%</text>
							<text v-else  class="font-28 nummedium-font"
								:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
						</view>
					</view>
					<view v-if="leftcurrent==2" class="padding-w-30">
						<view @click="changeCoin(index,2)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in myCoinList" :key="index" style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
							<view class="flex align-center">
								<view @click.stop="collectCoin(item.symbol,index,2)" class="height-78 flex align-center justify-center">
									<image class="width-24 height-23" src="/static/imgs/transaction/star_on@2x.png" mode=""></image>
									<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
								</view>
								<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USDT</span></text>
							</view>
							<text class="font-28 nummedium-font">
							{{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-00C481':'color-FF4040'">{{zhangdie}}%</text>
							<text v-else  class="font-28 nummedium-font"
								:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
						</view>
						<view v-if="myCoinList.length==0"
							class="width-100b padding-c-50 flex direction-column align-center justify-center">
							<text class="font-28 nummedium-font color-C3C3C3">{{i18n.lever.nodata}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 中间弹窗 -->
		<u-popup v-model="centerShow" mode="center" border-radius="20">
			<view class="width-600" :style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="height-100 flex align-center justify-center">
					<text class="font-32 bold-font">{{i18n.cycle.set}}</text>
				</view>
				<view class="padding-w-20">
					<view class="height-96 line-height-96 padding-w-32">
						<text class="font-30 bold-font">{{i18n.cycle.surplus}}</text>
					</view>
					<input class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
					 type="number" v-model="zy_price" :placeholder="i18n.cycle.setProfit"/>
				</view>
				<view class="padding-w-20">
					<view class="height-96 line-height-96 padding-w-32">
						<text class="font-30 bold-font">{{i18n.cycle.loss}}</text>
					</view>
					<input class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
					 type="number" v-model="zs_price" :placeholder="i18n.cycle.setLoss"/>
				</view>
				<view class="width-100b height-96 margin-t-50 line-height-96 font-30 flex align-center justify-between">
					<view @click="centerShow=false" class="flex-1 color-white text-center" style="background-color: #D1D3D8;border-radius: 0rpx 0rpx 0rpx 20rpx;">
						{{i18n.cycle.quxiao}}</view>
					<view @click="set_contract()" class="flex-1 color-white text-center bj-0165EE" style="border-radius: 0rpx 0rpx 20rpx 0rpx;">
						{{i18n.cycle.queding}}</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 实名认证弹窗 -->
		<u-popup style="z-index: 10100;" border-radius="18" mode="center" v-model="TSShow">
		   <view class="width-600 padding-b-20"
		   :style="'background-color: '+theme.bg+';color: '+theme.text">
				<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">{{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: 10100;" border-radius="10" mode="center" v-model="showView">
		   <view class="width-540 padding-40"
		   :style="'background-color: '+theme.bg+';color: '+theme.text">
			   <view class="padding-c-30">
					<view class="height-60 flex align-center justify-between">
						<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.jiaoyi}}:</text>
						<text class="font-28 nummedium-font">{{(lastData.close * inputHans) | numFilter}} USDT</text>
					</view>
					<view class="height-60 flex align-center justify-between">
						<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.margin}}:</text>
						<view v-if="marketType=='market'&&lastData.close" class="font-28 nummedium-font">{{(setting.promise_price * lastData.close * 100 * inputHans / (multiple||1)) | numFilter}} USDT</view>
						<view v-if="marketType=='limit'" class="font-28 nummedium-font">{{(setting.promise_price * inputPirce) | numFilter}} USDT</view>
					</view>
					<view class="height-60 flex align-center justify-between">
						<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.service}}:</text>
						<view v-if="marketType=='market'&&lastData.close" class="font-28 nummedium-font">{{(setting.contract_fee * setting.promise_price * lastData.close * 100 * inputHans / (multiple||1)) | numFilter}} USDT</view>
						<view v-if="marketType=='limit'" class="font-28 nummedium-font">{{(setting.contract_fee * setting.promise_price * inputPirce) | numFilter}} USDT</view>
					</view>
			   </view>
			   <view class="width-466 margin-0-auto flex align-center justify-center">
					<button @click="buy_contract()" class="cu-btn loginBtn bj-0165EE" style="width: 466rpx;border-radius: 10rpx;height: 86rpx;">{{i18n.cycle.confirm}}</button>
			   </view>
		   </view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import contractListItem from './components/contract_list_item.vue'
	export default {
		components: {
			contractListItem,
		},
		data() {
			return {
				count_xh_usdt:0, //合约可用剩余usdt
				midList:[], //左侧币种列表
				midList_copy:[],
				coinInfo:{}, //选中的当前币种信息
				setting:[], //保证金 手续费 倍数 余额 相关设置
				
				buyType:'more', //买涨买跌类型
				marketState: false,
				marketType:'market', //交易类型 market=市场交易  limit=限价交易
				
				doubleState:false,
				multiple:0,//倍数
				
				inputPirce:'',//当前最优价格
				inputHans:'',//数量 手
								
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				leftshow:false, //左侧弹窗开关
				centerShow:false, //止盈止损弹窗开关
				zy_price:'',//止盈价格
				zs_price:'',//止损价格
				
				tablist1:['Position Held','Transaction Record'],
				current1:0,

				contract_id:'',//选中的合约订单ID
				contractOrderList:[], //合约交易订单列表
				state:'more',
				page:1,
				loading:true,
				
				BtnFlag:true, //按钮防重复点击
				TSShow:false,
				shimingTitle:'请先完成实名认证',
				
				// socket
				lastData:'',
				tick:"",
				
				leftcurrent:1,
				searchVal:'',
				myCoinList:[],
				myCoinList_copy:[],
				showView:false,
				
				theme: '',
				unsettledTimer: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:{
			current1(oldValue,newValue){
				if(oldValue != newValue){
					this.refresh_list()
				}
			},
			leftshow(item){
				if(item==false){
					this.searchVal = ''
					clearInterval(this.lefttiming)
				}else{
					this.setTimeLeft()
				}
			}
		},
		filters:{
			//过滤数字位数
			numFilter(item){
				if (item == undefined || item == null) {
					return 0;
				} else {
					if(Number(item) < 10){
						return Number(item).toFixed(6);
					}else{
						return Number(item).toFixed(4);
					}
				}
			},
		},
		onLoad(e){
			const symbol = (e && e.symbol) ? e.symbol : (getApp().globalData.symbol || '')
			if (symbol) {
				getApp().globalData.symbol = symbol
				this.getLeft(symbol)
			} else {
				this.getLeft()
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			if(this.current1==0){
				this.unsettledTimer = setInterval(()=>{
					if(this.coinInfo.symbol == undefined) return
					this.page = 1
					this.unsettledOrder()
				},1500)
			}
			if(getApp().globalData.symbol == ''){
				getApp().globalData.symbol = this.coinInfo.symbol
				console.log(getApp().globalData.symbol )
			}
			this.onSocketMessage()
			this.linkSocket()  //链接socket订阅
			this.tablist1 = this.i18n.cycle.tablist1
			
			this.TSShow = false
			this.getWallet()
			
			uni.$on('reConnect', (res) => {
				console.log("重连WebSocket")
				this.onSocketMessage()
			})
		},
		onHide :function(){
			getApp().globalData.symbol = ""
			uni.$off('reConnect')
			this.cancelSocket()  //取消socket订阅
		},
		methods: {
			onSwitchMarket(type) {
				if (type === 'contract') return
				if (type === 'spot') {
					getApp().globalData.symbol = this.coinInfo.symbol || ''
					uni.redirectTo({
						url: '/pages/transaction/index?symbol=' + (this.coinInfo.symbol || '')
					})
				}
			},
			// 收藏币种
			collectCoin(symbol,index,type){
				this.post('/my/collect_rate',{
					symbol:symbol
				}).then((res) => {
					console.log('收藏成功',res)
						if (res.code == 1) {
							if(type==1){
								this.midList[index].is_sc = !this.midList[index].is_sc
							}
							if(type==2){
								this.myCoinList.splice(index,1)
							}
					}
				})
			},
			getContractStatus(){
				if(this.current1 === 0) return 1  // Position Held
				return 'all'  // Transaction Record
			},
			getContractViewIndex(){
				if(this.current1 === 0) return 1
				return 0
			},
			setTimeLeft(){
				this.getLeft(this.coinInfo.symbol)
				this.getmy_coinList()
				clearInterval(this.lefttiming)
				if(this.leftcurrent==1){
					this.lefttiming = setInterval(()=>{
						this.getLeft(this.coinInfo.symbol)
					},3000)
				}
				if(this.leftcurrent==2){
					this.lefttiming = setInterval(()=>{
						this.getmy_coinList()
					},3000)
				}
			},
			searchCion(){
				if(this.leftcurrent==1){
					if(this.searchVal==''){
						this.getLeft(this.coinInfo.symbol)
					}
					let arrtemp = []
					this.midList_copy.forEach((item)=>{
						if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
							arrtemp.push(item)
						}
					})
					this.midList = arrtemp
				}
				if(this.leftcurrent==2){
					if(this.searchVal==''){
						this.getmy_coinList()
					}
					let arrtemp = []
					this.myCoinList_copy.forEach((item)=>{
						if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
							arrtemp.push(item)
						}
					})
					this.myCoinList = arrtemp
				}
			},
			onRefresh() {
				console.log('下拉刷新');
				this.getLeft(this.coinInfo.symbol)
				this.getWallet()
				setTimeout(()=>{
					this.$refs.paging.complete();
				}, 1500);
			},
			getWallet(){
				// 刷新合约账户余额
				this.post('/contract/get_coin').then(res => {
					if (res.code == 1) {
						this.setting = res.data.setting
						this.count_xh_usdt = res.data.setting.balance_contract || 0
					}
				})
			},
			// 下拉加载更多
			pullTorefresh(){
				if (this.state == 'over') return
				if (this.loading == true) return
				console.log('下拉加载更多')
				this.page++
				this.get_contract()
			},
			// 刷新重置订单列表
			refresh_list(){
				this.contractOrderList = []
				this.page = 1
				this.state = 'more'
				this.get_contract()
			},
			// 获取合约持仓列表
			unsettledOrder(){
				this.post('/contract/get_contract', {
					page: 1,
					size: this.page * 10,
					symbol: this.coinInfo.symbol,
					status: this.getContractStatus()
				}).then(res => {
					console.log(this.coinInfo.symbol+'合约持仓 size'+ this.page * 10, res.data.data)
					if (res.code == 1) {
						this.loading = false
						if(this.contractOrderList.length != 0&&(this.contractOrderList.length > res.data.data.length)){
							this.current1=2
						}else{
							this.contractOrderList = res.data.data
						}
					}
				})
			},
			// 获取合约交易订单列表
			get_contract(){
				if(this.current1==0){
					clearInterval(this.unsettledTimer)
					this.unsettledOrder()
					this.unsettledTimer = setInterval(()=>{
						this.unsettledOrder()
					},3000)
				}else{
					clearInterval(this.unsettledTimer)
					if (this.state == 'over') return
					this.loading = true
					this.state = 'loading'
					let obj = {}
					if(this.current1==1){
						obj = {
							page: this.page,
							status:'all'
						}
					} else {
						obj = {
							page: this.page,
							symbol:this.coinInfo.symbol,
							status:this.getContractStatus()
						}
					}
					this.post('/contract/get_contract', obj).then(res => {
						console.log('合约交易订单列表',res)
						if (res.code == 1) {
								this.loading = false
								this.contractOrderList = this.contractOrderList.concat(res.data.data)
								if (this.page >= res.data.last_page) {
									this.state = 'over'
								}
						}
					})
				}
			},
			dethWidth(index,item,list) {
				var temp = 0
				let num = list.length
				if(num==0) return
				if(num>5){
					num = 5
				}
				for (var i = 0; i < num; i++) {
					temp += Number(list[i][1])
				}
				return (item / temp).toFixed(2) * 100
			},
			// tabs通知swiper切换
			tabsChange1(index) {
				this.current1 = index;
			},
			onswiperchange1(e) {
				// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				let index = e.target.current || e.detail.current;
				this.tabsChange1(index);
				// #endif
			},
			animationfinish1(e) {
				let current = e.detail.current;
				this.current1 = current;
			},
			
			// 平仓
			closeOut(id){
				if(!this.BtnFlag) return
				this.BtnFlag = false
				this.post('/contract/pingcang',{
					contract_id: id,
				},true).then((res) => {
					console.log('撤销合约订单',res)
					this.BtnFlag = true
					if (res.code == 1) {
						this.current1 = 2
						this.getWallet()
						this.tos(res.msg)
					}
				})
			},
			// 撤销
			revocation(id){
				if(!this.BtnFlag) return
				this.BtnFlag = false
				this.post('/contract/cancel_cang',{
					contract_id: id,
				},true).then((res) => {
					console.log('撤销合约订单',res)
					this.BtnFlag = true
					if (res.code == 1) {
						this.current1 = 3
						this.getWallet()
						this.tos(res.msg)
					}
				})
			},
			// 止盈止损弹出
			setCheck(id,zy_price,zs_price){
				console.log('合约订单ID',id)
				console.log('止盈价格',zy_price)
				console.log('止损价格',zs_price)
				this.contract_id = id
				this.zy_price = zy_price
				this.zs_price = zs_price
				this.centerShow = true
			},
			// 设置止盈止损比例
			set_contract(){
				if(!this.BtnFlag) return
				if(this.zy_price==0){
					this.tos(this.i18n.cycle.setProfit)
					return
				}
				if(this.zs_price==0){
					this.tos(this.i18n.cycle.setLoss)
					return
				}
				this.BtnFlag = false
				this.post('/contract/set_contract',{
					zy_price: this.zy_price,
					zs_price: this.zs_price,
					contract_id: this.contract_id,
				},true).then((res) => {
					console.log('设置止盈止损比例',res)
					this.BtnFlag = true
					if (res.code == 1) {
						this.tos(res.msg)
						this.centerShow = false
						this.refresh_list()
					}
				})
			},
			tanView(){
				if(this.marketType=='limit'){
					if(this.inputPirce==''){
						this.tos(this.i18n.cycle.tag1)
						return
					}
				}
				if(this.inputHans==''){
					this.tos(this.i18n.cycle.numInput)
					return
				}
				if(this.multiple==0){
					this.tos(this.i18n.cycle.multipleInput)
					return
				}
				this.showView = true
			},
			// 合约下单
			buy_contract(){
				if(!this.BtnFlag) return
				this.BtnFlag = false
				this.post('/contract/buy_contract',{
					cart: this.marketType,
					type: this.buyType,
					num: this.inputHans,
					price: this.marketType=='limit'?this.inputPirce : this.lastData.close,
					coin_id:this.coinInfo.id,
					multiple:this.multiple,
				},true).then((res) => {
					console.log('合约下单',res)
					this.BtnFlag = true
					this.showView = false
					if (res.code == 1) {
						this.inputHans=''
						this.inputPirce=''
						this.multiple=0
						this.tos(res.msg)
						this.getWallet()
						if(this.marketType=='limit'){
							if(this.current1 == 1){
								this.refresh_list()
							}else{
								this.current1 = 1
							}
						}else{
							if(this.current1 == 0){
								this.refresh_list()
							}else{
								this.current1 = 0
							}
						}
					}else{
						if(res.data.jump == 1){
							this.shimingTitle = res.msg
							this.TSShow = true
						}
					}
				})
			},
			// 我的收藏币种列表
			getmy_coinList(){
				this.post('/my/collect_list',{
					type:'1'
				}).then((res) => {
					console.log('我的收藏',res)
					if (res.code == 1) {
						if(this.leftshow){
							if(this.searchVal){
								let arrtemp = []
								res.data.coin.forEach((item)=>{
									if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
										arrtemp.push(item)
									}
								})
								console.log(arrtemp)
								this.myCoinList = arrtemp
							}else{
								this.myCoinList = res.data.coin
								this.myCoinList_copy = res.data.coin
							}
						}else{
							this.myCoinList = res.data.coin
							this.myCoinList_copy = res.data.coin
						}
					}
				})
			},
			// 获取合约交易币种列表
			getLeft(symbol){
				this.post('/contract/get_coin').then(res => {
					if (res.code == 1) {
						console.log('合约交易币种列表',res)
						if (symbol == undefined) {
							this.cancelSocket() //取消socket订阅
						}
						this.setting = res.data.setting
						// 使用合约账户余额
						this.count_xh_usdt = res.data.setting.balance_contract || 0
						if(this.leftshow){
							if(this.searchVal){
								let arrtemp = []
								res.data.coin.forEach((item)=>{
									if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
										arrtemp.push(item)
									}
								})
								console.log(arrtemp)
								this.midList = arrtemp
							}else{
								this.midList = res.data.coin
								this.midList_copy = res.data.coin
							}
						}else{
							this.midList = res.data.coin
							this.midList_copy = res.data.coin
							if (symbol) {
								this.midList.forEach((item, index) => {
									if (item.symbol == symbol) {
										this.coinInfo = item
									}
								})
							} else {
								this.coinInfo = this.midList[0]
							}
						}
						if (!this.leftshow) {
							this.refresh_list()
						}
						getApp().globalData.symbol = this.coinInfo.symbol
						// this.onSocketMessage()
						if (symbol == undefined) {
							this.linkSocket() //链接socket订阅
						}
					}
				})
			},
			// 选中币种
			changeCoin(index,type){
				this.cancelSocket()  //取消socket订阅
				if(type==1){
					this.coinInfo = this.midList[index]
				}
				if(type==2){
					this.coinInfo = this.myCoinList[index]
				}
				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">
	.topSwitch {
		width: 360rpx;
		height: 60rpx;
		border: 2rpx solid #10C7A0;
		border-radius: 12rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.topSwitchFull {
		width: 100%;
		height: 60rpx;
		border: 2rpx solid #10C7A0;
		border-radius: 12rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.topSwitchItem {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 700;
		color: #111111;
	}
	.topSwitchItem.active {
		background: #10C7A0;
		color: #FFFFFF;
	}

	.toptitle_active{
		flex: 2;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		text-align: center;
		transition: all 0.5s;
	}
	.toptitle{
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #8B99A2;
		transition: all 0.5s;
	}
	.fixed1 {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10010;
		background-color: #F6F8FB;
	}
	.exchangeBox{
		// width: 200rpx;
		padding: 0 18rpx;
		height: 48rpx;
		// background: rgba(195, 195, 195, 0.39);
		background: rgba(249,249,249,0.2);
		margin-right: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.limitBox_up {
		// width: 116rpx;
		height: 46rpx;
		padding: 0 14rpx;
		background: rgba(6,195,141,0.2);
		border-radius: 4rpx;
		font-size: 28rpx;
		line-height: 46rpx;
		color: #06C38D;
		font-family: "Medium" !important;
	}
	
	.limitBox_down {
		// width: 116rpx;
		height: 46rpx;
		padding: 0 14rpx;
		background: rgba(220,75,67,0.2);
		border-radius: 4rpx;
		font-size: 28rpx;
		line-height: 46rpx;
		color: #DC4B43;
		font-family: "Medium" !important;
	}
	.maskBox {
		width: 100vh;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0);
		z-index: 10000;
	}
	.xialabox {
		width: 388rpx;
		// background: #FFFFFF;
		border: 1px solid rgba(171, 171, 171, 0.2);
		border-radius: 4rpx;
		overflow: hidden;
		transition: 0.3s;
		position: absolute;
		top: 0rpx;
		z-index: 10100;
	}
	.xialabox1 {
		width: 388rpx;
		// background: #FFFFFF;
		border: 1px solid rgba(171, 171, 171, 0.2);
		border-radius: 4rpx;
		overflow: hidden;
		transition: 0.3s;
		position: absolute;
		top: 0rpx;
		z-index: 10100;
	}
	.heng{
		width: 48rpx;
		height: 4rpx;
		margin: 10 auto;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
	}
	.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 */
	}
	.progress{
		height: 100%;
		max-width: 272rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		transition: all 0.3s;
	}
	.loginBtn{
		width: 378rpx;
		height: 74rpx;
		box-shadow: 0rpx 6rpx 10rpx rgba(16, 194, 168, 0.18);
		border-radius: 4rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.inputbox{
		width: 560rpx;
		height: 96rpx;
		padding: 0 32rpx;
		// background: #F6F8FB;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-family: "Bold" !important;
		font-style: normal;
	}
	
	.leftbox {
		width: 190rpx;
		height: 66rpx;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		background: linear-gradient(106deg, #06C38D 183rpx, transparent 10rpx);
		font-size: 28rpx;
		color: #FFFFFF !important;
		line-height: 66rpx;
		text-align: center;
		font-weight: bold;
	}
	.triangle-left {
		width: 190rpx;
		height: 66rpx;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		background: linear-gradient(106deg, rgba(217,217,217,0.4) 183rpx, transparent 10rpx);
		font-size: 28rpx;
		color: #020202;
		line-height: 66rpx;
		text-align: center;
		font-weight: bold;
	}
	.rightbox {
		width: 190rpx;
		height: 66rpx;
		border-radius: 0rpx 8rpx 8rpx 0rpx;
		background: linear-gradient(-74deg, #DC4B43 183rpx, transparent 10rpx);
		font-size: 28rpx;
		color: #FFFFFF !important;
		line-height: 66rpx;
		text-align: center;
		font-weight: bold;
	}
	
	.triangle-right {
		width: 190rpx;
		height: 66rpx;
		border-radius: 0rpx 8rpx 8rpx 0rpx;
		background: linear-gradient(-74deg, rgba(217,217,217,0.4) 183rpx, transparent 10rpx);
		font-size: 28rpx;
		color: #020202;
		line-height: 66rpx;
		text-align: center;
		font-weight: bold;
	}
	
	 
	 .qcbtn3 {
	   width: 320rpx;
	   height: 86rpx;
	   background: #0165EE;
	   border-radius: 20rpx;
	   font-size: 28rpx;
	   font-weight: bold;
	   color: #FFFFFF;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	  }
</style>
