<template>
	<view class="myStore">
		<far-bottom></far-bottom>
		<!-- 累计交易额 -->
		<view class="transactionNumber">
			<view><span>累计交易额</span></view>
			<view>
				<span>{{ userInfo.allmoney }}</span>
			</view>
			<view class="myProfit">
				<view class="myProfitPackage">
					<view>
						<view>
							<span>{{ userInfo.estimatemoney }}</span>
						</view>
						<view>
							<span>本{{ data }}预估收益</span>
						</view>
					</view>
					<view class="line"></view>
					<view>
						<view>
							<span>{{ userInfo.lastmoney }}</span>
						</view>
						<view>
							<span>昨{{ data }}收益</span>
						</view>
					</view>
					<view class="line"></view>
					<view>
						<view>
							<span>{{ userInfo.profitmoney }}</span>
						</view>
						<view><span>累计收益</span></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 累计交易额 -->

		<!-- 商家列表 -->
		<view class="storeList">
			<view class="storeListPackage">
				<view class="storeListTitle">
					<view class="storeListLine"></view>
					<span>商家列表</span>
				</view>
				<view class="storeListBody">
					<!-- 商家循环模板 -->
					<view class="storeMb" @click="goStoreDetails(item.id)" v-for="(item, index) in userInfo.stores">
						<view class="storeImg">
							<image :src="item.logo" />
							<view class="floatCommission">
								<span>{{ item.scale }}%</span>
							</view>
						</view>
						<view class="storeInfo">
							<view class="storeInfoTitle">
								<span>{{ item.storename }}</span>
								<span>{{ item.endtime }}</span>
							</view>
							<view class="storeInfoBody">
								<span>{{ item.realname }}</span>
								<span>{{ item.tel }}</span>
							</view>
							<view class="storeInfoFoot">
								<span>
									交易额：
									<span>{{ item.ordermoney }}</span>
								</span>
								<span>
									订单数：
									<span>{{ item.ordernum }}</span>
								</span>
							</view>
						</view>
					</view>
					<!-- 商家循环模板 -->
				</view>
			</view>
		</view>
		<load-more :isMore="isMore"></load-more>
		<!-- 商家列表 -->
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import loadMore from '@/components/template/loadmore.vue'

// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif

export default {
	components:{
		loadMore
	},
	data() {
		return {
			page: 1,
			initflag: 1,
			userInfo: {},
			data: '',
			isMore:false
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom(){
		console.log('xialakakak');
		if(this.isMore == true){
			return
		}
		this.isMore = false;
		this.page++;
		this.getMyStoreList(true)
	},
	methods: {
		init() {
			let _this = this;
			_this.getMyStoreList();
		},
		goStoreDetails(id) {
			App.navigationTo({
				url: 'pages/subPages/dealer/myStoreDetails/myStoreDetails?id=' + id
			});
		},
		// 我的商家列表
		getMyStoreList(flag = false) {
			let _this = this;
			let data = {
				page: _this.page,
				initflag: _this.initflag
			};
			App._post_form('&p=salesman&do=myStore', data, res => {
				if(flag){
					// _this.userInfo.push.apply(_this.userInfo, res.data);
						_this.userInfo.stores.push(...res.data.stores);
				}else{
					_this.userInfo = { ..._this.userInfo, ...res.data };
				}
				if (res.data.settle == 0) {
					_this.data = '日';
				}
				if (res.data.settle == 1) {
					_this.data = '周';
				}
				if (res.data.settle == 2) {
					_this.data = '月';
				}
				if(res.data.stores.length < 10){
					_this.isMore = true;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #f8f8f8;
	overflow-x: hidden;
}
.myStore {
	font-size: 0;
}
.line {
	margin-top: 15upx;
	width: 2upx;
	height: 37upx;
	background: rgba(255, 255, 255, 0.5);
}
.transactionNumber {
	border:1upx solid rgba(0,0,0,0);
	background: #f55347;
	background-repeat: cover;
	height: 407upx;
	width: 750upx;
	text-align: center;
	> view:nth-child(1) {
		margin-top: 55upx;
		font-size: 24upx;
		
		
		color: rgba(255, 255, 255, 1);
	}
	> view:nth-child(2) {
		margin-top: 10upx;
		font-size: 24upx;
		
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
}
.myProfit {
	> view {
		> view {
			display: inline-block;
			vertical-align: middle;
			> view {
				> span:nth-child(1) {
					font-size: 24upx;
					
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}
				> span:nth-child(2) {
					margin-top: 14upx;
					font-size: 24upx;
					
					
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
}
.myProfitPackage {
	padding: 80upx 30upx 0 30upx;
	display: flex;
	justify-content: space-between;
}
.storeList {
	margin: -80upx auto 0 auto;
	width: 690upx;
	min-height: 859upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.storeListTitle {
	> span {
		vertical-align: middle;
		margin-left: 10upx;
		font-size: 30upx;
		
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
}
.storeListPackage {
	padding: 30upx;
}
.storeListLine {
	display: inline-block;
	vertical-align: middle;
	width: 6upx;
	height: 28upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 3upx;
}
.storeListBody {
	margin-top: 20upx;
}
.storeMb {
	> view {
		vertical-align: top;
		display: inline-block;
	}
	margin-top: 30upx;
	padding-bottom: 30upx;
	border-bottom: 1px solid rgba(238, 238, 238, 1);
}
.storeImg {
	width: 128upx;
	height: 128upx;
	border-radius: 10upx;
	overflow: hidden;
	> image {
		width: 128upx;
		height: 128upx;
	}
}
.storeInfo {
	width: 470upx;
	margin-left: 30upx;
}
.storeInfoTitle {
	display: flex;
	justify-content: space-between;
	> span:nth-child(1) {
		font-size: 30upx;
		
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
	> span:nth-child(2) {
		font-size: 24upx;
		
		
		color: rgba(153, 153, 153, 1);
	}
	> span {
		vertical-align: bottom;
	}
}
.storeInfoBody {
	margin-top: 10upx;
	> span:nth-child(1) {
		font-size: 24upx;
		
		
		color: rgba(153, 153, 153, 1);
	}
	> span:nth-child(2) {
		margin-left: 20upx;
		font-size: 24upx;
		
		
		color: #5585ff;
	}
}
.storeInfoFoot {
	margin-top: 10upx;
	> span:nth-child(2) {
		margin-left: 20upx;
	}
	> span {
		font-size: 24upx;
		
		
		color: rgba(153, 153, 153, 1);
		> span {
			color: #ff4444;
		}
	}
}
.floatCommission {
	position: relative;
	bottom: 130upx;
	width: 87upx;
	height: 30upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 0upx 0upx 6upx 0upx;
	text-align: center;
	overflow: hidden;
	> span {
		font-size: 20upx;
		
		
		color: rgba(255, 255, 255, 1);
	}
}
</style>
