<template>
	<view>
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
			:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>

			<!-- 头部 -->
			<view slot="top" class="width-750 relative flex align-center justify-center bj-8EBEFF"
				:style="{height: `calc(${statusBar}px + 220rpx)`}">
				<view class="width-750 fixed1"
					:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 220rpx)`}">
					<view class="width-750 height-100 padding-w-30 bgimg1 flex align-center justify-center">
						<view @click="_goback" class="cuIcon-back font-40" style="position: absolute;left: 30rpx;">
						</view>
						<text class="font-36 weight-bold">{{i18n.TranRecord.title1}}</text>
						<image @click="show=true" class="width-36 height-36 absolute" style="right: 30rpx;"
							src="/static/imgs/index/shaixuan@2x.png"></image>
					</view>
					<view class="height-90 margin-10-auto width-690 radiu-10 flex align-center justify-between"
						:style="'background-color: '+theme.bg">
						<view class="flex-1 height-66 flex direction-column align-center justify-center">
							<text class="font-28">{{i18n.assets.record.title1}}</text>
							<text class="font-28 color-FF4040">{{order_num}}</text>
						</view>
						<view class="flex-1 height-66 flex direction-column align-center justify-center">
							<text class="font-28">{{i18n.assets.record.title2}}</text>
							<text class="font-28 color-00C481">{{win_num}}</text>
						</view>
						<view class="flex-1 height-66 flex direction-column align-center justify-center">
							<text class="font-28">{{i18n.assets.record.title3}}</text>
							<text class="font-28 color-FF4040">{{loss_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 身体 -->
			<view class="width-750 padding-b-40">
				<secondListItem :currentIndex="current2"
					:list="list" :color="theme.text" :background="theme.bg">
				</secondListItem>
			</view>

		</z-paging>

		<!-- 筛选弹窗 -->
		<u-popup v-model="show" mode="bottom" border-radius="25">
			<view class="width-100b padding-w-20" :style="'background-color: '+theme.bg+';color: '+theme.text"
				style="height:730rpx; border-radius: 20rpx 20rpx 0 0;">
				<view class="width-100b height-70 text-center line-height-100">
					<text class="font-28 weight-bold">{{i18n.TranRecord.text10}}</text>
				</view>
				<view class="width-100b height-150 margin-c-10 padding-w-30 flex direction-column justify-around">
					<text class="font-28 weight-bold line-height-64">{{i18n.TranRecord.text12}} <span
							class="font-26">({{i18n.TranRecord.text13}})</span></text>
					<input class="width-100b height-86 font-28 numbold-font" :placeholder="i18n.TranRecord.tos2"
						type="text" v-model="symbol" />
				</view>
				<view class="width-100b height-160 margin-c-10 padding-w-30 flex direction-column justify-around">
					<text class="font-28 weight-bold">{{i18n.assets.record.title4}}</text>
					<view class="width-100b height-70 flex align-center justify-between">
						<view @click="trade_result=''" class="selectTime">
							<view :class="trade_result==''?'bj-0165EE color-white':''" class="picker">
								{{i18n.assets.record.title5}}
							</view>
						</view>
						<view @click="trade_result='win'" class="selectTime">
							<view :class="trade_result=='win'?'bj-0165EE color-white':''" class="picker">
								{{i18n.assets.record.title6}}
							</view>
						</view>
						<view @click="trade_result='loss'" class="selectTime">
							<view :class="trade_result=='loss'?'bj-0165EE color-white':''" class="picker">
								{{i18n.assets.record.title7}}
							</view>
						</view>
					</view>
				</view>
				<view class="width-100b height-160 margin-c-10 padding-w-30 flex direction-column justify-around">
					<text class="font-28 weight-bold">{{i18n.assets.record.title8}}</text>
					<view class="width-100b height-70 flex align-center justify-between">
						<view @click="rise_or_fall=''" class="selectTime">
							<view :class="rise_or_fall==''?'bj-0165EE color-white':''" class="picker">
								{{i18n.assets.record.title5}}
							</view>
						</view>
						<view @click="rise_or_fall='rise'" class="selectTime">
							<view :class="rise_or_fall=='rise'?'bj-0165EE color-white':''" class="picker">
								{{i18n.assets.record.title9}}
							</view>
						</view>
						<view @click="rise_or_fall='fall'" class="selectTime">
							<view :class="rise_or_fall=='fall'?'bj-0165EE color-white':''" class="picker">
								{{i18n.assets.record.title10}}
							</view>
						</view>
					</view>
				</view>
				<view class="width-100b height-100 padding-30 flex align-center justify-between">
					<view class="resetBtn" @click="reset">{{i18n.TranRecord.text15}}</view>
					<view class="inquireBtn" @click="chechOrder">{{i18n.TranRecord.text16}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import secondListItem from '../contract/components/second_list_item.vue'
	export default {
		components: {
			secondListItem,
		},
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				
				show: false,
				list: [],
				theme: '',

				loss_num: 0,
				order_num: 0,
				win_num: 0,
				
				current2:1,
				contractOrderList_s: [], //秒合约交易订单列表
				loading_s:true,
				
				symbol:'',
				trade_result:'',
				rise_or_fall:''
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(e) {
			this.order_census()
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		
		methods: {
			order_census() {
				this.post('/cycle/order_census').then(res => {
					console.log('统计', res)
					if (res.code == 1) {
						this.loss_num = res.data.loss_num
						this.order_num = res.data.order_num
						this.win_num = res.data.win_num
					}
				})
			},
			chechOrder() {
				var obj = {
					symbol: this.symbol,
					trade_result:this.trade_result,
					rise_or_fall:this.rise_or_fall
				}
				console.log(obj)
				this.show = false
				this.list = []
				this.queryList(1, 20)
			},
			reset() {
				this.symbol = ''
				this.trade_result = ''
				this.rise_or_fall = ''
			},
			queryList(pageNo, pageSize) {
				let obj = {
					page: pageNo,
					page_num: pageSize,
					symbol: this.symbol,
					trade_result:this.trade_result,
					rise_or_fall:this.rise_or_fall
				}
				this.loading_s = true
				setTimeout(() => {
					this.post('/cycle/get_all_order', obj).then(res => {
						this.loading_s = false
						if (res.code == 1) {
							console.log(res)
							this.$refs.paging.complete(res.data.data);
						}
					})
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 1010;
	}

	.selectTime {
		flex: 1;
		margin: 0 20rpx;
		height: 66rpx;
		background: rgba(160, 171, 181, 0.2);
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255, 255, 255, 0.5);
		border-radius: 10rpx;
		color: #8B99A2;
		font-size: 28rpx;
		text-align: center;
		line-height: 66rpx;
	}

	.select_on {
		width: 180rpx;
		height: 66rpx;
		margin-right: 20rpx;
		line-height: 66rpx;
		background: #0165EE;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
	}

	.select_off {
		width: 180rpx;
		height: 66rpx;
		margin-right: 20rpx;
		line-height: 66rpx;
		background: #8B99A2;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
	}

	.resetBtn {
		width: 300rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: rgba(160, 171, 181, 0.2);
		border-radius: 10rpx;
		color: #8B99A2;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.inquireBtn {
		width: 300rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: #0165EE;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}
</style>
