<template>
	<view>
		<view @click="router.push('/pages/transaction/details?id='+item.id+'&coin_id='+item.coin_id)" class="listBox" v-for="(item,index) in list" :key="index"
		:style="'background-color: '+background+';color: '+color">
			<view class="width-100b height-100 flex align-center justify-between" style="border-bottom: 1px solid rgba(209,209,209,0.3)">
				<view class="height-90 flex direction-column align-start justify-center">
					<view class="flex align-center ">
						<text class="font-28 bold-font numbold-font">{{item.type=='buy'?i18n.lever.buyIn:i18n.lever.sellout}}</text>
						<text class="font-26 numbold-font margin-l-10" :style="'color:'+fu_color">{{item.coinname}}</text>
					</view>
					<text class="font-20 numbold-font" :style="'color:'+fu_color">{{item.createtime}}</text>
				</view>
				<button v-if="currentIndex==0||currentIndex==1" @click.stop="revocation(item.id,item.coin_id)"
					class="cu-btn loginBtn" :style="'border: 1rpx solid '+color+';color: '+color">{{i18n.lever.revoke}}</button>
				<text v-if="currentIndex==4" class="font-26 color-0165EE">{{statusFilter(item.status)}}</text>
			</view>
			<view class="width-100b height-80 flex align-center justify-between margin-t-10">
				<view class="flex-1 height-80 flex direction-column align-start justify-around">
					<text class="font-26 nummedium-font">{{Number(item.price).toFixed(price_jd)}}</text>
					<text v-if="item.status==0||item.status==3" class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.entPrice}}</text>
					<text v-if="item.status==1||item.status==2" class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.closing}}</text>
				</view>
				<view class="flex-1 height-80 flex direction-column align-center justify-around">
					<text class="font-26 nummedium-font">{{item.num}}</text>
					<text v-if="item.status==0||item.status==1||item.status==3" class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.entNum}}</text>
					<text v-if="item.status==2" class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.closNum}}</text>
				</view>
				<view class="flex-1 height-80 flex direction-column align-end justify-around">
					<text class="font-26 nummedium-font">{{Number(item.amount).toFixed(price_jd)}}USDT</text>
					<text v-if="item.status==0||item.status==1||item.status==3" class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.entall}}</text>
					<text v-if="item.status==2" class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.closall}}</text>
				</view>
			</view>
			<view class="width-100b height-80 margin-t-10 flex align-center justify-between">
				<view class="flex-1 height-80 flex direction-column align-start justify-around">
					<text class="font-26 nummedium-font">{{item.cart=='limit'?i18n.lever.tap1:i18n.lever.tap2}}</text>
					<text class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.entway}}</text>
				</view>
				<view v-if="item.status==0||item.status==1"
					class="flex-2 height-80 flex direction-column align-center justify-around">
					<text class="font-26 nummedium-font">{{item.createtime}}</text>
					<text class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.creatime}}</text>
				</view>
				<view v-if="item.status==2" class="flex-2 height-80 flex direction-column align-center justify-around">
					<text class="font-26 nummedium-font">{{item.finishtime}}</text>
					<text class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.fintime}}</text>
				</view>
				<view v-if="item.status==3" class="flex-2 height-80 flex direction-column align-center justify-around">
					<text class="font-26 nummedium-font">{{(item.canceltime)}}</text>
					<text class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.revokeTime}}</text>
				</view>
				<view v-if="item.status==0||item.status==1||item.status==3" class="flex-1 height-80 flex direction-column align-end justify-around">
					<text class="font-26 nummedium-font">{{item.have_num}}</text>
					<text class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.traded}}</text>
				</view>
				<view v-if="item.status==2" class="flex-1 height-80 flex direction-column align-end justify-around">
					<text class="font-26 nummedium-font">{{item.free}}</text>
					<text class="font-24 numbold-font" :style="'color:'+fu_color">{{i18n.lever.free}}</text>
				</view>
			</view>
		</view>
		<view class="">
			<view v-if="loading" class="width-100b padding-c-50 flex align-center justify-center">
				<u-loading show mode="flower" size="40"></u-loading>
			</view>
			<view v-if="!loading&&list.length==0"
				class="width-100b padding-c-50 flex direction-column align-center justify-center">
				<text class="font-28 nummedium-font" :style="'color:'+fu_color">{{i18n.lever.nodata}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'listModule',
		props: {
			//标题
			list: {
				type: Array,
				default: []
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			loading: {
				type: Boolean,
				default: false
			},
			price_jd:{
				type: Number,
				default: 4
			},
			background:{
				type: String,
				default: '#ffffff'
			},
			color:{
				type: String,
				default: '#17181A'
			},
			fu_color:{
				type: String,
				default: '#B7B7B7'
			}
		},
		data() {
			return {}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		methods: {
			statusFilter(index){
				return this.i18n.lever.tablistState[index]
			},
			// 撤销
			revocation(id, coin_id) {
				uni.showLoading({
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading()
					let obj = {
						"id": id,
						"coin_id": coin_id
					}
					// this.$emit('revocation',id)
					this.$emit('revocation', obj)
				}, 2500)
			},
		}
	}
</script>

<style scoped>
	.listBox {
		width: 100%;
		/* height: 186rpx; */
		padding: 20rpx 30rpx;
		margin: 0 auto 20rpx;
		/* background: #FFFFFF; */
	}

	.loginBtn {
		width: 120rpx;
		height: 52rpx;
		background: rgba(0,0,0,0) !important;
		border-radius: 8rpx;
		font-size: 24rpx;
	}
</style>
