<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 @click="leftshow = true" class="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>
				<!-- #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 class="width-100b flex justify-center padding-w-30" :style="'background-color: '+theme.bg">
				<view class="topSwitchFull">
					<view class="topSwitchItem" @tap="onSwitchMarket('contract')">{{i18n.trade.contract}}</view>
					<view class="topSwitchItem active" @tap="onSwitchMarket('spot')">{{i18n.trade.spot}}</view>
				</view>
			</view>

			<view class="relative" :style="'background-color: '+theme.bg">
				<view class="width-100b height-670 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='buy',inputHans='',biliType=0" :class="buyType=='buy'?'leftbox':'triangle-left'" :style="'color: '+theme.text">
								{{i18n.lever.buyIn}}
							</view>
							<view @click="buyType='sell',inputHans='',biliType=0" :class="buyType=='sell'?'rightbox':'triangle-right'" :style="'color: '+theme.text">
								{{i18n.lever.sellout}}
							</view>
						</view>
						<!-- 市场交易 -->
						<view class="width-388 height-64 margin-16-auto">
							<view @click="marketState=!marketState" class="xialabox"
								:class="marketState?'height-184':'height-64'">
								<view class="width-100b height-64 flex align-center justify-between padding-w-15">
									<text class="font-26">{{marketType=='market'?i18n.lever.Market:i18n.lever.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-26">{{i18n.lever.Market}}
									</view>
									<view @click.stop="marketType = 'limit',marketState=!marketState"
										class="height-60 line-height-60 font-26">{{i18n.lever.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"
							style="border: 1px solid rgba(171, 171, 171, 0.2);">
							<view class="height-64 flex align-center justify-between">
								<input class="font-26 nummedium-font" type="digit"
									:disabled="marketType=='market'?true:false" v-model="inputPirce"
									:placeholder="marketType=='market'?i18n.lever.tag:i18n.lever.tag1"
									placeholder-style="font-size:24rpx;" />
								<text class="font-26 nummedium-font margin-l-10">USDT</text>
							</view>
						</view>
						<!-- 数量 -->
						<view class="width-388 height-128 margin-16-auto radiu-4 padding-w-15"
							style="border: 1px solid rgba(171, 171, 171, 0.2);">
							<view class="height-64 line-height-64 font-26 hidden-nowrap-ellipsis-1 flex-1">{{i18n.lever.num}} <span class='font-22' v-if="inputHans&&buyType=='buy'">(≈{{Number(inputHans/lastData.close)|numFilter }} <span class="margin-l-10">{{coinInfo.name}}</span>)</span></view>
							<view class="height-64 flex align-center justify-between">
								<input class="font-26 nummedium-font" type="digit" :placeholder="i18n.lever.numInput" v-model="inputHans"
									placeholder-style="font-size:24rpx;" />
								<text class="font-26 nummedium-font margin-l-10">{{buyType=='buy'?'USDT':coinInfo.name}}</text>
							</view>
						</view>
						<!-- 比例 -->
						<view class="width-388 margin-10-auto height-80 flex align-center justify-between">
							<view @click="selectBili(0)"  class="width-22 height-100b flex direction-column justify-center">
								<view class="width-22 height-22 radiu-50b" style="border: 2px solid #3A43E8;"></view>
								<text class="font-20" :style="'color: '+theme.fu_text">0%</text>
							</view>
							<view @click="selectBili(25)" class="flex-1 height-100b flex direction-column justify-center">
								<view class="flex align-center justify-between">
									<view :class="biliType>=25?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
									<view class="width-22 height-22 radiu-50b" 
									:style="biliType>=25?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
								</view>
								<text class="font-20 text-right" :style="'color: '+theme.fu_text">25%</text>
							</view>
							<view @click="selectBili(50)" class="flex-1 height-100b flex direction-column justify-center">
								<view class="flex align-center justify-between">
									<view :class="biliType>=50?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
									<view class="width-22 height-22 radiu-50b" 
									:style="biliType>=50?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
								</view>
								<text class="font-20 text-right" :style="'color: '+theme.fu_text">50%</text>
							</view>
							<view @click="selectBili(75)" class="flex-1 height-100b flex direction-column justify-center">
								<view class="flex align-center justify-between">
									<view :class="biliType>=75?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
									<view class="width-22 height-22 radiu-50b" 
									:style="biliType>=75?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
								</view>
								<text class="font-20 text-right" :style="'color: '+theme.fu_text">75%</text>
							</view>
							<view @click="selectBili(100)" class="flex-1 height-100b flex direction-column justify-center">
								<view class="flex align-center justify-between">
									<view :class="biliType>=100?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
									<view class="width-22 height-22 radiu-50b" 
									:style="biliType>=100?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
								</view>
								<text class="font-20 text-right" :style="'color: '+theme.fu_text">100%</text>
							</view>
						</view>
						
						<!-- 可用 -->
						<view style="white-space: nowrap;"
							class="width-388 margin-16-auto height-58 flex align-center justify-between">
							<text class="font-26 color-C3C3C3">{{i18n.lever.available}}</text>
							<view class="">
								<text style="white-space: nowrap;"
									class="font-26 nummedium-font margin-l-10">{{buyType=='buy'?Number(count_xh_usdt).toFixed(4):Number(coinInfo.balance).toFixed(coinInfo.price_jd)}}{{buyType=='buy'?'USDT':coinInfo.name}}</text>
							</view>
						</view>
						<view class="width-388 margin-0-auto">
							<button @click="buy_contract()" v-if="buyType=='buy'"
								class="cu-btn loginBtn bj-00C481">{{i18n.lever.buyIn}}</button>
							<button @click="buy_contract()" v-if="buyType=='sell'"
								class="cu-btn loginBtn bj-FF4040">{{i18n.lever.sellout}}</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">
							<view class="flex-1 font-26 color-C3C3C3 text-left">{{i18n.lever.price}}</view>
							<view class="flex-1 font-26 color-C3C3C3 text-right">{{i18n.lever.volume}}</view>
						</view>
						<view class="width-272 height-260 margin-10-auto flex" style="flex-direction: column-reverse;">
							<view @click="marketType == 'limit'? (inputPirce=item[0]) :''" 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-24 color-FF4040 text-left hidden-nowrap-ellipsis-1">
									{{Number(item[0]).toFixed(coinInfo.price_jd)}}
								</view>
								<view class="flex-1 font-24 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>
								<!-- <i v-show="ifmyself(item[0])" class="cuIcon-title color-FF4040 absolute" style="right: -26rpx;"></i> -->
							</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 @click="marketType == 'limit'? (inputPirce=item[0]) :''" 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-24 color-00C481 text-left hidden-nowrap-ellipsis-1">
									{{Number(item[0]).toFixed(coinInfo.price_jd)}}
								</view>
								<view class="flex-1 font-24 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>
								<!-- <i v-show="ifmyself(item[0])" class="cuIcon-title color-00C481 absolute" style="right: -26rpx;"></i> -->
							</view>
						</view>
					</view>
				</view>
				<!-- tab选择 -->
				<view class="width-100b height-72 padding-w-40 flex align-center justify-between">
					<view @click="tabsChange(index)"
						class="flex-1 height-46 flex direction-column align-center justify-between"
						v-for="(item,index) in tablist" :key="index">
						<text :class="current==index?theme.selectcolor:theme.color" class="font-28">{{item}}</text>
					</view>
				</view>
			</view>
			<!-- swiper必须设置flex:1，因为swiper有默认的高度，只有设置flex:1才可以铺满页面  -->
			<swiper :class="orderList.length>2?'swiper':'swiper_no'" class="" :current="current"
				@animationfinish="animationfinish" @change="onswiperchange">
				<swiper-item v-for="(item,index) in tablist" class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh"
						:price_jd="coinInfo.price_jd">
						<listModule @revocation="revocation" :currentIndex="current" :list="orderList"
							:loading="loading" :color="theme.text" :background="theme.bg" :fu_color="theme.fu_color">
						</listModule>
					</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"
						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"
						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">/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="midList.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>
					<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 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.lever.shiming}}</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import listModule from './components/list_module.vue'
	export default {
		components: {
			listModule,
		},
		data() {
			return {
				count_xh_usdt: 0, //用户可用剩余usdt
				midList: [], //左侧币种列表
				midList_copy: [],
				coinInfo: {}, //选中的当前币种信息

				statusBar: uni.getSystemInfoSync().statusBarHeight,

				marketState: false,
				marketType: 'market', //交易类型 market=市场交易  limit=限价交易

				tablist: ['未成交', '部分成交', '完全成交', '已撤销'],
				current: 0,

				inputPirce: '', //当前最优价格
				buyType: 'buy', //买涨买跌类型

				inputHans: '', //数量
				// sliderValue: 0, //滑块数值
				biliType: 0, //比例

				order_id: '', //选中订单ID
				orderList: [], //币币交易订单列表
				state: 'more',
				page: 1,
				loading: true,

				lastData: '',
				tick: "",

				leftshow: false,
				lefttiming: null,
				TSShow: false,
				shimingTitle: '请先完成实名认证',

				BtnFlag: true, //按钮防重复点击

				leftcurrent: 1,
				searchVal: '',
				myCoinList: [],
				myCoinList_copy: [],

				timer: null,
				unsettledTimer:null,
				
				theme: '',
			}
		},
		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';
					}
				}
			},
		},
		watch: {
			buyType(){
				this.getLeft(this.coinInfo.symbol)
				this.getWallet()
			},
			current(oldValue, newValue) {
				if (oldValue != newValue) {
					this.orderList = []
					if (this.timer) clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						this.refresh_list()
						// console.log('3s后执行');
					}, 500)
				}

			},
			leftshow(item) {
				if (item == false) {
					this.searchVal = ''
					// clearInterval(this.lefttiming)
				} else {
					this.getmy_coinList()
					this.getLeft(this.coinInfo.symbol)
					// this.setTimeLeft()
				}
			}
		},
		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
				}
			},
		},
		onLoad(e) {
			const symbol = (e && e.symbol) ? e.symbol : (getApp().globalData.symbol || '')
			if (symbol) {
				console.log(symbol)
				getApp().globalData.symbol = symbol
				if (e && e.type) {
					this.buyType = e.type
				}
			}
			this.getLeft(symbol)
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			}else{
				this.theme = this.$store.state.lightTheme
			}
			if(this.current==0){
				this.unsettledTimer = setInterval(()=>{
					if(this.coinInfo.symbol == undefined) return
					this.page = 1
					this.unsettledOrder()
				},1500)
			}
			if (getApp().globalData.symbol) {
				this.midList.forEach((item, index) => {
					if (item.symbol == getApp().globalData.symbol) {
						this.coinInfo = item
					}
				})
			} else {
				getApp().globalData.symbol = this.coinInfo.symbol
				console.log(getApp().globalData.symbol)
			}
			this.onSocketMessage()
			if (this.lastData.close) {
				this.lastData.close = Number(this.coinInfo.close)
			}
			this.linkSocket() //链接socket订阅
			this.tablist = this.i18n.lever.tablist
			this.TSShow = false
			if (getApp().globalData.buyType) {
				this.buyType = getApp().globalData.buyType
			}

			this.getWallet()
			uni.$on('reConnect', (res) => {
				console.log("重连WebSocket")
				this.onSocketMessage()
			})
		},
		onHide: function() {
			clearInterval(this.unsettledTimer)
			getApp().globalData.symbol = ""
			uni.$off('reConnect')
			this.cancelSocket() //取消socket订阅
		},
		methods: {
			ifmyself(price) {
				if (this.orderList.length == 0 || this.current == 2 || this.current == 3) return false
				// console.log(this.orderList)
				// console.log(item)
				if (price) {
					var temp = false
					temp = this.orderList.some((item) => {
						return item.price == price
					})
					return temp
				} else {
					return false
				}
			},
			onSwitchMarket(type) {
				if (type === 'spot') return
				if (type === 'contract') {
					getApp().globalData.symbol = this.coinInfo.symbol || ''
					uni.switchTab({
						url: '/pages/contract/index'
					})
				}
			},
			// 收藏币种
			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)
						}
					}
				})
			},
			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.getmy_coinList()
				this.getWallet()
				setTimeout(() => {
					this.$refs.paging.complete();
				}, 1500);
			},
			// 选择数量比例
			selectBili(bili) {
				this.biliType = bili
				if (this.buyType == 'buy') {
					if (this.biliType == 100) {
						this.inputHans = Math.floor(this.count_xh_usdt * 100) / 100 //只保留小数点前两位
					} else {
						this.inputHans = (this.count_xh_usdt * this.biliType / 100).toFixed(2)
					}
				}
				if (this.buyType == 'sell') {
					if (this.biliType == 100) {
						this.inputHans = Math.floor(this.coinInfo.balance * 10000) / 10000 //只保留小数点前两位
					} else {
						this.inputHans = (this.coinInfo.balance * this.biliType / 100).toFixed(2)
					}
				}
			},
			// 获取我的资产
			getWallet() {
				this.post('/wallet/wallet_index').then((res) => {
					console.log('我的资产', res)
					if (res.code == 1) {
						this.count_xh_usdt = res.data.all.usdt_num
					}
				})
			},
			// 下拉加载更多
			pullTorefresh() {
				if (this.state == 'over') return
				if (this.loading == true) return
				this.page++
				console.log('下拉加载第'+this.page+'页')
				this.get_orderList()
			},
			// 刷新重置订单列表
			refresh_list() {
				this.orderList = []
				this.page = 1
				this.state = 'more'
				this.get_orderList()
			},
			// 获取未成交订单列表
			unsettledOrder(){
				this.post('/market/get_order', {
					page: 1,
					size: this.page * 10,
					symbol: this.coinInfo.symbol,
					status: this.current
				}).then(res => {
					console.log(this.coinInfo.symbol+'未成交订单 size'+ this.page * 10, res.data.data)
					if (res.code == 1) {
						this.loading = false
						this.orderList = res.data.data
					}
				})
			},
			// 获取交易订单列表
			get_orderList() {
				if(this.current==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 = {
						page: this.page,
						symbol: this.coinInfo.symbol,
						status: this.current
					}
					if(this.current==4){
						obj = {
							page: this.page,
							status: 'all'
						}
					}
					this.post('/market/get_order', obj).then(res => {
						console.log('币币交易订单列表', res)
						if (res.code == 1) {
							this.loading = false
							this.orderList = this.orderList.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切换
			tabsChange(index) {
				this.current = index;
			},
			onswiperchange(e) {
				// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				let index = e.target.current || e.detail.current;
				this.tabsChange(index);
				// #endif
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.current = current;
			},
			// 撤销
			revocation(obj) {
				// console.log('对象', id)
				if (!this.BtnFlag) return
				this.BtnFlag = false
				this.post('/market/cancel_order', {
					order_id: obj.id,
					coin_id: obj.coin_id
				}, true).then((res) => {
					console.log('撤销订单', res)
					this.BtnFlag = true
					if (res.code == 1) {
						this.tos(res.msg)
						this.current = 3
						this.getWallet()
					}
				})
			},
			// 币币交易下单
			buy_contract() {
				if (!this.BtnFlag) return
				if (this.marketType == 'limit') {
					if (this.inputPirce == '') {
						this.tos(this.i18n.lever.tag1)
						return
					}
				}
				if (this.inputHans == '') {
					this.tos(this.i18n.lever.numInput)
					return
				}
				this.BtnFlag = false
				this.post('/market/start_order', {
					cart: this.marketType,
					type: this.buyType,
					num: this.inputHans,
					price: this.marketType == 'limit' ? this.inputPirce : this.lastData.close,
					coin_id: this.coinInfo.id,
				}, true).then((res) => {
					console.log('币币交易下单', res)
					this.BtnFlag = true
					if (res.code == 1) {
						if (this.buyType == 'sell') {
							// this.coinInfo.balance -= this.inputHans
							this.getLeft(this.coinInfo.symbol)
						} else {
							this.getWallet()
						}
						this.inputHans = ''
						this.inputPirce = ''
						this.tos(res.msg)
						if (this.current == 0) {
							this.refresh_list()
						} else {
							this.current = 0
						}
					} else {
						if (res.data.jump == 1) {
							this.shimingTitle = res.msg
							this.TSShow = true
						}
					}
				})
			},
			getmy_coinList() {
				this.post('/my/collect_list',{
					type:'2'
				}).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('/market/get_coin').then(res => {
					if (res.code == 1) {
						console.log('币种列表', res)
						if (symbol == undefined) {
							this.cancelSocket() //取消socket订阅
						}
						console.log(symbol)
						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
						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]
				}
				// clearInterval(this.lefttiming)
				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;
	}
	.fixed1 {
		width: 100%;
		position: fixed;
		// top: 0;
		z-index: 10010;
		background-color: #F6F8FB;
	}

	.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;
		border: 1px solid rgba(159, 159, 159, 0.2);
		border-radius: 4rpx;
		overflow: hidden;
		transition: 0.3s;
		position: absolute;
		z-index: 10100;
	}

	.heng {
		width: 50rpx;
		height: 4rpx;
		margin: 10 auto;
		background: #06C38D;
	}

	.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: 388rpx;
		height: 74rpx;
		box-shadow: 0rpx 6rpx 10rpx rgba(16, 194, 168, 0.18);
		border-radius: 4rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.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: #06C38D;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
