<template>
	<view id="myStoreDetails">
		<far-bottom></far-bottom>
		<!-- 用户交易信息 -->
		<view class="myStoreDetailsTitle">
			<view class="myStoreUserHead">
				<view class="headImg"><image :src="storeDetail.logo" /></view>
			</view>
			<view class="myStoreUserInfo">
				<view>
					<span>{{ storeDetail.storename }}</span>
				</view>
				<view>
					<span>到期时间：{{ storeDetail.endtime }}</span>
				</view>
			</view>
			<view class="myTransaction">
				<view>
					<view>
						<span>{{ storeDetail.turnover }}</span>
					</view>
					<view><span>交易额</span></view>
				</view>
				<view class="line"></view>
				<view>
					<view>
						<span>{{ storeDetail.ordernum }}</span>
					</view>
					<view><span>订单数</span></view>
				</view>
				<view class="line"></view>
				<view>
					<view>
						<span>{{ storeDetail.scale }}%</span>
					</view>
					<view><span>提成</span></view>
				</view>
			</view>
		</view>
		<!-- 用户交易信息 -->

		<!-- 切换按钮 -->
		<view class="checkButton t-c">
			<view class="checkButtonRight">
				<view><span>{{TextSubstitution.yjtext}}明细</span></view>
			</view>
		</view>
		<!-- 切换按钮 -->

		<!-- 数据区域 -->
		<view class="myStoreDetailsMain">
			<view class="myStoreDetailsMainPackage">

				<!-- 结算记录 -->
				<scroll-view class="settleRecord" scroll-y="true" lower-threshold="0" @scrolltolower="settleScoll" show-scrollbar="true">
					<!-- 结算记录循环模板 -->
					<view class="settleRecordMb" v-for="(item, index) in settleList">
						<view class="settleRecordInfo">
							<view>
								<span>{{ item.pluginname }}的{{TextSubstitution.yjtext}}</span>
							</view>
							<view>
								<span>{{ item.createtime }}</span>
							</view>
						</view>
						<view class="settleRecordMoney">
							<span>{{ item.price }}</span>
						</view>
					</view>
					<!-- 结算记录循环模板 -->
					<view class="loading">
						<span>{{settleLoadText}}</span>
						</view>
				</scroll-view>
				<!-- 结算记录 -->
			</view>
		</view>
		<!-- 数据区域 -->
	</view>
</template>

<script>
import App from '@/common/js/app.js';

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

export default {
	data() {
		return {
			page: 2,
			id: '',
			storeDetail: {},
			reportPage: 1,
			reportList: [],
			settlePage: 1,
			settleList: [],
			settleLoadText:'',
			settleloading:true,
			reportLoadText:'',
			reportloading:true,
			TextSubstitution:{}
		};
	},
	onLoad: function(option) {
		this.id = option.id;
		this.TextSubstitution = uni.getStorageSync('TextSubstitution')
		console.info(option.id);
		this.init();
	},
	methods: {
		reportScoll(){
			let _this = this;
			if(_this.reportloading==true){
				_this.reportPage++;
				_this.getStoreReport();
				_this.reportLoadText='... ...加载中'
			}
			else{
				_this.reportLoadText='已无更多数据'
			}
		},
		settleScoll() {
			let _this = this;
			if(_this.settleloading==true){
				_this.settlePage++;
				_this.getStoreSettle();
				_this.settleLoadText='... ...加载中'
			}
			else{
				_this.settleLoadText='已无更多数据'
			}
			
		},
		init() {
			let _this = this;
			_this.getStoreDetail();
			_this.getStoreSettle();
		},
		changPage(page) {
			let _this = this;
			_this.page = page;
			if (page == 2&&_this.settleList.length==0) {
				_this.getStoreSettle();
			}
		},
		// 商家详情
		getStoreDetail() {
			let _this = this;
			console.info(_this.id);
			let data = {
				id: _this.id
			};
			App._post_form('&p=salesman&do=storeDetail', data, res => {
				_this.storeDetail = res.data;
			});
		},
		// 商家每日报表
		getStoreReport() {
			let _this = this;
			let data = {
				id: _this.id,
				page: _this.reportPage
			};
			App._post_form('&p=salesman&do=storeReport', data, res => {
				_this.reportLoadText=''
				for (let i = 0; i < res.data.reportlist.length; i++) {
					res.data.reportlist[i].createtime = Util.formatTime(res.data.reportlist[i].createtime, 'date', '-');
				}
				_this.reportList =[..._this.reportList,...res.data.reportlist] ;
				if(_this.reportPage==res.data.pagetotal){
					_this.reportloading=false
					_this.reportLoadText='已无更多数据'
				}
				if(res.data.pagetotal==0){
					_this.reportloading=false
					_this.reportLoadText='已无更多数据'
				}
			});
		},
		// 商家结算记录
		getStoreSettle() {
			let _this = this;
			let data = {
				id: _this.id,
				page: _this.settlePage
			};
			App._post_form('&p=salesman&do=storeSettle', data, res => {
				_this.settleLoadText=''
				for (let i = 0; i < res.data.length; i++) {
					res.data.dislist[i].detatime = Util.formatTime(res.data[i].detatime, 'date', '-');
					res.data.dislist[i].createtime = Util.formatTime(res.data[i].createtime, 'rule', '-');
				}
				_this.settleList = [..._this.settleList, ...res.data.dislist];
				if(_this.settlePage==res.data.pagetotal){
					_this.settleloading=false
					_this.settleLoadText='已无更多数据'
				}
				if(res.data.pagetotal==0){
					_this.settleloading=false
					_this.settleLoadText='已无更多数据'
				}
			},res=>{
				_this.settleLoadText='加载失败'
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
	overflow-x: hidden;
}
.myStoreDetails {
	font-size: 0;
}
.myStoreDetailsTitle {
	border: 1upx solid rgba(0,0,0,0);
	width: 750upx;
	height: 405upx;
	background: #ff4444;
}
.myStoreUserHead {
	margin-top: 20upx;
}
.headImg {
	margin: auto;
	width: 130upx;
	height: 130upx;
	overflow: hidden;
	border-radius: 50%;
	> image {
		width: 130upx;
		height: 130upx;
	}
}
.myStoreUserInfo {
	text-align: center;
	margin-top: 26upx;
	> view:nth-child(1) {
		font-size: 30upx;
		
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
	> view:nth-child(2) {
		margin-top: 10upx;
		font-size: 24upx;
		
		
		color: rgba(255, 255, 255, 1);
	}
}
.myTransaction {
	margin: 40upx auto 0 auto;
	width: 590upx;
	display: flex;
	justify-content: space-between;
	> view {
		display: inline-block;
		vertical-align: middle;
		> view {
			text-align: center;
			> span {
				font-size: 30upx;
				
				
				color: rgba(255, 255, 255, 1);
			}
		}
	}
}
.line {
	margin-top: 26upx;
	width: 2upx;
	height: 25upx;
	background: rgba(255, 255, 255, 1);
}
.checkButton {
	overflow: hidden;
	border-bottom: 1px solid rgba(238, 238, 238, 1);
	width: 750upx;
	height: 90upx;
	background: rgba(255, 255, 255, 1);
	> view {
		vertical-align: top;
		display: inline-block;
	}
}
.checkButtonLine {
	margin-top: 27upx;
	width: 2upx;
	height: 36upx;
	background: rgba(238, 238, 238, 1);
	display: flex;
	justify-content: space-between;
}
.checkButtonLeftCheck {
	width: 49%;
	> view {
		margin: auto;
		width: 120upx;
		height: 86upx;
		border-bottom: 4px solid rgba(255, 68, 68, 1);
		> span {
			line-height: 86upx;
			font-size: 28upx;
			
			font-weight: bold;
			color: rgba(255, 68, 68, 1);
		}
	}
}
.checkButtonLeft {
	width: 49%;
	> view {
		margin: auto;
		width: 120upx;
		height: 86upx;
		> span {
			line-height: 86upx;
			font-size: 28upx;
			
			font-weight: bold;
			color: rgba(153, 153, 153, 1);
		}
	}
}
.checkButtonRight {
	width: 49%;
	> view {
		margin: auto;
		width: 120upx;
		height: 86upx;
		> span {
			line-height: 86upx;
			font-size: 28upx;
			
			font-weight: bold;
			color: rgba(153, 153, 153, 1);
		}
	}
}
.checkButtonRightCheck {
	width: 49%;
	> view {
		margin: auto;
		width: 120upx;
		height: 86upx;
		border-bottom: 4px solid rgba(255, 68, 68, 1);
		> span {
			line-height: 86upx;
			font-size: 28upx;
			
			font-weight: bold;
			color: rgba(255, 68, 68, 1);
		}
	}
}
.myStoreDetailsMain {
	margin-top: 20upx;
}
.myStoreDetailsMainPackage {
	padding: 0 30upx 0upx 30upx;
}
.reportMb {
	display: flex;
	justify-content: space-between;
	margin-top: 30upx;
	padding-bottom: 30upx;
	border-bottom: 1px solid rgba(238, 238, 238, 1);
	> view {
		display: inline-block;
		vertical-align: top;
	}
}
.ySettlement {
	vertical-align: top;
	font-size: 24upx;
	
	
	color: rgba(255, 68, 68, 1);
}
.nSettlement {
	vertical-align: top;
	font-size: 24upx;
	
	
	color: rgba(153, 153, 153, 1);
}
.reportMbLeft {
	> view {
		vertical-align: top;
		display: inline-block;
	}
}
.dot {
	margin-top: 10upx;
	width: 16upx;
	height: 16upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 50%;
}
.reportInfo {
	margin-left: 20upx;
	>view{
		vertical-align: top;
	}
	> view:nth-child(1) {
		span {
			vertical-align: top;
			font-size: 28upx;
			
			
			color: rgba(51, 51, 51, 1);
		}
	}
	> view:nth-child(2) {
		margin-top: 30upx;
		> span:nth-child(2) {
			margin-left: 40upx;
		}
		> span {
			font-size: 24upx;
			
			
			color: rgba(153, 153, 153, 1);
			> span {
				color: #ff4444;
			}
		}
	}
}
.settleRecord {
	height: 720upx;
}
.settleRecordMb {
	margin-top: 30upx;
	padding-bottom: 30upx;
	border-bottom: 1upx solid rgba(238, 238, 238, 1);
	display: flex;
	justify-content: space-between;
	> view {
		display: inline-block;
		vertical-align: middle;
	}
}
.settleRecordInfo {
	> view:nth-child(1) {
		> span {
			font-size: 28upx;
			
			
			color: rgba(51, 51, 51, 1);
		}
	}
	> view:nth-child(2) {
		margin-top: 10upx;
		> span {
			font-size: 24upx;
			
			
			color: rgba(153, 153, 153, 1);
		}
	}
}
.settleRecordMoney {
	> span {
		line-height: 80upx;
		font-size: 30upx;
		
		
		color: rgba(255, 68, 68, 1);
	}
}
.loading {
	overflow: hidden;
	height: 50upx;
	text-align: center;
	> span {
		line-height: 50upx;
		font-size: 28upx;
		
		
		color: rgba(51, 51, 51, 1);
	}
}
</style>
