<template>
	<view class="main" v-if="!isLoading">
		<!-- 时间筛选卡片 -->
		<view class="filterCard">
			<view class="filterHeader">
				<view class="filterTitle">时间筛选</view>
			</view>

			<view class="dateSelector">
				<view class="dateRange">
					<picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
						:end="pageData.endDate" start="2018-12-01" class="datePicker">
						<view class="dateInput">
							<text>{{ pageData.searchTime[0] }}</text>
							<text class="uni-icon uni-icon-arrowdown"></text>
						</view>
					</picker>

					<view class="dateSeparator">至</view>

					<picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
						:end="pageData.endDate" start="2018-12-01" class="datePicker">
						<view class="dateInput">
							<text>{{ pageData.searchTime[1] }}</text>
							<text class="uni-icon uni-icon-arrowdown"></text>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<!-- 服务区信息卡片 -->
		<view class="serviceCard" v-show="pageMsg.Serverpart_Name">
			<view class="serviceHeader">
				<view class="serviceName">{{ pageMsg.Serverpart_Name }}</view>
				<view class="serviceRevenue">¥{{ $util.fmoney(pageMsg.Serverpart_Revenue, 2) }}</view>
			</view>

			<view class="serviceDetails" v-if="pageMsg.Serverpart_S || pageMsg.Serverpart_N">
				<view class="detailItem" v-if="pageMsg.Serverpart_S">
					<view class="detailLabel">{{ pageMsg.Serverpart_S }}</view>
					<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueS, 2) }}</view>
				</view>
				<view class="detailItem" v-if="pageMsg.Serverpart_N">
					<view class="detailLabel">{{ pageMsg.Serverpart_N }}</view>
					<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueN, 2) }}</view>
				</view>
			</view>
		</view>
		<!-- 商铺列表 -->
		<view class="shopList" v-if="pageMsg.ShopList && pageMsg.ShopList.length > 0">
			<view class="shopItem" v-for="(item, i) in pageMsg.ShopList" :key="i">
				<view class="shopHeader">
					<view class="shopIcon">
						<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'"
							mode="aspectFill" />
					</view>

					<view class="shopInfo">
						<view class="shopTop">
							<view class="shopName">{{ item.BusinessType_Name }}</view>
							<view class="shopRevenue">+ ¥{{ $util.fmoney(item.BusinessType_Revenue, 2) }}</view>
						</view>

						<view class="shopBottom">
							<view class="uploadType" :class="{
								'scan': item.Upload_Type == 1,
								'port': item.Upload_Type == 2,
								'auto': item.Upload_Type != 1 && item.Upload_Type != 2
							}">
								<view class="typeIcon"></view>
								<text class="typeText">
									<template v-if="item.Upload_Type == 1">扫码上传</template>
									<template v-else-if="item.Upload_Type == 2">接口传输</template>
									<template v-else>自动上传</template>
								</text>
							</view>

							<view class="revenueDetails">
								<view class="revenueItem"
									v-if="item.Serverpart_RevenueS || item.Serverpart_RevenueS === 0">
									<text class="revenueLabel">{{ item.Serverpart_S }}:</text>
									<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueS, 2) }}</text>
								</view>
								<view class="revenueItem"
									v-if="item.Serverpart_RevenueN || item.Serverpart_RevenueN === 0">
									<text class="revenueLabel">{{ item.Serverpart_N }}:</text>
									<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueN, 2) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 无数据状态 -->
		<view v-if="isLoading && !pageOption.Serverpart_Name" class="noDataContainer">
			<noFound nodata="true" :text="noDataText" />
		</view>
	</view>
</template>

<script>
import request from '@/util/index.js'
export default {
	data() {
		let now = new Date()
		let nowTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
		let sTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
		return {
			isLoading: true,
			pageData: {
				endDate: nowTime,
				searchTime: [sTime, nowTime],
				msg: {},
				isLoading: true,
				exsideShow: true,
				insideShow: true,
			},
			pageMsg: {},
			pageOption: {},
			noDataText: '抱歉，没有数据，请稍后重试'
		}
	},
	methods: {
		bindDateChange(e, index) {
			let nowDate = this.pageData.searchTime[index]
			if (e.detail.value != nowDate) {
				this.pageData.searchTime[index] = e.detail.value
				this.$forceUpdate()
				this.getDetail({ st: this.pageData.searchTime[0], et: this.pageData.searchTime[1], id: this.pageOption.id, pcode: this.pageOption.pcode })
			}
		},
		toTrend() {
			this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/operatingTrend?name=' + this.pageMsg.Serverpart_Name + '&time=' + this.pageOption.et + '&id=' + this.pageOption.id + '&ProvinceCode=' + this.pageOption.pcode)
		},
		getDetail(obj) {
			let _this = this
			uni.showLoading({
				title: '正在加载...',
				mask: true
			})
			// _this.$request.$webGet('WeChat/GetRevenueReportDetils',{
			request.$webGet('CommercialApi/Revenue/GetRevenueReportDetil', {
				startTime: obj.st,
				endTime: obj.et,
				serverpartId: obj.id,
				provinceCode: obj.pcode,
				BusinessTrade: obj.BusinessTrade || '',
				SearchKeyName: _this.pageOption.searchKey,
				SearchKeyValue: _this.pageOption.searchValue,
				BusinessType: _this.pageOption.BusinessTypeValue > 0 ? _this.pageOption.BusinessTypeValue : '',
				SettlementMode: _this.pageOption.SettlementModeValue > 0 ? _this.pageOption.SettlementModeValue : '',
			}).then(res => {
				if (res.Result_Code == 100) {
					_this.pageMsg = res.Result_Data

				} else if (res.Result_Code == 200 || res.Result_Code == 999) {
					_this.noDataText = '暂无数据'
				} else {
					_this.noDataText = res.Result_Desc
				}
				uni.hideLoading()
				_this.isLoading = false
			})
		},
	},
	// 拿到传入的数据
	onLoad(op) {
		console.log('op', op)
		this.pageOption = op
		if (this.pageOption.st) {
			this.pageData.searchTime[0] = this.pageOption.st
		}
		if (this.pageOption.et) {
			this.pageData.searchTime[1] = this.pageOption.et
		}
		this.getDetail(op)
	}
}
</script>

<style lang="scss" scoped>
// 使用项目全局颜色变量
$bg: #f8f9fa;
$muted: #666;
$card: #fff;
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
$primary: #27B25F;
$primary2: #4CCC7F;
$success: #2ed573;
$warning: #ff9f43;
$danger: #ff4757;
$info: #3742fa;

page {
	background-color: $bg;
}

.main {
	width: 100vw;
	min-height: 100vh;
	background-color: $bg;
	padding: 32rpx;
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}

// 筛选卡片
.filterCard {
	background: $card;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 32rpx;
	box-shadow: $shadow;

	.filterHeader {
		margin-bottom: 24rpx;

		.filterTitle {
			font-size: 28rpx;
			font-weight: 600;
			color: #160002;
		}
	}

	.dateSelector {
		.dateRange {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.datePicker {
				flex: 1;

				.dateInput {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 16rpx 24rpx;
					background: #f8f8f8;
					border-radius: 12rpx;

					text:first-child {
						font-size: 24rpx;
						font-weight: 400;
						color: #160002;
					}

					.uni-icon-arrowdown {
						font-size: 20rpx;
						color: $muted;
						margin-left: 8rpx;
					}
				}
			}

			.dateSeparator {
				margin: 0 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: $muted;
			}
		}
	}
}

// 服务区信息卡片
.serviceCard {
	background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 32rpx;
	box-shadow: $shadow;

	.serviceHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.serviceName {
			font-size: 28rpx;
			font-weight: 600;
			color: #fff;
			flex: 1;
		}

		.serviceRevenue {
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			font-family: 'DIN Alternate', 'Arial', sans-serif;
		}
	}

	.serviceDetails {
		display: flex;
		gap: 32rpx;

		.detailItem {
			flex: 1;

			.detailLabel {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 8rpx;
			}

			.detailValue {
				font-size: 24rpx;
				font-weight: 600;
				color: #fff;
				font-family: 'DIN Alternate', 'Arial', sans-serif;
			}
		}
	}
}

// 商铺列表
.shopList {
	.shopItem {
		background: $card;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 32rpx;
		box-shadow: $shadow;

		.shopHeader {
			display: flex;
			align-items: flex-start;

			.shopIcon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.shopInfo {
				flex: 1;

				.shopTop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.shopName {
						font-size: 26rpx;
						font-weight: 600;
						color: #160002;
						flex: 1;
					}

					.shopRevenue {
						font-size: 28rpx;
						font-weight: 600;
						color: $primary;
						font-family: 'DIN Alternate', 'Arial', sans-serif;
					}
				}

				.shopBottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.uploadType {
						display: flex;
						align-items: center;

						.typeIcon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
							flex-shrink: 0;
						}

						.typeText {
							font-size: 22rpx;
							font-weight: 400;
						}

						&.scan {
							.typeIcon {
								background: url(/static/images/revenue/scan-up.png) no-repeat center;
								background-size: contain;
							}

							.typeText {
								color: #DFBE9F;
							}
						}

						&.port {
							.typeIcon {
								background: url(/static/images/revenue/port.png) no-repeat center;
								background-size: contain;
							}

							.typeText {
								color: #95BAF2;
							}
						}

						&.auto {
							.typeText {
								color: $muted;
							}
						}
					}

					.revenueDetails {
						display: flex;
						gap: 24rpx;

						.revenueItem {
							display: flex;
							align-items: center;

							.revenueLabel {
								font-size: 22rpx;
								font-weight: 400;
								color: $muted;
								margin-right: 8rpx;
							}

							.revenueValue {
								font-size: 22rpx;
								font-weight: 600;
								color: #160002;
								font-family: 'DIN Alternate', 'Arial', sans-serif;
							}
						}
					}
				}
			}
		}
	}
}

// 无数据状态
.noDataContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 400rpx;
}
</style>
