<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.newWord.ordertitle"></myNav>
		<view class="padding-w-30 height-120 flex align-center justify-between">
			<view class="height-80 flex direction-column align-start justify-between">
				<text class="font-32 numbold-font margin-b-6">{{orderObj.curr_name}}/USDT</text>
				<view :class="orderObj.type=='buy'?'buyBtn':'sellBtn'" class="statusBox">{{orderObj.type=='buy'?i18n.lever.buyIn:i18n.lever.sellout}}</view>
			</view>
			<view @click="goTab(orderObj.symbol)" class="padding-w-10 flex align-center justify-end">
				<text class="font-26 color-0165EE nummedium-font">{{i18n.newWord.gotrade}}</text>
				<i class="cuIcon-right font-24 color-0165EE"></i>
			</view>
		</view>
		<view class="">
			<view class="width-700 padding-c-14 margin-0-auto" 
			style="border-top: 1rpx solid rgba(191, 195, 199, 0.2);
			border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.newWord.status}}</text>
					<text class="font-26 nummedium-font">{{statusFilter(orderObj.status)}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.lever.entway}}</text>
					<text class="font-26 nummedium-font">{{orderObj.cart=="limit"?i18n.lever.tap1:i18n.lever.tap2}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.lever.entall}}</text>
					<text class="font-26 nummedium-font">{{orderObj.type=='buy'?orderObj.amount:orderObj.num||0}} {{orderObj.type=='buy'?'USDT':orderObj.curr_name}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.lever.entPrice}}</text>
					<text class="font-26 nummedium-font">{{orderObj.cart=="limit"?orderObj.price+' USDT':i18n.lever.tap2}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.newWord.volume}}</text>
					<text class="font-26 nummedium-font">{{orderObj.count_price || 0}} {{orderObj.curr_name}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.newWord.Avprice}}</text>
					<text class="font-26 nummedium-font">{{orderObj.junjia || 0}} USDT</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-C3C3C3 nummedium-font">{{i18n.newWord.sold_value}}</text>
					<text class="font-26 nummedium-font">${{orderObj.count_num || 0}}</text>
				</view>
			</view>
			<view class="width-700 padding-c-14 margin-0-auto">
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-8B99A2 nummedium-font">{{i18n.newWord.comm_amount}}</text>
					<text class="font-26 color-8B99A2 nummedium-font">{{entrustTheSumVO}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-8B99A2 nummedium-font">{{i18n.lever.free}}</text>
					<text class="font-26 color-8B99A2 nummedium-font">{{orderObj.fee_num || 0}} {{orderObj.fee_curr}}</text>
				</view>
				<view class="height-54 flex align-center justify-between">
					<text class="font-26 color-8B99A2 nummedium-font">{{i18n.newWord.comm_time}}</text>
					<text class="font-26 color-8B99A2 nummedium-font">{{orderObj.createtime || 0}}</text>
				</view>
			</view>
		</view>
		
		<view v-if="list.length" class="margin-t-20"
		:style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text">
				<view class="height-60 padding-w-30 flex align-center justify-between">
					<view class="width-200 height-60 flex align-center">
						<text class="font-22 color-8B99A2">{{i18n.newWord.Trade_time}}</text>
					</view>
					<view class="flex-1 height-60 flex align-center justify-between">
						<text class="font-22 color-8B99A2">{{i18n.lever.closing}}(USDT)</text>
						<text class="font-22 color-8B99A2">{{i18n.lever.num}}({{orderObj.curr_name}})</text>
					</view>
				</view>
				<view v-for="(item,index) in list" :key="index" class="height-60 padding-w-30 flex align-center justify-between">
					<view class="width-200 height-60 flex align-center">
						<text class="font-26 nummedium-font">{{item.createtime}}</text>
					</view>
					<view class="flex-1 height-60 flex align-center justify-between">
						<text class="font-26 nummedium-font">{{item.price}}</text>
						<text class="font-26 nummedium-font">{{item.num}}</text>
					</view>
				</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				coin_id:'',
				orderObj:'',
				list:[],
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			entrustTheSumVO(){
				
				if(this.orderObj.type=='sell'&&this.orderObj.cart=='market'){
					return this.i18n.lever.tap2
				}else{
					if(this.orderObj.amount){
						return this.orderObj.amount + ' USDT'
					}else{
						return '0 USDT'
					}
				}
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
				this.getOrder(option.id,option.coin_id)
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			statusFilter(status){
				if(status==0){
					return this.i18n.lever.tablist[0]
				}else if(status==1){
					return this.i18n.lever.tablist[1]
				}else if(status==2){
					return this.i18n.lever.tablist[2]
				}else if(status==3){
					return this.i18n.lever.tablist[3]
				}else{
					return this.i18n.lever.tablist[0]
				}
			},
			getOrder(id,coin_id){
				this.post('/market/order_con',{
					id:id,
					coin_id:coin_id
				}).then((res) => {
					console.log('订单详情',res)
						if (res.code == 1) {
							this.orderObj = res.data
							if(res.data.detail){
								this.list = res.data.detail
							}
					}
				})
			},
			
			goTab(symbol){
				getApp().globalData.symbol = symbol
				uni.switchTab({
					url: '/pages/transaction/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.statusBox{
		padding: 0 18rpx;
		height: 40rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
	}
	.buyBtn{
		background-color: rgba(0,196,129,0.1);
		color: #00C481;
	}
	.sellBtn{
		background-color: rgba(255,64,64,0.1);
		color: #FF4040;
	}
</style>
