<template>
	<view>
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
		:style="'background-color: '+theme.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 + 176rpx)`}">
				<view class="width-750 fixed1"
					:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 176rpx)`}">
					<view class="width-750 height-110 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-66 flex align-center">
						<view @click="selectMeun(index)" v-for="(item,index) in meunList" class="flex-1 height-66">
							<view class="height-60 line-height-60 text-center">
								<text
									:class="meunIndex==index?'font-28 color-0165EE weight-bold':'color-C3C3C3 font-26'">{{item}}</text>
							</view>
							<view class="height-4 flex align-center justify-center">
								<view v-if="meunIndex==index" class="width-40 height-4 bj-0165EE"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 身体 -->
			<view class="width-750 padding-b-40">
				<view>
					<view v-for="(item,index) in list" class="padding-w-30 margin-t-8"
					 :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
						<view class="height-96 flex align-center justify-between">
							<view class="flex align-center font-28 numbold-font">
								<image class="width-52 height-52 radiu-26 margin-r-12" :src="item.image" mode="">
								</image>
								<text :class="item.type==1?'color-00C481':'color-FF4040'">{{item.type==1?i18n.TranRecord.text1:i18n.TranRecord.text2}}</span>{{item.coinname}}</text>
							</view>
							<text class="font-24 color-C3C3C3">{{item.createtime}}</text>
						</view>
						<view class="padding-c-20">
							<view class="flex align-center margin-b-8">
								<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text3}}：</text>
								<text class="font-24 numbold-font">{{item.order_sn}}</text>
							</view>
							<view class="flex align-center margin-b-8">
								<text
									class="font-24 color-C3C3C3">{{item.type == 1?i18n.TranRecord.text1:i18n.TranRecord.text2}}{{i18n.TranRecord.text4}}：</text>
								<text class="font-24 numbold-font">{{item.num}}</text>
							</view>
							<view class="flex align-center margin-b-8">
								<text
									class="font-24 color-C3C3C3">{{item.type == 1?i18n.TranRecord.text1:i18n.TranRecord.text2}}{{i18n.TranRecord.text5}}：</text>
								<text class="font-24 numbold-font">{{item.amount}}</text>
							</view>
							<view class="flex align-center margin-b-8">
								<text
									class="font-24 color-C3C3C3">{{item.type == 1?i18n.TranRecord.text1:i18n.TranRecord.text2}}{{i18n.TranRecord.text6}}：</text>
								<text class="font-24 numbold-font">{{item.price}}</text>
							</view>
							<view class="flex align-center margin-b-8">
								<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text7}}：</text>
								<text class="font-24 numbold-font">{{item.fee}}</text>
							</view>
							<view class="flex align-center margin-b-8">
								<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text8}}：</text>
								<text class="font-24 numbold-font">{{item.bc_time}}</text>
							</view>
							<view class="flex align-center">
								<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text9}}：</text>
								<text class="font-24 numbold-font">{{item.income}}</text>
							</view>
						</view>
					</view>
				</view>
			</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:570rpx; 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-160 padding-w-30 margin-c-10 flex direction-column justify-around">
					<text class="font-30 weight-bold">{{i18n.TranRecord.text11}}</text>
					<view class="width-100b flex align-center">
						<view @click="selectBourse(index)" :class="bourseIndex==index+1?'select_on':'select_off'"
							v-for="(item,index) in bourseList" :key="index">{{item}}</view>
					</view>
				</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="coin" />
				</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.TranRecord.text14}}</text>
					<view class="width-100b height-70 flex align-center justify-between">
						<view @click="tshow1=true" class="selectTime">
							<view class="picker">
								{{startTime}}
							</view>
						</view>
						<view class="width-20 height-6 radiu-3 bj-0165EE"></view>
						<view @click="tshow2=true" class="selectTime">
							<view class="picker">
								{{endTime}}
							</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>
		<u-picker mode="time" v-model="tshow1" @confirm="startTimeChange" :cancelText="i18n.Tactics.text28"
			:confirmText="i18n.Tactics.text29"></u-picker>
		<u-picker mode="time" v-model="tshow2" @confirm="endTimeChange" :cancelText="i18n.Tactics.text28"
			:confirmText="i18n.Tactics.text29"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				meunList: ['全部', '买入', '卖出'],
				meunIndex: 0,

				show: false,

				bourseList: ['HUOBI'],
				// bourseList: ['HUOBI', 'Binance', 'OKEx', 'Coinbase'],
				bourseIndex: 1,

				coin: '',

				startTime: '请选择时间',
				endTime: '请选择时间',
				tshow1: false,
				tshow2: false,

				list: [],
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(e) {
			this.meunList[0] = this.i18n.TranRecord.text17
			this.meunList[1] = this.i18n.TranRecord.text1
			this.meunList[2] = this.i18n.TranRecord.text2
			this.startTime = this.i18n.TranRecord.text18
			this.endTime = this.i18n.TranRecord.text18
			console.log(e)
			if (e.symbol) {
				this.coin = e.symbol
			}
			if (e.exchange_id) {
				this.bourseIndex = e.exchange_id
			}
			// this.top()
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			chechOrder() {
				// var obj = {
				// 	coin: this.coin,
				// 	bourseIndex: this.bourseIndex,
				// 	startTime: this.startTime,
				// 	endTime: this.endTime,
				// 	exchange_id: this.bourseIndex
				// }
				// console.log(obj)
				this.show = false
				this.list = []
				this.queryList(1, 10)
			},
			selectMeun(index) {
				this.list = []
				this.meunIndex = index
				this.queryList(1, 10)
			},
			// selectStatus(index) {
			// 	this.statusIndex = index
			// },
			selectBourse(index) {
				this.bourseIndex = index + 1
			},
			startTimeChange: function(e) {
				console.log('开始时间', e)
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			endTimeChange: function(e) {
				console.log('结束时间', e)
				this.endTime = e.year + '-' + e.month + '-' + e.day
			},
			reset() {
				this.statusIndex = 0
				this.bourseIndex = 1
				this.coin = ''
				this.startTime = this.i18n.TranRecord.text18
				this.endTime = this.i18n.TranRecord.text18
			},
			queryList(pageNo, pageSize) {
				let obj = {
					page: pageNo,
					page_num: pageSize,
					type: this.meunIndex,
					exchange_id: this.bourseIndex == '' ? '' : this.bourseIndex,
					symbol: this.coin == '' ? '' : this.coin,
					starttime: this.startTime == this.i18n.TranRecord.text18 ? '' : this.startTime,
					endtime: this.endTime == this.i18n.TranRecord.text18 ? '' : this.endTime
				}
				setTimeout(() => {
					this.post('/strategy/get_order', obj).then(res => {
						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 {
		width: 300rpx;
		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>
