<template>
	<view :class="{ popupShow: showPop }">
		<u-navbar placeholder :title="$t('MY_WAL_2')" :bgColor="'#ffffff'" leftIcon="arrow-left" @leftClick="goBack">
			<button class="nav-right-btn" slot="right" @click="openPop()">{{$t('MY_ORD_50')}}</button>
		</u-navbar>
		<view class="listdata-list">
			<view class="listdata-item" v-for="(item, index) in listData" :key="index">
				<!-- <view class="d-b-s listdata-label">
					<view class="item-name">交易状态</view>
					<view class="item-form  flex-1 status_1" v-if="index == 0">完成</view>
					<view class="item-form  flex-1 status_2" v-if="index == 1">交易中</view>
					<view class="item-form  flex-1 status_3" v-if="index > 1">已取消</view>
				</view> -->
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('w_0296')}}</view>
					<view class="item-form flex-1">{{ item.tradeCode }}</view>
				</view>
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('w_0294')}}</view>
					<view class="item-form flex-1">{{ item.pkAccountVal }}</view>
				</view>
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('N_I_163')}}</view>
					<view class="item-form flex-1">{{ item.tradeTypeVal }}</view>
				</view>
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('w_0297')}}</view>
					<view class="item-form flex-1">{{ formatNum(item.tradeAmount) }}</view>
				</view>
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('w_0298')}}</view>
					<view class="item-form flex-1">{{ formatNum(item.tradeBalance) }}</view>
				</view>
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('N_I_160')}}</view>
					<view class="item-form flex-1">{{ item.creationTime }}</view>
				</view>
				<view class="d-b-s listdata-label">
					<view class="item-name">{{$t('MY_WAL_22')}}</view>
					<view class="item-form flex-1">{{ item.remarks }}</view>
				</view>
			</view>
		</view>
		<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">{{$t('w_0405')}}</text>
		</view>
		<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		<!-- 筛选 -->
		<u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
			<view class="pop-content rightpop">
				<view class="pop-title d-b-c">
					<view class="f28 gray3">{{$t('MY_ORD_50')}}</view>
					<view class="f28 domation" @click="closePop">{{$t('N_I_241')}}</view>
				</view>
				<view class="right-item-title">{{$t('N_I_163')}}</view>
				<view class="checkbox-list">
					<view
						v-for="(item, index) in tradeList"
						:key="index"
						class="checkbox-item"
						@click="form.tradeType = item.value"
						:class="{ active: form.tradeType == item.value }"
					>
						{{ item.label }}
					</view>
				</view>
				<view class="right-item-title">{{$t('w_0294')}}</view>
				<view class="checkbox-list">
					<view
						v-for="(item, index) in accountList"
						:key="index"
						class="checkbox-item"
						:class="{ active: form.pkAccount == item.pkId }"
						@click="form.pkAccount = item.pkId"
					>
						{{ item.accountName }}
					</view>
				</view>
				<view class="right-item-title">{{$t('N_I_160')}}</view>
				<view class="d-c-c">
					<picker mode="date" :value="form.startDate" :start="startDate" :end="endDate" @change="bindDateChange1">
						<view class="data-input">{{ form.startDate || $t('CK_KS_3') }}</view>
					</picker>
					<view style="width: 30rpx;height: 1rpx;background-color: #333;margin: 0 24rpx;"></view>
					<picker mode="date" :value="form.endDate" :start="startDate" :end="endDate" @change="bindDateChange2">
						<view class="data-input">{{ form.endDate || $t('CK_KS_9') }}</view>
					</picker>
				</view>
				<view class="pop-btns">
					<view class="pop-left-btn" @click="resetSubmit()">{{$t('w_0257')}}</view>
					<view class="pop-right-btn" @click="searchSubmit()">{{$t('w_0035')}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			/*有没有等多*/
			no_more: false,
			total: 0,
			/*是否正在加载*/
			loading: true,
			listData: [],
			showPop: false,
			date1: '',
			date2: '',
			form: {
				startDate: '',
				endDate: '',
				pageNum: 1,
				pageSize: 10,
				tradeType: '',
				pkAccount: ''
			},
			tradeList: [],
			accountList: []
		};
	},
	onLoad(e) {
		this.form.pkAccount = e.pkAccount;
		this.getTradeData();
		this.getAccountData();
	},
	onShow() {
		/*获取数据*/
		this.listData = [];
		this.page = 1;
		this.getData();
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		getTradeData() {
			let self = this;
			self.loading = true;
			self._get(
				'member/api/wallet/trade-type',
				{},
				function(res) {
					self.tradeList = res.data;

					// self.codeimg = res.img;
				},
				{},
				() => {
					self.loading = false;
				}
			);
		},
		getAccountData() {
			let self = this;
			self.loading = true;
			self._get(
				'system/api/account/pkBdAccountList',
				{},
				function(res) {
					self.accountList = res.data;

					// self.codeimg = res.img;
				},
				{},
				() => {
					self.loading = false;
				}
			);
		},
		onReachBottom() {
			let self = this;
			if (self.form.pageNum * self.form.pageSize < self.total) {
				self.form.pageNum++;
				self.getData();
			}
			self.no_more = true;
		},
		goBack() {
			uni.navigateBack();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange1: function(e) {
			this.form.startDate = e.detail.value;
		},
		bindDateChange2: function(e) {
			this.form.endDate = e.detail.value;
		},
		getData() {
			// return;
			let self = this;
			self.loading = true;
			var formdata = self.form;
			self._post('member/api/wallet/transaction-details?' + 'pageNum=' + formdata.pageNum + '&pageSize=' + formdata.pageSize, formdata, function(res) {
				self.loading = false;
				self.listData = self.listData.concat(res.rows);

				self.total = res.total;
				if (self.total < self.form.pageNum * self.form.pageSize) {
					self.no_more = true;
				}
			});
		},
		openPop() {
			// console.log('open');
			this.showPop = true;
		},
		closePop() {
			this.showPop = false;
			// console.log('close');
		},
		resetSubmit() {
			this.form.startDate = '';
			this.form.endDate = '';
			this.form.tradeType = '';
			this.form.pkAccount = '';
			this.searchSubmit();
		},
		searchSubmit: function() {
			this.showPop = false;
			/*获取数据*/
			this.listData = [];
			this.form.pageNum = 1;
			this.getData();
		}
	}
};
</script>

<style lang="scss">
.top-bg {
	width: 750rpx;
	height: 102rpx;
	background: #ffffff;
	position: sticky;
	left: 0;
	top: 0;
	z-index: 10;
	margin-bottom: 22rpx;
}

.listdata-list {
	padding-top: 8rpx;
}

.listdata-item {
	width: 750rpx;
	background: #ffffff;
	margin-bottom: 20rpx;
	padding: 0 26rpx 40rpx 23rpx;
	box-sizing: border-box;
	font-size: 26rpx;
}

.listdata-label {
	padding-top: 29rpx;
}

.item-name {
	width: 150rpx;
	color: #999;
	word-break: break-all;
	flex-shrink: 0;
}

.item-form {
	word-break: break-all;
}

.status_1 {
	color: #ff9008;
}

.status_2 {
	color: #45c242;
}

.status_3 {
	color: #fb3024;
}

.nav-right-btn {
	background: none;
	color: #999;
	font-size: 26rpx;
}
</style>
