<template>
	<view class="transaction">
		<view class="tab" :class="type == 'buy' ? 'buy' : ''">
			<view class="buy" :class="type == 'buy' ? 'select' : ''" @click="onChangeType('buy')">{{ i18n.LONG }}</view>
			<view class="sell" :class="type == 'sell' ? 'select' : ''" @click="onChangeType('sell')">{{ i18n.SHORT }}
			</view>
		</view>
		<view class="priceSelectBody">
			<view class="priceTypeInput" @click="priceSelectListShow = true">{{ priceTypeList[priceTypeValue].text }}
			</view>
			<view class="shade" v-show="priceSelectListShow" @click="priceSelectListShow = false"></view>
			<view class="priceTypeList" v-show="priceSelectListShow">
				<view class="selectItem" :class="{ select: priceTypeValue === index }"
					v-for="(item, index) in priceTypeList" :key="index" @click="selectChange(index)">
					{{ item.text }}
				</view>
			</view>
		</view>

		<view class="coinPrice">
			<view class="noInput" v-show="priceTypeValue === 0">{{ i18n.MarketOptimalPrice }}</view>
			<u-input class="input" v-show="priceTypeValue !== 0" v-model="coinPrice" color="#A1A0A8" fontSize="20rpx"
				border="none" :placeholder="i18n.enterAddressTips">
			</u-input>
			<view class="currencyName">{{ symbol.baseSymbol }}</view>
		</view>

		<view class="twoInput">
			<view class="leverageSelectBody">
				<view class="leverageInput" @click="leverageListShow = true">{{ leverageValue }}</view>
				<view class="shade" v-show="leverageListShow" @click="leverageListShow = false"></view>
				<view class="leverageList" v-show="leverageListShow">
					<view class="selectItem" :class="{ select: leverageValue === item }"
						v-for="(item, index) in contractConfig.leverage" :key="index"
						@click="leverageSelectChange(item)">
						{{ item }}
					</view>
				</view>
			</view>

			<view class="coinAmount">
				<u-input class="input" v-model="coinAmount" color="#A1A0A8" fontSize="20rpx" border="none"
					:placeholder="i18n.enterAddressTips">
				</u-input>
				<view class="currencyName">{{ symbol.coinSymbol }}</view>
			</view>
		</view>
		<!-- 可用 Usable-->
		<key-value-row class="text" :keyName="i18n.Usable" :value="`${contractConfig.useCapital}${symbol.baseSymbol}`"
			lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
		</key-value-row>
		<!-- 总计 Total-->
		<key-value-row class="text" :keyName="i18n.Total"
			:value="`${(priceTypeValue === 0?marketDetail.close*coinAmount:coinPrice*coinAmount).toFixed(4)}${symbol.baseSymbol}`"
			lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
		</key-value-row>
		<!-- 债券 Bond-->
		<key-value-row class="text" :keyName="i18n.Bond"
			:value="`${(priceTypeValue === 0?coinAmount*marketDetail.close/leverageValue:coinAmount*coinPrice/leverageValue).toFixed(4)}${symbol.baseSymbol}`"
			lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
		</key-value-row>
		<!-- 手续费 -->
		<key-value-row class="text" :keyName="i18n.Fee"
			:value="`${(priceTypeValue === 0?coinAmount*marketDetail.close/leverageValue*contractConfig.rate:coinAmount*coinPrice/leverageValue*contractConfig.rate).toFixed(4)}${symbol.baseSymbol}`"
			lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
		</key-value-row>

		<u-button class="button" :color="type == 'buy' ? '#00E8A2' : '#F4506A'" throttleTime="500" @click="contractOrder">
			{{ type === 'buy' ? `${i18n.buyLong}${symbol.coinSymbol}` : `${i18n.sellSHORT}${symbol.coinSymbol}` }}
		</u-button>
	</view>
</template>

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

			type: { // 货币名称
				type: String,
				default () {
					return 'buy'
				}
			},
			contractConfig: {
				type: Object,
				default: () => {
					
				}
			},
			symbol: {
				type: Object,
				default () {

				}
			},
			marketDetail: { // 数字货币价格
				type: Object,
				default () {

				}
			},
			bgTransparent: { // 背景是否透明
				type: Boolean,
				default () {
					return false
				}
			},
		},
		
		data() {
			return {
				math:null, 
				priceSelectListShow: false,
				priceTypeValue: 0,
				priceTypeList: [{
						value: 0,
						text: this.$t("markets").MarketPrice
					},
					{
						value: 1,
						text: this.$t("markets").LimitPrice
					},
				],
				leverageListShow: false,
				leverageValue: 10,
				coinPrice: 0,
				coinAmount: 0
			}
		},
		computed: {
			i18n() {
				return this.$t("markets");
			},
		},
		 watch: {
		    contractConfig: {
		      deep: true,
		      handler: function (n,i) {
		        this.leverageValue = n.leverage[0];
		      }
		    }
		  },
		mounted() {
			this.leverageValue = this.contractConfig.leverage[0];
			this.coinPrice = this.marketDetail.close
		},
		methods: {
			
			onChangeType(type) {
				this.$emit('onChangeType', type);
			},
			selectChange(index) {
				this.priceTypeValue = index;
				this.priceSelectListShow = false;
				this.coinPrice = this.marketDetail.low
			},
			leverageSelectChange(item) {
				this.leverageValue = item;
				this.leverageListShow = false;
			},
			contractOrder() {
				var data={
					// direction:this.type==='buy'?'long':'short',
					direction:this.type,
					amount:this.coinAmount,
					pair:this.symbol.pair,
					leverage:this.leverageValue,
					tradeModel:this.priceTypeValue===0?'market':'limit',
					price:this.priceTypeValue===0?this.marketDetail.low:this.coinPrice,
					remarks:'1'
				}
				// #ifdef H5
				data.source='H5'
				// #endif
				// #ifdef APP-PLUS
				data.source='android'
				// #endif
				console.log(data);
				const contractOrder = this.$api.contractOrder(data);
				contractOrder.then(res => {
					uni.showToast({
						title: this.$t("markets").Succeeded,
						icon: 'success',
						duration: 1500
					})
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.transaction {
		width: 444rpx;

		.tab {
			display: flex;
			border-radius: 16rpx;
			background-color: rgba($color: #F4506A, $alpha: 0.1);

			&.buy {
				background-color: rgba($color: #00E8A2, $alpha: 0.1);
			}

			.buy {
				flex: 1;
				text-align: center;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 24rpx;
				color: #F4506A;
				border-radius: 16rpx;

				&.select {
					color: #15141F;
					background-color: #00E8A2;
				}
			}

			.sell {
				flex: 1;
				text-align: center;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 24rpx;
				color: #00E8A2;
				border-radius: 16rpx;

				&.select {
					color: #15141F;
					background: #F4506A;
				}
			}
		}


		.priceSelectBody {
			position: relative;
			height: 64rpx;
			margin-top: 24rpx;
			background: #323045;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.priceTypeInput {
				position: relative;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 20rpx;
				color: #A1A0A8;


				&::after {
					display: block;
					position: absolute;
					content: '';
					background-image: url(../../static/maskets/ic_ma_arrow_down.png);
					background-repeat: no-repeat;
					background-size: 32rpx;
					width: 32rpx;
					height: 32rpx;
					top: 16rpx;
					right: 0rpx;
				}
			}

			.shade {
				position: fixed;
				top: 220rpx;
				left: 0;
				width: 750rpx;
				height: 70vh;
				background: transparent;
				// background: #fff;
				z-index: 0;
			}

			.priceTypeList {
				overflow: hidden;
				position: absolute;
				top: 60rpx;
				left: 0rpx;
				z-index: 2;
				background: #15141F;
				border-radius: 10rpx;
				width: 100%;

				.selectItem {
					height: 64rpx;
					line-height: 64rpx;
					font-size: 28rpx;
					padding-left: 20rpx;

					&.select {
						background: #3f3e48;
					}
				}
			}

		}

		.coinPrice {
			position: relative;
			margin-top: 20rpx;
			height: 64rpx;

			.noInput {
				height: 64rpx;
				background: #323045;
				border-radius: 16rpx;
				color: #A1A0A8;
				line-height: 64rpx;
				font-size: 24rpx;
				padding-left: 20rpx;
			}

			.input {
				height: 64rpx;
				background: #323045;
				border-radius: 16rpx;
				color: #A1A0A8;
				line-height: 64rpx;
				font-size: 24rpx;
				padding-left: 20rpx !important;
			}

			.currencyName {
				position: absolute;
				height: 32rpx;
				top: 0rpx;
				right: 20rpx;
				color: #A1A0A8;
				line-height: 64rpx;
				font-size: 24rpx;
			}
		}

		.twoInput {
			margin-top: 20rpx;
			margin-bottom: 10rpx;
			display: flex;

			.leverageSelectBody {
				position: relative;
				width: 212rpx;
				height: 64rpx;
				background: #323045;
				border-radius: 16rpx;
				padding: 0 20rpx;

				.leverageInput {
					position: relative;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 20rpx;
					color: #A1A0A8;


					&::after {
						display: block;
						position: absolute;
						content: '';
						background-image: url(../../static/maskets/ic_ma_arrow_down.png);
						background-repeat: no-repeat;
						background-size: 32rpx;
						width: 32rpx;
						height: 32rpx;
						top: 16rpx;
						right: 0rpx;
					}
				}

				.shade {
					position: fixed;
					top: 220rpx;
					left: 0;
					width: 750rpx;
					height: 70vh;
					background: transparent;
					// background: #fff;
					z-index: 0;
				}

				.leverageList {
					overflow: hidden;
					position: absolute;
					top: 60rpx;
					left: 0rpx;
					z-index: 2;
					background: #15141F;
					border-radius: 10rpx;
					width: 100%;

					.selectItem {
						height: 64rpx;
						line-height: 64rpx;
						font-size: 28rpx;
						padding-left: 20rpx;

						&.select {
							background: #3f3e48;
						}
					}
				}

			}

			.coinAmount {
				position: relative;
				height: 64rpx;
				margin-left: 20rpx;

				.input {
					height: 64rpx;
					background: #323045;
					border-radius: 16rpx;
					color: #A1A0A8;
					line-height: 64rpx;
					font-size: 24rpx;
					padding-left: 20rpx !important;
				}

				.currencyName {
					position: absolute;
					height: 32rpx;
					top: 0rpx;
					right: 20rpx;
					color: #A1A0A8;
					line-height: 64rpx;
					font-size: 24rpx;
				}
			}
		}

		.text {
			margin: 0;
		}

		.button {
			box-sizing: border-box;
			height: 64rpx;
			border-radius: 16rpx;
			font-weight: 700;
			font-size: 24rpx;
			color: #15141F !important;

		}
	}
</style>
