<template>
	<view>
		<view class="listBox" v-for="(item,index) in list" :key="index" :style="'background-color: '+background+';color: '+color">
			<view class="width-100b height-60 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.rise_or_fall=='rise'?i18n.cycle.up:i18n.cycle.down}}</text>
						<text class="font-26 numbold-font" :style="'color:'+fu_color">{{item.show_name}}</text>
					</view>
				</view>
			</view>
			<view class="width-100b margin-t-10 flex flex-wrap">
				<view style="width: 33%;" class="height-70 flex direction-column align-start justify-around">
					<text class="font-26 nummedium-font">{{Number(item.current_price).toFixed(price_jd)}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.unit}}</text>
				</view>
				<view style="width: 33%;" class="height-70 flex direction-column align-center justify-around">
					<text class="font-26 nummedium-font">{{Number(item.trade_num).toFixed(price_jd)}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.tradeNumber}}</text>
				</view>
				<view v-if="currentIndex==0" style="width: 33%;" class="height-70 flex direction-column align-end justify-around">
					<!-- <text class="font-24 nummedium-font">{{timeCount(item.createtime+item.trade_cycle-item.nowtime)}}s</text> -->
					<countTime @end="timeCount" :autoplay="true" :timestamp="item.createtime+item.trade_cycle-item.nowtime" ></countTime>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.countTime}}</text>
				</view>
				<view v-if="currentIndex==1" style="width: 33%;" class="height-70 flex direction-column align-end justify-around">
					<text class="font-26 nummedium-font">{{item.trade_cycle}}s</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.tradingCycle}}</text>
				</view>
				<view v-if="currentIndex==0" style="width: 33%;" class="margin-t-10 height-70 flex direction-column align-start justify-around">
					<text class="font-26 nummedium-font">{{Number(nowPrice).toFixed(price_jd)}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.currPrice}}</text>
				</view>
				<view v-if="currentIndex==1" style="width: 33%;" class="margin-t-10 height-70 flex direction-column align-start justify-around">
					<text class="font-26 nummedium-font">{{Number(item.close_price).toFixed(price_jd)}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.closing}}</text>
				</view>
				<view style="width: 33%;" class="margin-t-10 height-70 flex direction-column align-center justify-around">
					<text v-if="currentIndex==0" class="font-26 nummedium-font">{{item.open_time}}</text>
					<text v-if="currentIndex==1" class="font-26 nummedium-font">{{item.createtime}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.complete}}</text>
				</view>
				<view v-if="currentIndex==0" style="width: 33%;" class="margin-t-10 height-70 flex direction-column align-end justify-around">
					<text v-if="item.rise_or_fall=='rise'" :class="nowPrice>item.current_price?'color-00C481':'color-FF4040'" class="font-24 nummedium-font">{{nowPrice>item.current_price?item.expect_income:'-'+item.trade_num}}</text>
					<text v-if="item.rise_or_fall=='fall'" :class="item.current_price>nowPrice?'color-00C481':'color-FF4040'" class="font-24 nummedium-font">{{item.current_price>nowPrice?item.expect_income:'-'+item.trade_num}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.profit}}</text>
				</view>
				<view v-if="currentIndex==1" style="width: 33%;" class="margin-t-10 height-70 flex direction-column align-end justify-around">
					<text :class="item.trade_result=='win'?'color-00C481':'color-FF4040'" class="font-26 nummedium-font ">{{Number(item.trade_result_num).toFixed(price_jd)}}</text>
					<text class="font-24 nummedium-font" :style="'color:'+fu_color">{{i18n.cycle.profit}}</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.cycle.nodata}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import countTime from './count-time.vue'
	export default {
		components: {
			countTime,
		},
		name: 'secondListItem',
		props: {
			//标题
			list: {
				type: Array,
				default: []
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			loading: {
				type: Boolean,
				default: false
			},
			nowPrice: { //币种当前价格
				type: Number,
				default: 0
			},
			price_jd:{
				type: Number,
				default: 4
			},
			background:{
				type: String,
				default: '#ffffff'
			},
			color:{
				type: String,
				default: '#fff'
			},
			fu_color:{
				type: String,
				default: '#B7B7B7'
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		data() {
			return {
			}
		},
		methods: {
			timeCount() {
				this.$emit('timeOut');
			}
		}
	}
</script>

<style scoped>
	.listBox {
		width: 100%;
		/* height: 186rpx; */
		padding: 20rpx 30rpx;
		margin: 0 auto 20rpx;
		/* background: #FFFFFF; */
	}
	
	.loginBtn {
		width: 120rpx;
		height: 48rpx;
		background: #FFFFFF !important;
		border: 1rpx solid #0165EE;
		border-radius: 4rpx;
		color: #0165EE;
		font-size: 24rpx;
	}
	
	.loginBtn1 {
		width: 120rpx;
		height: 48rpx;
		border-radius: 4rpx;
		color: #FFFFFF;
		background: #0165EE !important;
		font-size: 24rpx;
	}
</style>
