<template>
	<view>
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="container">
			<far-bottom></far-bottom>
			<view class="pages-header p-r" :style="{'background-image':' url('+imageRoot+'merchantBg1.png)'}"></view>
			<view class="merchantPayDetails p-r p-left-right-30">
				<view class="payDetails-header bor-radius-10upx b-f">
					<view class="dis-flex flex-y-center">
						<view class="dis-flex flex-dir-column" style="width: 50%;">
							<view class="f-50 color-33 font-blod">{{storeCurrent.nowmoney}}</view>
							<view class="f-24 color-99 m-top4">店铺余额（元）</view>
						</view>
						<view class="payDetails-header-income">
							<view class="f-28 payDetails-header-btn mar-left-150 dis-flex flex-x-center" @click="goCash">
								<view style="margin-left: 8upx;">提现</view>
								<view class="i icon iconfont icon-jinrujiantou"></view>
							</view>
						</view>
					</view>
					<view class="dis-flex" style="margin-top:52upx;">
						<view class="dis-flex flex-dir-column payDetails-header-withdraw">
							<view class="f-30 color-33 font-blod">{{storeCurrent.cashmoney}}</view>
							<view class="f-24 color-99 m-top4">累计提现</view>
						</view>
						<view class="dis-flex flex-dir-column payDetails-header-income " style="width: 50%;">
							<view class="f-30 color-33 font-blod mar-left-150">{{storeCurrent.allmoney}}</view>
							<view class="f-24 color-99 mar-left-150 m-top4">累计收益</view>
						</view>
					</view>
				</view>
				<view class="tool-tab m-top30">
					<view class="f-30 font-blod color-33">交易明细</view>
					<nonemores v-if="totalpage==0"></nonemores>
					<view class="tool-list dis-flex flex-dir-column" v-else>
						<view class="tool-item flex-box dis-flex flex-x-between" v-for="(item,index) in storeCurrentList" :key="index">
							<view class="dis-flex flex-y-center" style="flex: 0.8;">
								<image class="tool-item-icon" src="" mode=""></image>
								<view class="dis-flex flex-dir-column">
									<view class="f-28 font-blod remark">{{item.remark}}</view>
									<view class="f-24 color-cc m-top16" v-if="item.checkcode">验证码信息:{{item.checkcode}}</view>
									<view class="f-24 color-cc m-top16">{{item.createtime}}</view>
									
								</view>
							</view>
							<view style="flex: 0.2;">
								<view class="f-28 color-f4 font-blod t-l" v-if="item.fee>0">+{{item.fee}}</view>
								<view class="f-28 color-33 font-blod t-l" v-if="item.fee<0">{{item.fee}}</view>
								<view class="f-24 color-cc m-top16" v-if="item.spercentmoney">手续费:{{item.spercentmoney}}</view>

							</view>
							<view class="f-24 color-cc m-top16" style="padding-left: 82upx;" v-if="item.orderno">订单编号:{{item.orderno}}</view>

						</view>
					</view>
					<view class="tips" v-if="totalpage!=0">
						<loadmore :isMore="isMore"></loadmore>
					</view>
				</view>
			</view>
		</view>
		<!-- <TabBars :tabBarAct="0" /> -->
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo'
	import TabBars from '@/components/template/tabBar.vue'
	import nonemores from '@/components/template/nonemores.vue'
	import loadmore from '@/components/template/loadmore.vue'
	export default {
		data() {
			return {
				storeCurrent: {},
				storeCurrentList: [],
				page: 1,
				storeid: null,
				monidata: 'ikik',
				detalsData: null,
				loadlogo: false,
				shopShow: false,
				phoneHight: 0,
				totalpage: 0,
				isMore: true
			}
		},
		components: {
			Loadlogo,
			TabBars,
			nonemores,
			loadmore
		},
		computed: {
			dealer_Info() {
				if (this.$store.state.dealerInfo !== '') {
					return this.$store.state.dealerInfo;
				}
			}
		},
		onShow() {

		},
		onLoad(e) {
			let _this = this,
				checkStoreid = uni.getStorageSync('checkStoreid');
			_this.init(checkStoreid);
			_this.setData({
				storeid: checkStoreid
			})
		},
		methods: {
			init(storeid) {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHight = res.windowHeight + 'px';
					}
				});
				_this.getStoreCurrentList(storeid);
			},
			// 商户收支明细
			getStoreCurrentList(storeid) {
				let _this = this,
					data = {
						storeid: storeid || _this.storeid,
						page: _this.page
					};
				_this.isMore = false;
				App._post_form('&p=store&do=storeCurrent', data, res => {
					_this.storeCurrent = res.data;
					_this.storeCurrentList = [..._this.storeCurrentList, ...res.data.list];
					_this.totalpage = res.data.totalpage;
					_this.isMore = true;
				})
			},
			load() {
				let _this = this;
				if (_this.page == _this.totalpage) {
					_this.isMore = true;
				} else {
					_this.page++
					_this.getStoreCurrentList();
				}
			},
			// 跳转商家
			goCash() {
				App.navigationTo({
					url: 'pages/subPages/merchant/merchantCash/merchantCash'
				})
			},
			navgateTo(e, navType) {
				let _this = this;
				switch (navType) {
					case 'contactway':
						App.navigationTo({
							url: 'pages/subPages/dealer/contactway/contactway'
						});
						break;
					case 'withdraw':
						App.navigationTo({
							url: 'pages/subPages/dealer/withdraw/withdraw'
						});
						break;
					case 'setshop':
						App.navigationTo({
							url: 'pages/subPages/dealer/setshop/setshop'
						});
						break;
					case 'order':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantUserCenter/merchantUserCenter'
						});
						break;
					case 'rank':
						App.navigationTo({
							url: 'pages/subPages/dealer/rank/rank'
						});
						break;
					case 'level':
						App.navigationTo({
							url: 'pages/subPages/dealer/level/level'
						});
						break;
					case 'client':
						App.navigationTo({
							url: 'pages/subPages/dealer/client/client'
						});
						break;
					case 'help':
						App.navigationTo({
							url: 'pages/subPages/dealer/richtext/setrich'
						});
						break;
					case 'gener':
						App.navigationTo({
							url: 'pages/subPages/dealer/gener/gener'
						});
						break;
					case 'poster':
						// #ifdef H5
						location.href = e.currentTarget.dataset.url;
						// #endif
						break;
					case 'shops':
						// #ifdef H5
						location.href = e.currentTarget.dataset.url;
						// #endif
						break;
				}
			}
		},
		onReachBottom() {
			this.load()
		}
	}
</script>

<style lang="scss">
	.tips {
		height: 80upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;

			color: black;
		}
	}

	.remark {
		display: inline-block;
		width: 450upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	page {
		background-color: #ffffff;

	}

	.container {
		.color-33 {
			color: #333333;
		}

		.color-99 {
			color: #999999;
		}

		.color-f4 {
			color: #FF4444;
		}

		.color-cc {
			color: #CCCCCC;
		}

		.font-blod {
			font-weight: bold;
		}
        .floatR {
			text-align: right;
		}
		.select-box {
			color: #999999;

			.iconfont {
				font-size: 24upx;
				margin-left: 6upx;
			}
		}

		// 头部内容
		.pages-header {
			width: 100%;
			height: 262upx;
			background-repeat: no-repeat;
			background-size: 100% 262upx;

			//个人-邀请人信息
			.person-content {
				padding: 94upx 40upx 0;

				.user-avatar {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					background-repeat: no-repeat;
					background-size: 100upx 100upx;
				}

				.user-referrer-name {
					.level-label {
						background-color: #E7D4AA;
						border-radius: 18upx;
						padding: 0 16upx;
					}

					.referrer-name {
						color: #6B6E88;
					}
				}
			}
		}

		// 详情内容
		.merchantPayDetails {
			margin-top: -224upx;
			padding-bottom: 120upx;

			// 导航
			.payDetails-header {
				padding: 50upx 70upx 35upx 60upx;
				box-shadow: 0px 6px 24px 0px rgba(221, 221, 221, 0.35);

				.payDetails-header-btn {
					width: 144upx;
					height: 60upx;
					color: #ffffff;
					background: rgba(51, 136, 255, 1);
					border-radius: 30upx;
					text-align: center;
					line-height: 60upx;

					.icon {
						font-size: 26upx;
					}
				}

				.payDetails-header-withdraw {
					border-right: 1px solid #EEEEEE;
					flex-shrink: 0;
					width: 50%;
				}

				.payDetails-header-income {
					flex-shrink: 0;
					width: 50%;
				}

				.mar-left-150 {
					margin-left: 150upx;
				}
			}

			// 工具导航
			.tool-tab {
				padding: 20upx 0;

				.tool-tab-title {
					padding: 0 30upx;
				}

				.tool-item {
					width: 100%;
					flex-wrap: wrap;
					border-bottom: 1px solid #EEEEEE;
					padding: 30upx 0;

					.tool-item-icon {
						margin-right: 28upx;
						width: 54upx;
						height: 54upx;
					}
				}
			}
		}
	}
</style>
