<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx;"></view>
		<view style="
background: linear-gradient(185deg, #59A0DE 0%, #255C9A 100%);
border-radius: 10rpx;padding: 50rpx;">
			<view class="u-flex u-flex-between u-flex-y-center">
				<view style="color: #ffffff;">
					<view style="font-size: 24rpx;color: #EEEEEE;">当前余额(元)</view>
					<view style="font-size: 40rpx;font-weight: 800;">
						<view>{{walletInfo.money}}</view>
					</view>
				</view>
				<navigator :url="`/pages/wallet/temp?data=${encodeURIComponent(JSON.stringify(walletInfo))}`"
					style="width: 120rpx;height: 56rpx;line-height: 56rpx; height: 56rpx;text-align: center;font-size: 28rpx;background: #F7F7F7;border-radius: 12rpx;opacity: 1; color: #2CA164;">
					转赠
				</navigator>
			</view>
			<view style="height: 50rpx;"></view>
			<!-- <view class="u-flex u-flex-between u-flex-y-center"
				style="font-size: 28rpx;text-align: center;color: #ffffff;">
				<view>
					<view>100</view>
					<view style="color: #EEEEEE;">冻结中</view>
				</view>
				<view>
					<view>100</view>
					<view style="color: #EEEEEE;">可提现</view>
				</view>
			</view> -->
			<u-grid :border="false" :col="2">
				<u-grid-item :customStyle="{padding:'20rpx'}" @click="navto('/pages/wallet/list?status=-3')">
					<view style="color: #fff;">{{walletInfo.freeze_money}}</view>
					<view style="color: #c8c9cc;font-size: 28rpx;">冻结中</view>
				</u-grid-item>

				<u-grid-item class="u-flex" :customStyle="{padding:'20rpx'}" @click="navto('/pages/wallet/withdraw')">
					<view style="color: #fff;">{{walletInfo.money}}</view>
					<view style="color: #c8c9cc;font-size: 28rpx;">可提现</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff; border-radius: 10rpx;">
			<u-grid :border="false" :col="5">
				<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/list')">
					<u-icon name="/static/icon/money-list.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">账单</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx'}" @click="topay()">
					<u-icon name="/static/icon/money-list.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">充值</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/withdraw')">
					<u-icon name="/static/icon/withdraw.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">提现</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}"
					@click="navto(`/pages/wallet/temp?data=${encodeURIComponent(JSON.stringify(walletInfo))}`)">
					<u-icon name="gift" size="66rpx"></u-icon>
					<text class="grid-text-mini">转赠</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/account/index')">
					<u-icon name="/static/icon/bank.png" size="50rpx"></u-icon>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">银行卡</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view style="height: 20rpx;"></view>
		<!-- <u-subsection :list="tabData.list" keyName="name" :current="tabData.current" @change="sectionChange"
			activeColor="#2CCE7F"></u-subsection>
		<view style="height: 20rpx;"></view> -->
		<view class="u-flex">
			<view style="width: 6rpx;background-color: #26418A;"></view>
			<view style="width: 6rpx;"></view>
			<view style="font-size: 28rpx;color: #2a2a2a;font-weight: 700;">最新记录</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view>
			<view v-for="(item,index) in walletItems" :key="index"
				style="padding: 20rpx;background-color: #ffffff;padding: 20rpx;border-radius: 16rpx;margin-bottom: 20rpx;">
				<view class="u-flex u-flex-between u-flex-y-center">
					<view style="color: #232323;font-size: 30rpx;">
						<view class="u-flex u-flex-between">
							<view>{{config.type[item.type]}}</view>
						</view>
						<view style="height: 10rpx;"></view>
						<view style="color: #999999;font-size: 26rpx;">{{item.note}}</view>
						<view style="height: 16rpx;"></view>
						<view class="u-flex">
							<view>{{item.created_at}}</view>
							<view style="width: 20rpx;"></view>
							<view style="color: #909399;">{{config.status[item.status]}}</view>
						</view>
						<view style="height: 16rpx;"></view>
					</view>
					<view style="font-size: 28rpx;">
						<text v-if="item.money > 0" style="color: #FF2727;">{{item.money}}</text>
						<text v-else>{{item.money}}</text>
					</view>
				</view>
				<view v-if="item.admin_note">
					<u-line></u-line>
					<view style="height: 14rpx;"></view>
					<view style="font-size: 26rpx;">{{item.admin_note}}</view>
				</view>
				<view v-if="item.account">
					<u-line></u-line>
					<view style="height: 14rpx;"></view>
					<view class="u-flex u-flex-between">
						<view>{{item.account.realname}} </view>
						<view>{{item.account.mobile}} </view>
					</view>
					<view style="height: 10rpx;"></view>
					<view>{{item.subname}}</view>
					<view>{{item.account.num}}</view>
					<view style="height: 10rpx;"></view>
					<view>{{item.account.idcard}}</view>
				</view>
			</view>
		</view>
		<!-- <u-loadmore :status="loadStatus" /> -->
		<view style="height: 400rpx;"></view>
	</view>
</template>

<script>
	import {
		API_URL,
		STATIC_URL
	} from '@/env'
	let self;
	export default {
		data() {
			return {
				walletInfo: {},
				walletItems: [],
				tabData: {
					list: [{
						"name": "全部",
						"symbol": ""
					}, {
						"name": "收入",
						"symbol": "+"
					}, {
						"name": "支出",
						"symbol": "-"
					}, ],
					current: 0
				},
				loadStatus: 'loadmore',
				search: {
					symbol: '',
					page: 1,
					status: 0,
				},
				page: {
					current: 0,
					last_page: 1
				},
				config: null
			}
		},
		onLoad() {
			self = this;

		},
		onShow() {
			self.getWalletInfo();
			self.walletItems = [];
			self.getWalletItems();
		},
		onPullDownRefresh() {
			self.search.page = 1;
			self.walletItems = [];
			self.getWalletInfo();
			self.getWalletItems();
			uni.stopPullDownRefresh();
		},
		methods: {
			topay() {
				uni.navigateTo({
					url: '/pages/wallet/recharge?data=' + encodeURIComponent(JSON.stringify(self.walletInfo))
				})
				// var ua = window.navigator.userAgent.toLowerCase();

				// if (ua.match(/micromessenger/i) == 'micromessenger') {
				// 	location.href = API_URL + '/shop/v10/auth/wxoauthshoprecharge?data=' + encodeURIComponent(JSON
				// 		.stringify(self.walletInfo));
				// 	return true;
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/wallet/recharge?data=' + encodeURIComponent(JSON.stringify(self.walletInfo))
				// 	})
				// 	return false;
				// }
			},
			navto(url) {
				uni.navigateTo({
					url: url
				})
			},
			sectionChange(index) {
				self.tabData.current = index;
				self.search.symbol = self.tabData.list[index].symbol;
				self.search.page = 1;
				self.walletItems = [];
				self.getWalletItems();
			},
			pageStatus() {
				self.loadStatus = 'loadmore';
				if (self.search.page >= self.page.last_page) {
					self.loadStatus = 'nomore';
					return false;
				}
				return true;
			},
			getWalletItems() {
				self.$http.get('/shop/v10/wallet/items', self.search).then(({
					data,
					success
				}) => {
					if (success) {
						self.walletItems = self.walletItems.concat(data.items.data);
						self.config = data.config;
						self.page.last_page = data.items.last_page;
						self.pageStatus();
					}
				})
			},
			getWalletInfo() {
				self.$http.get('/shop/v10/wallet/info').then(({
					data,
					success
				}) => {
					if (success) {
						self.walletInfo = data;
					}

				})
			},

		}
	}
</script>

<style lang="scss">

</style>