<template>
	<view class="entrustOrderList">
		<!-- 四个tab -->
		<view class="tab">
			<view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">{{ i18n.CurrentEntrust }}
			</view>
			<view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">{{ i18n.Position }}
			</view>
			<view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">{{ i18n.Closed }}
			</view>
			<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">{{ i18n.Revoked }}
			</view>
		</view>
		<!-- 卡片列表 -->
		<view class="content" v-if="list.length">
			<view class="card" v-for="(item, index) in list" :key="index">
				<view class="header">
					<text :class="item.direction" >{{item.direction}}</text>
					<text class="time">{{item.timestr}}</text>
					<text class="closeTimeTitle" v-show="type === 2 || type === 3">{{ i18n.CloseTime }}</text>
					<text class="closeTime" v-show="type === 2">{{item.timestr2}}</text>
					<view class="closeBtn" v-show="type === 0 || type === 1" @click="closeItem(item,index)">{{
                            i18n.close
                    }}</view>
				</view>

				<view class="infoBody">
					<view class="item">
						<!-- 公共的 -->
						<view class="left">
							<view class="title">{{ item.pair }}</view>
							<view class="value">{{item.openedPrice}}</view>
							<view class="title">{{ i18n.Bond }}</view>
							<view class="value">{{item.bondAmount}}</view>
							<view class="title" v-show="type !== 3&&type !== 0">{{ i18n.StyPrice }}</view>
							<view class="value" v-show="type !== 3&&type !== 0">{{item.winStopPrice}}</view>
						</view>
						<!-- 公共的 -->
						<view class="center">
							<view class="title">{{ i18n.AmountLeverage }}</view>
							<view class="value">{{item.hand}} * {{item.leverage}}</view>
							<view class="title">{{ i18n.Fee }}</view>
							<view class="value">{{item.fee}}</view>
							<view class="title" v-show="type !== 3&&type !== 0">{{ i18n.StsPrice }}</view>
							<view class="value" v-show="type !== 3&&type !== 0">{{item.lossStopPrice}}</view>
						</view>
						<!-- Current Entrust 和  Position-->
						<view class="right" v-show="type === 0 || type === 1">
							<view class="title">{{ i18n.CurrentPrice }}</view>
							<view class="value" style="color:#F4506A;">{{marketDetail.close}}</view>
							<view class="title" v-show="type === 0">{{ i18n.status }}</view>
							<view class="value" v-show="type === 0">{{item.status}}</view>
							<view class="title" v-show="type === 1">{{ i18n.do }}</view>
							<view class="value" style="color:#00E8A2;" v-show="type === 1" @click="getStopLimit(item)">
								Stop/Limit</view>
							<view class="title"v-show="type === 1&&type === 2">{{ i18n.ExpectProfit }}</view>
							<view class="value" v-show="type === 1"
								:style="parseFloat(getItem(item.direction=='buy'?(marketDetail.close-item.openedPrice)*item.hand:(item.openedPrice-marketDetail.close)*item.hand))>=0?'color:#00E8A2':'color:#F4506A'">
								{{getItem(item.direction=='buy'?(marketDetail.close-item.openedPrice)*item.hand:(item.openedPrice-marketDetail.close)*item.hand)}}
							</view>
							<view class="value" style="color:#00E8A2;" v-show="type === 2">0</view>
						</view>
						<!-- Closed -->
						<view class="right" v-show="type === 2">
							<view class="title">{{ i18n.ClosePrice }}</view>
							<view class="value" style="color:#00E8A2;">{{item.currentPrice}}</view>
							<view class="title">{{ i18n.status }}</view>
							<view class="value">{{item.status}}</view>
							<view class="title">{{ i18n.PL }}</view>
							<view class="value" :style="item.profitAmount-item.fee>=0?'color:#00E8A2;':'color:#F4506A'">
								{{item.profitAmount-item.fee}}</view>
						</view>
						<!-- Revoked -->
						<view class="right" v-show="type === 3">
							<view class="title">{{ i18n.status }}</view>
							<view class="value" style="color:#F4506A;">{{item.status}}</view>
							<view class="title">{{ i18n.PL }}</view>
							<view class="value" style="color:#00E8A2;">
								<!-- {{item.currentPl}} --> 0
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>


		<!-- close确认框 -->
		<u-modal :show="closeModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
			:title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="closeConfirm" @cancel="closeModalShow = false"
			confirmColor="#00E8A2" cancelColor="#96959E">
		</u-modal>

		<!-- stop确认框 -->
		<u-modal :show="stopModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
			:title="i18n.StopLimit" :content='i18n.WarmTipsText' @confirm="stopConfirm" @cancel="stopModalShow = false"
			confirmColor="#00E8A2" cancelColor="#96959E">
			<view class="stopModel">
				<view class="title">
					<text class="left">{{ i18n.StyPrice }}</text>
					<text class="right">{{ i18n.ExpectProfit }} {{ profit }}</text>
				</view>
				<view class="numberInput">
					<button class="btn sub" :class="{ disabled: stySubBtnDisabled || styValue <= 0 }"
						:disabled="stySubBtnDisabled" @click="styValueChange('sub')"></button>
					<input class="number" type="number" v-model="styValue" @input="stopModalChange" />
					<button class="btn add" @click="styValueChange('add')"></button>
				</view>
				<view class="title">
					<text class="left">{{ i18n.StsPrice }}</text>
					<text class="right">{{ i18n.ExpectLoss }} {{ loss }}</text>
				</view>
				<view class="numberInput">
					<button class="btn sub" :class="{ disabled: stsSubBtnDisabled || stsValue <= 0 }"
						:disabled="stsSubBtnDisabled" @click="stsValueChange('sub')"></button>
					<input class="number" type="number" v-model="stsValue" @input="stopModalChange"/>
					<button class="btn add" @click="stsValueChange('add')"></button>
				</view>
			</view>


		</u-modal>

		<u-empty :text="i18n.Dataisempty" mode="data" v-if="!list.length"></u-empty>
	</view>
</template>

<script>
	import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
	const COMPONENT_NAME = 'transaction'
	let timer1 = null;
	let timer2 = null;
	export default {
		components: {
			KeyValueRow
		},
		name: COMPONENT_NAME,
		props: {

			marketDetail: {
				type: Object,
				default () {

				}
			},
			symbol: {
				type: Object,
				default () {

				}
			},
			coin: { // 数字货币名称
				type: String,
				default () {
					return 'BTC'
				}
			},
			currency: { // 货币名称
				type: String,
				default () {
					return 'USDT'
				}
			},
			coinAmount: { // 货币数量
				type: Number,
				default () {
					return 1
				}
			},
			bgTransparent: { // 背景是否透明
				type: Boolean,
				default () {
					return false
				}
			},
		},
		data() {
			return {
				list: [],
				status: 'undone',
				closeModalShow: false,
				stopModalShow: false,
				type: 0,
				test: 0,
				dealList: [{
						dealType: 'long'
					},
					{
						dealType: 'long'
					},
				],
				styValue: 0,
				stsValue: 0,
				stySubBtnDisabled: false,
				stsSubBtnDisabled: false,
				// 撤销订单数据
				itemData: {},
				// 设置止盈数据
				stopLimitData: {},
				profit:0,
				loss:0
			}
		},
		computed: {
			i18n() {
				return this.$t("markets");
			},
		},
		watch: {
			deep:true,
			symbol: {
				handler: function() {
					this.getContractOrderList()
				}
			},

		},
		mounted() {
			this.getContractOrderList()
		},
		//全局事件在组件实例创建完成定义
		created() {
			uni.$on('upData', num => {
				if(num){
					this.getContractOrderList()
				}
			})
		},
		onHide() {
			clearTimeout(timer2);
			clearInterval(timer2);
			timer1 = null;
			timer2 = null;
		},
		methods: {
			stopModalChange(){
				if(this.stopLimitData.direction==='buy'){
					if(this.styValue)
					this.profit=this.getItem((this.styValue-this.stopLimitData.openedPrice)*this.stopLimitData.hand)
					if(this.stsValue)
					this.loss=this.getItem((this.stsValue-this.stopLimitData.openedPrice)*this.stopLimitData.hand)
					
				}else{
					if(this.styValue)
					this.profit=this.getItem((this.stopLimitData.openedPrice-this.styValue)*this.stopLimitData.hand)
					if(this.stsValue)
					this.loss=this.getItem((this.stopLimitData.openedPrice-this.stsValue)*this.stopLimitData.hand)
				}
			},
			getItem(i) {
				i = parseFloat(i.toPrecision(10))
				i = String(i)
				return i.substring(0, i.indexOf(".") + 9);
			},
			// 获取设置止盈数据
			getStopLimit(i) {
				this.stopLimitData = i
				this.stopModalShow = true
				this.styValue=0;
				this.stsValue=0;
				this.profit=0
				this.loss=0
			},
			
			// 获取撤销订单
			closeItem(item, i) {
				this.itemData = item
				this.closeModalShow = true
			},
			// 合约订单列表
			getContractOrderList() {
				const orderList = this.$api.contractOrderList({
					"pair": this.symbol.pair,
					"status": this.status,
				});
				orderList.then(res => {
					this.list = res.data
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].addTime) {
							this.list[i].timestr = this.$index.formatyymmddhhmmss(this.list[
								i].addTime)
						}
						if (this.list[i].closedTime) {
							this.list[i].timestr2 = this.$index.formatyymmddhhmmss(this.list[
								i].closedTime)
						}

					}
				});
			},
			/**
			 * 类型改变
			 * @param {*} type 
			 */
			onChangeType(type = 0) {
				this.type = type
				if (this.type == 0) {
					this.status = 'undone'
				}
				if (this.type == 1) {
					this.status = 'opened'
				}
				if (this.type == 2) {
					this.status = 'closed'
				}
				if (this.type == 3) {
					this.status = 'revoked'
				}
				this.getContractOrderList()
			},
			/**
			 * close确认弹窗
			 */
			closeConfirm() {
				// 类型是undo调用 订单撤销
				if (this.type == 0) {
					const orderList = this.$api.contractCancel({
						"orderNo": this.itemData.orderNo,
					});
					orderList.then(res => {
						uni.$u.toast(this.$t("markets").Succeeded)
						this.closeModalShow = false
						this.getContractOrderList()
					});
				}
				// 类型是opened 调用 合约订单平仓
				if (this.type == 1) {
					const orderList = this.$api.contractClosed({
						"orderNo": this.itemData.orderNo,
					});
					orderList.then(res => {
						uni.$u.toast(this.$t("markets").Succeeded)
						this.closeModalShow = false
						setTimeout(() => {
							this.getContractOrderList()
						}, 600)
					});
				}
			},
			/**
			 * stop确认弹窗
			 */
			stopConfirm() {
				if (this.styValue < 0 || this.stsValue < 0) {
					uni.showToast({
						title: this.i18n.lessThan,
						icon: 'none',
						duration: 2000 //持续时间为
					})
					return;
				}
				const orderList = this.$api.setWinOrLossStopPrice({
					"orderNo": this.stopLimitData.orderNo,
					"winStopPrice": this.styValue,
					"lossStopPrice": this.stsValue,
				});
				orderList.then(res => {
					uni.$u.toast(this.$t("markets").Succeeded)
					this.stopModalShow = false
					setTimeout(() => {
						this.getContractOrderList()
					}, 600)
				});
			},
			/**
			 * styValue值变化
			 */
			styValueChange(type = 'sub') {
				if (type === 'sub') { // 减操作
					this.styValue = parseInt(this.styValue) // 取整
					this.styValue -= 1;
					if (this.styValue <= 0) {
						this.stySubBtnDisabled = true;
						this.styValue = 0
					} else {
						this.stySubBtnDisabled = false;
					}
				} else { // 加操作
					this.styValue = parseInt(this.styValue) // 取整
					this.styValue += 1;
					if (this.styValue <= 0) {
						this.stySubBtnDisabled = true;
						this.styValue = 0
					} else {
						this.stySubBtnDisabled = false;
					}
				}
			},
			/**
			 * stsValue值变化
			 */
			stsValueChange(type = 'sub') {
				if (type === 'sub') { // 减操作
					this.stsValue = parseInt(this.stsValue) // 取整
					this.stsValue -= 1;
					if (this.stsValue <= 0) {
						this.stsSubBtnDisabled = true;
						this.stsValue = 0
					} else {
						this.stsSubBtnDisabled = false;
					}
				} else { // 加操作
					this.stsValue = parseInt(this.stsValue) // 取整
					this.stsValue += 1;
					if (this.stsValue <= 0) {
						this.stsSubBtnDisabled = true;
						this.stsValue = 0
					} else {
						this.stsSubBtnDisabled = false;
					}
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-empty {
		top: 500% !important;
	}

	/deep/ .u-modal__content__text {
		color: #96959E !important;
	}

	.entrustOrderList {
		position: relative;

		.tab {
			display: flex;
			background: #211F32;

			.item {
				height: 64rpx;
				line-height: 64rpx;
				flex: 1;
				font-size: 24rpx;
				text-align: center;

				&.select {
					background: #323045;
					color: #00E8A2;
				}
			}


		}

		.content {
			padding: 32rpx;

			.card {
				position: relative;
				font-size: 24rpx;
				color: #A1A0A8;
				background: #211F32;
				border-radius: 20rpx;
				padding: 24rpx 32rpx;
				margin-bottom: 30rpx;

				.header {
					.buy {
						color: #00E8A2;
						margin-right: 28rpx;
					}
					.sell {
						color: #F4506A;
						margin-right: 28rpx;
					}

					.time {
						margin-right: 16rpx;
					}

					.closeTimeTitle {
						margin-right: 16rpx;
					}

					.closeBtn {
						position: absolute;
						right: 32rpx;
						top: 20rpx;
						display: inline-block;
						width: 98rpx;
						height: 48rpx;
						border-radius: 8rpx;
						line-height: 48rpx;
						background-color: rgba($color: #F4506A, $alpha: 0.1);
						font-size: 24rpx;
						text-align: center;
						color: #F4506A;
					}
				}

				.infoBody {
					.item {
						display: flex;

						.title {
							margin-top: 30rpx;
							line-height: 32rpx;
						}

						.value {
							color: #FFFFFF;
						}

						.left {
							flex: 1;
							text-align: left;
						}

						.center {
							// flex: 1;
							text-align: center;
						}

						.right {
							flex: 1;
							text-align: right;
						}
					}
				}


			}
		}

		/deep/.u-popup__content {
			background: #323045;

			.u-modal__title {
				color: #fff;
			}

			.u-modal__content__text {
				text-align: center;
			}
		}

		.stopModel {
			width: 560rpx;
			font-size: 24rpx;

			.title {
				display: flex;
				justify-content: space-between;
				width: 560rpx;
				margin: 24rpx 0;

				.left {}

				.right {
					color: #A1A0A8;
				}
			}

			.numberInput {
				display: flex;
				height: 88rpx;
				background: #211F32;
				border-radius: 32rpx;
				overflow: hidden;

				.btn {
					width: 80rpx;

					background: #16141f;
					padding: 0;
					border-radius: 0;

					&.sub {
						background-image: url(../../static/maskets/sub.png);
						background-repeat: no-repeat;
						background-size: 32rpx;
						background-position: 24rpx 28rpx;
					}

					&.add {
						background-image: url(../../static/maskets/add.png);
						background-repeat: no-repeat;
						background-size: 32rpx;
						background-position: 24rpx 28rpx;
					}

					&.button-hover {
						background: #211F32;

						&.sub::after {
							background-image: url(../../static/maskets/sub.png);
							background-repeat: no-repeat;
							background-size: 64rpx;
							background-position: 46rpx 56rpx;

						}

						&.add::after {
							background-image: url(../../static/maskets/add.png);
							background-repeat: no-repeat;
							background-size: 64rpx;
							background-position: 46rpx 56rpx;

						}
					}

					&.disabled {
						background: #211F32;

						&.sub::after {
							background-image: url(../../static/maskets/sub.png);
							background-repeat: no-repeat;
							background-size: 64rpx;
							background-position: 46rpx 56rpx;

						}
					}
				}

				.number {
					flex: 1;
					border-left: 2rpx solid #323045;
					border-right: 2rpx solid #323045;
					text-align: center;
					height: 88rpx;
					;
					line-height: 88rpx;
					font-size: 24rpx;
				}
			}
		}



	}
</style>
