<template>
	<view class="pmain">
		<view class="title">
			<view class="left">{{ i18n.UnitPrice }}</view>
			<view class="num">{{ i18n.Number }}</view>
		</view>
		<view class="sell">
			<view class="item" v-for="(item, index) in bboList.sell" :key="index" @click="depthClick(item)">
				<text class="price">{{ item.price }}</text>
				<text class="num">{{ item.total }}</text>
				<view class="sellbg" :style="`width: ${20 * index}%;`"></view>
			</view>
		</view>
		<view class="currentPriceBody" @click="depthClick(item)">
			<view class="currentPrice">{{marketDetail.close}}</view>
			<view class="transition">≈${{marketDetail.close*marketDetail.usdRate}}</view>
		</view>

		<view class="buy">
			<view class="item" v-for="(item, index) in bboList.buy" :key="index" @click="depthClick(item)">
				<text class="price">{{ item.price }}</text>
				<text class="num">{{ item.total }}</text>
				<view class="buybg" :style="`width: ${20 * index}%;`"></view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	props: {
		item: Object,
		marketDetail: {
			type: Object,
			default: () => {}
		},
		bboList:{
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			popoverVisible: false,
			depthValue: 1,
			sellList: 9,
			buyList: 10,
		}
	},
	computed: {
		i18n() {
			return this.$t("markets");
		},
	},
	methods: {
		depthClick(e) {
			this.popoverVisible = !this.popoverVisible;
		},
		depthChange(e) {
			this.depthValue = e;
			this.$emit('depthChange', e);
		}
	}
}
</script>

<style lang="scss" scoped>
.pmain {
	width: 100%;
	position: relative;
	justify-content: space-between;
	text-align: left;
	color: #A1A0A8;

	.title {
		display: flex;
		margin-bottom: 16rpx;
		font-size: 24rpx;

		.left {
			flex: 1;
		}

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

	.sell {
		overflow: hidden;
		height: 180rpx;

		.item {
			position: relative;
			width: 100%;
			height: 30rpx;
			display: flex;
			font-size: 24rpx;

			.price {
				display: block;
				width: 50%;
				text-align: left;
				z-index: 1;
				color: #F4506A;
			}

			.num {
				display: block;
				width: 50%;
				text-align: center;
				padding-right: 10rpx;
				z-index: 1;
			}

			.sellbg {
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 0;
				background: rgba($color: #F4506A, $alpha: 0.1)
			}

		}

	}

	.buy {
		overflow: hidden;
		height: 180rpx;

		.item {
			position: relative;
			width: 100%;
			height: 30rpx;
			display: flex;
			font-size: 24rpx;

			.price {
				display: block;
				width: 50%;
				text-align: left;
				z-index: 1;
				color: #00E8A2;
			}

			.num {
				display: block;
				width: 50%;
				text-align: center;
				padding-right: 10rpx;
				z-index: 1;
			}

			.buybg {
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 0;
				background: rgba($color: #00E8A2, $alpha: 0.1)
			}

		}

	}


	.currentPriceBody {
		margin: 32rpx 0;

		.currentPrice {
			font-size: 35rpx;
			color: #00E8A2;
		}

		.transition {
			font-size: 24rpx;
		}
	}
}
</style>
