<template>
	<!-- 商家账单列表 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					账单结算
				</view>
			</view>
		</view>
		<view class="bill-content">
			<view class="filter-card">
				<view class="status-tabs">
					<view class="status-tab" :class="{'active': searchForm.status === 0}" @tap="switchStatus(0)">待结算</view>
					<view class="status-tab" :class="{'active': searchForm.status === 1}" @tap="switchStatus(1)">已结算</view>
				</view>
				<view class="date-filter">
					<picker mode="date" :value="searchForm.startDate" @change="onStartDateChange">
						<view class="date-box" :class="{'placeholder': !searchForm.startDate}">{{searchForm.startDate || '开始日期'}}</view>
					</picker>
					<text class="date-split">至</text>
					<picker mode="date" :value="searchForm.endDate" @change="onEndDateChange">
						<view class="date-box" :class="{'placeholder': !searchForm.endDate}">{{searchForm.endDate || '结束日期'}}</view>
					</picker>
					<view class="filter-btn" @tap="reload">筛选</view>
					<view class="clear-btn" v-if="searchForm.startDate || searchForm.endDate" @tap="clearDate">重置</view>
				</view>
			</view>

			<!-- <view class="summary-card">
				<view class="summary-title">{{searchForm.status === 0 ? '待结算金额' : '已结算金额'}}</view>
				<view class="summary-amount">￥{{formatMoney(pageTotalAmount)}}</view>
				<view class="summary-desc">当前列表共 {{total}} 个账单日</view>
			</view> -->

			<view class="bill-list">
				<view class="bill-card" v-for="item in dataList" :key="item.billTime" @tap="goDetail(item)">
					<view class="bill-head">
						<view>
							<view class="bill-date">{{item.billTime}}</view>
							<view class="bill-sub">共 {{item.recordCount || 0}} 笔记录</view>
						</view>
						<view class="bill-status" :class="{'done': item.status === 1}">
							{{item.status === 1 ? '已结算' : '待结算'}}
						</view>
					</view>
					<view class="bill-grid">
						<view class="bill-metric">
							<text>结算基数</text>
							<view>￥{{formatMoney(item.totalBaseAmount)}}</view>
						</view>
						<view class="bill-metric">
							<text>平台服务费</text>
							<view>￥{{formatMoney(item.totalCommissionAmount)}}</view>
						</view>
					</view>
					<view class="bill-extra">
						<view>
							<text>正常结算</text>
							<text>￥{{formatMoney(item.positiveSettlementAmount)}}</text>
						</view>
						<view>
							<text>退款/售后扣款</text>
							<text class="negative">￥{{formatMoney(item.negativeSettlementAmount)}}</text>
						</view>
					</view>
					<view class="bill-footer">
						<view>
							<text>应结算金额</text>
							<text class="settle-amount">￥{{formatMoney(item.totalSettlementAmount)}}</text>
						</view>
						<uni-icons type="right" size="16" color="#9aa6a2"></uni-icons>
					</view>
				</view>
			</view>

			<view class="empty-state" v-if="!loading && dataList.length === 0">暂无账单记录</view>
			<view class="load-state" v-if="dataList.length > 0">{{loadStatus === 'loading' ? '加载中...' : loadStatus === 'nomore' ? '没有更多了' : '上拉加载更多'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				loading: false,
				loadStatus: 'more',
				total: 0,
				pages: 1,
				dataList: [],
				searchForm: {
					shopId: '',
					regionId: '',
					status: 0,
					startDate: '',
					endDate: '',
					pageNumber: 1,
					pageSize: 10
				}
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad(option) {
			this.searchForm.shopId = option.shopId || uni.getStorageSync('shopId') || ''
			this.searchForm.regionId = this.getRegionId()
			this.reload()
		},
		onReachBottom() {
			if (this.loading || this.searchForm.pageNumber >= this.pages) return
			this.searchForm.pageNumber++
			this.getDataList()
		},
		computed: {
			pageTotalAmount() {
				return this.dataList.reduce((total, item) => total + this.toAmount(item.totalSettlementAmount), 0)
			}
		},
		methods: {
			getRegionId() {
				const area = uni.getStorageSync('area')
				if (!area) return ''
				if (typeof area === 'object') return area.id || ''
				try {
					return JSON.parse(area).id || ''
				} catch (e) {
					return ''
				}
			},
			switchStatus(status) {
				if (this.searchForm.status === status) return
				this.searchForm.status = status
				this.reload()
			},
			onStartDateChange(e) {
				this.searchForm.startDate = e.detail.value
			},
			onEndDateChange(e) {
				this.searchForm.endDate = e.detail.value
			},
			clearDate() {
				this.searchForm.startDate = ''
				this.searchForm.endDate = ''
				this.reload()
			},
			reload() {
				this.searchForm.pageNumber = 1
				this.pages = 1
				this.dataList = []
				this.getDataList()
			},
			getDataList() {
				if (!this.searchForm.shopId) {
					this.tui.toast('未获取到商家信息')
					return
				}
				this.loading = true
				this.loadStatus = 'loading'
				this.tui.request('/mall/admin/settlement/dateSummaryList', 'POST', this.searchForm, false, false).then((res) => {
					this.loading = false
					if (res.code == 200) {
						const result = res.result || {}
						const records = Array.isArray(result.records) ? result.records : []
						this.total = result.total || records.length
						this.pages = result.pages || 1
						if (this.searchForm.pageNumber == 1) {
							this.dataList = records
						} else {
							this.dataList = this.dataList.concat(records)
						}
						this.loadStatus = this.searchForm.pageNumber >= this.pages ? 'nomore' : 'more'
					} else {
						this.loadStatus = 'more'
						this.tui.toast(res.message || '获取账单失败')
					}
				}).catch(() => {
					this.loading = false
					this.loadStatus = 'more'
				})
			},
			toAmount(value) {
				const amount = parseFloat(value)
				return isNaN(amount) ? 0 : amount
			},
			formatMoney(value) {
				return this.toAmount(value).toFixed(2)
			},
			goDetail(item){
				uni.navigateTo({
					url:'/package2/shop/shopSettlementDetail?shopId=' + encodeURIComponent(this.searchForm.shopId) +
						'&regionId=' + encodeURIComponent(this.searchForm.regionId) +
						'&billTime=' + encodeURIComponent(item.billTime) +
						'&status=' + this.searchForm.status +
						'&recordCount=' + (item.recordCount || 0) +
						'&totalSettlementAmount=' + encodeURIComponent(item.totalSettlementAmount || 0) +
						'&totalBaseAmount=' + encodeURIComponent(item.totalBaseAmount || 0) +
						'&totalCommissionAmount=' + encodeURIComponent(item.totalCommissionAmount || 0)
				})
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		position: relative;
		padding-bottom: 40rpx;
	}
	
	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 300rpx;
		background-size: 100% 100%;
	}
	
	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.bill-content {
		width: 92%;
		margin: -90rpx auto 0;
		position: relative;
		z-index: 2;
	}

	.filter-card,
	.summary-card,
	.bill-card {
		background: #fff;
		border-radius: 28rpx;
		box-shadow: 0 14rpx 34rpx rgba(0, 35, 28, 0.08);
	}

	.filter-card {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.status-tabs {
		display: flex;
		padding: 8rpx;
		border-radius: 999rpx;
		background: #f3f8f6;
	}

	.status-tab {
		flex: 1;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 999rpx;
		text-align: center;
		color: #6f7f79;
		font-size: 26rpx;
		font-weight: 800;
	}

	.status-tab.active {
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		color: #00231C;
	}

	.date-filter {
		margin-top: 18rpx;
		display: flex;
		align-items: center;
	}

	.date-box {
		width: 168rpx;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 16rpx;
		background: #f6faf8;
		text-align: center;
		font-size: 23rpx;
		font-weight: 700;
		color: #00231C;
	}

	.date-box.placeholder {
		color: #9aa6a2;
	}

	.date-split {
		margin: 0 10rpx;
		color: #9aa6a2;
	}

	.filter-btn,
	.clear-btn {
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 20rpx;
		margin-left: 12rpx;
		border-radius: 16rpx;
		font-weight: 800;
	}

	.filter-btn {
		background: #00231C;
		color: #a6ffea;
	}

	.clear-btn {
		background: #f3f6f4;
		color: #6f7f79;
	}

	.summary-card {
		padding: 28rpx;
		margin-bottom: 20rpx;
		background: linear-gradient(135deg, #00231C 0%, #14564a 100%);
		color: #fff;
	}

	.summary-title {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.summary-amount {
		margin-top: 10rpx;
		font-size: 54rpx;
		font-weight: 900;
		color: #e3ff96;
	}

	.summary-desc {
		margin-top: 8rpx;
		color: rgba(255,255,255,0.72);
	}

	.bill-card {
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.bill-head,
	.bill-footer,
	.bill-extra view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bill-date {
		font-size: 32rpx;
		font-weight: 900;
	}

	.bill-sub {
		margin-top: 8rpx;
		color: #7a8582;
		font-size: 23rpx;
	}

	.bill-status {
		padding: 8rpx 16rpx;
		border-radius: 999rpx;
		background: #fff2df;
		color: #f08a24;
		font-weight: 900;
	}

	.bill-status.done {
		background: #e8fff7;
		color: #0b9b73;
	}

	.bill-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		margin-top: 22rpx;
	}

	.bill-metric {
		padding: 18rpx;
		border-radius: 20rpx;
		background: #f7faf8;
	}

	.bill-metric text,
	.bill-extra text:first-child,
	.bill-footer text:first-child {
		color: #7a8582;
	}

	.bill-metric view {
		margin-top: 8rpx;
		font-size: 28rpx;
		font-weight: 900;
	}

	.bill-extra {
		margin-top: 18rpx;
		padding: 16rpx 0;
		border-top: 1rpx solid #eef2ef;
		border-bottom: 1rpx solid #eef2ef;
	}

	.bill-extra view + view {
		margin-top: 12rpx;
	}

	.negative {
		color: #f0441f;
	}

	.bill-footer {
		min-height: 72rpx;
		font-size: 26rpx;
	}

	.settle-amount {
		margin-left: 18rpx;
		color: #ff5722;
		font-size: 34rpx;
		font-weight: 900;
	}

	.empty-state,
	.load-state {
		padding: 60rpx 0;
		text-align: center;
		color: #9aa6a2;
	}
</style>