<template>
	<view class="content">
		<headersVue :titles="titles">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="top_">
			<view class="t_left" @click="isShowPop = true">全部订单
				<u-icon name="arrow-down-fill" color="#327DFB" size="14"></u-icon>
			</view>
			<view class="" style="display:flex;" @click="cleanSelectTime" v-if="queryParams.startTime">
				清除时间
				<u-icon name="close-circle" size="24" color="#327DFB" style="margin-left: 10rpx"></u-icon>
			</view>
		</view>

		<view class="container" v-if="tableData">
			<view class="box_" v-for="(records, date) in tableData" :key="date">
				<view class="title_" @click="show = true">{{ formatDateChinese(date) }}
					<u-icon name="arrow-down" size="14"></u-icon>
				</view>
				<view class="box_cont">
					<view class="box_hang" v-for="(item, index) in records" :key="item.id">
						<view class="d_s">
							<view class="num_">{{ index + 1 }}</view>
							<view class="name_">{{ item.carNum }}</view>
							<view class="icon_" v-if="item.carModel">{{ item.carModel }}</view>
						</view>
						<view class="d_b">
							<view class="d_s">
								<view class="h_">业务来源：</view>
								<view class="n_">{{ item.customerSource }}</view>
							</view>
							<view class="d_s">
								<view class="h_">检测状态：</view>
								<view class="n_">{{ item.status }}</view>
							</view>
							<view class="d_s">
								<view class="h_">支付方式：</view>
								<view class="n_">{{ item.pay == '未支付' ? item.pay : getPayType(item.payType) }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container" v-else style="margin: 430rpx 0">
			<u-empty mode="order">
			</u-empty>
		</view>
		<u-popup round="55" :show="isShowPop" @close="closePop" @open="openPop" :key="windowsHeight">
			<view class="popup-content" :style="{'height':windowsHeight + 'px'}">
				<view class="popup-header">
					<text>选择筛选项</text>

					<view style="display: flex;justify-content: space-between" @click="clearSelection">
						<u-icon name="close-circle" size="18" color="#327DFB"></u-icon>
						<text style="color:#327DFB;">清除筛选项</text>
					</view>
				</view>
				<u-search placeholder="请输入车辆品牌或车牌号" v-model="queryParams.carModelOrCarYear" @custom="search"
					@search="search"></u-search>
				<scroll-view scroll-y="true" class="scroll_view_style">
					<view class="popup-body">
						<view style="display: flex;justify-content: space-between">
							<!-- 客户来源选择 -->
							<view class="filter-section">
								<text>客户来源</text>
								<view class="options" @click="handleClick">
									<text>
										{{ queryParams.customerSource || '请选择客户来源' }}
									</text>
									<u-icon v-if="queryParams.customerSource" name="close-circle" size="24"
										color="#327DFB"></u-icon>
									<u-icon v-else name="arrow-down" size="14" color="#327DFB"></u-icon>
								</view>
							</view>
							<!-- 车型选择 -->
							<view class="filter-section">
								<text>车型</text>
								<view class="options" @click="handleGoodsClick">
									<text>
										{{ goodsName || '请选择车型' }}
									</text>
									<u-icon v-if="queryParams.goods" name="close-circle" size="24"
										color="#327DFB"></u-icon>
									<u-icon v-else name="arrow-down" size="14" color="#327DFB"></u-icon>
								</view>
							</view>
						</view>
						<!-- 车龄选择 -->
						<view class="filter-section">
							<text>车龄选择</text>
							<u-number-box v-model="queryParams.carYear" :min="0" :max="100"></u-number-box>
						</view>
						<!-- 支付方式选择 -->
						<view class="filter-section">
							<text>支付方式</text>
							<view class="options">
								<text class="options_content" v-for="(item, index) in payTypes" :key="index"
									@click="selectPayType(item.value)"
									:class="{ selected: queryParams.payType === item.value }">
									{{ item.label }}
								</text>
							</view>
						</view>
						<!-- 检测状态选择 -->
						<view class="filter-section">
							<text>检测状态</text>
							<view class="options">
								<text class="options_content" v-for="(item, index) in inspectionStatus" :key="index"
									@click="selectInspectionStatus(item.value)"
									:class="{ selected: queryParams.chooseStatus === item.value }">
									{{ item.label }}
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<u-button @click="closePop" style="background: #F7F8FC;color: black">取消</u-button>
					<u-button @click="submitPop">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-picker :show="isShowCustomer" :columns="[customerSource]" keyName="label" closeOnClickOverlay
			@cancel="isShowCustomer = false" @close="isShowCustomer = false" @confirm="handleCustomerSourceConfirm"
			:overlay-style="{ zIndex: '10080' }" style="z-index: 10072"></u-picker>
		<u-picker :show="isShowGoods" :columns="[goodsList]" keyName="label" closeOnClickOverlay
			@cancel="isShowGoods = false" @close="isShowGoods = false" @confirm="handleGoodsConfirm"
			:overlay-style="{ zIndex: '10080' }" style="z-index: 10072"></u-picker>
		<u-datetime-picker :show="show" v-model="selectTime" mode="date" @close="show = false" @cancel="show = false"
			closeOnClickOverlay @confirm="confirmTime"></u-datetime-picker>
	</view>
</template>

<script>
	import headersVue from '../../components/header/headers.vue';
	import request from "@/utils/request";
	import {
		formatDate,
		formatDateChinese,
		formatDateTimeToMinute,
		getDictDataByType
	} from "@/utils/utils";

	export default {
		data() {
			return {
				titles: "订单统计",
				msg: "1",
				List: [],
				show: false,
				status: 'loading',
				columns: [
					['选项', '选项', '选项']
				],
				queryParams: {
					queryTime: null,
					pageNum: 1,
					pageSize: 50,
					chooseStatus: "1",
					payType: "",
					startTime: null,
					endTime: null,
					carModelOrCarYear: null,
					customerSource: null,
					goods: null,
					carYear: 0,
				},
				loading: false, // 加载更多时的标志位
				tableData: {},
				pages: 0,
				isShowPop: false,
				isShowCustomer: false,
				payTypes: [],
				inspectionStatus: [{
						label: "全部",
						value: "1",
					},
					{
						label: "检测中",
						value: "2",
					},
					{
						label: "已完成",
						value: "3",
					},
				],
				selectedPayType: null, // 选中的支付方式
				selectedInspectionStatus: null, // 选中的检测状态
				customerSource: [],
				selectedCustomerSource: null, // 选中的客户来源
				selectTime: new Date().toString(),
				goodsList: [],
				isShowGoods: false,
				goodsName: null,
				windowsHeight: 600,
			}
		},
		onReachBottom() { // 当用户滚动到底部时触发
			if (!this.loading && this.queryParams.pageNum < this.pages) {
				this.queryParams.pageNum += 1;
				this.getTableData(true);
			} else {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			}
		},
		components: {
			headersVue
		},
		onReady() {
			uni.getSystemInfo({
				success: function(res) {
					this.windowsHeight = res.windowHeight;
					console.log('屏幕高度：', res.windowHeight);
				}
			});
			this.getTableData();
			this.getDictData();
			this.getCustomerSource();
			// this.disabledScroll()
		},
		methods: {
			formatDateChinese,
			getTableData(isLoadMore = false) {
				this.loading = true; // 开始加载更多
				request({
					url: '/partnerOwn/partner/getOrderByDate',
					method: 'get',
					params: this.queryParams
				}).then(res => {
					this.pages = res.data.pages
					let newData = res.data.records || [];
					if (isLoadMore) {
						newData = newData.concat(this.extractAllEntries(this.tableData))
						this.tableData = this.groupByDate(newData); // 合并新旧数据
					} else {
						this.tableData = null
						if (newData.length !== 0) {
							this.tableData = newData; // 初始加载或搜索时替换数据
							this.tableData = this.groupByDate(this.tableData)
						}
					}
					this.loading = false; // 完成加载
				}).catch(err => {
					console.error('获取订单数据失败', err);
					this.loading = false; // 出错也停止加载
				});
			},
			getPayType(type) {
				if (!this.payTypes || this.payTypes.length === 0) {
					this.getDictData()
				}
				if (type) {
					const index = this.payTypes.findIndex(item => item.value === type)
					if (index !== -1) {
						return this.payTypes[index].label
					}
				}
			},
			async getDictData() {
				if (!this.payTypes || this.payTypes.length === 0) {
					this.payTypes = [{
						label: "全部",
						value: "",
					}]
					this.payTypes = this.payTypes.concat(await getDictDataByType("pay_type"))
				}
			},
			groupByDate(records) {
				return Object.entries(records.reduce((acc, item) => {
						const dateKey = item.createTime.split(" ")[0]; // 取 "yyyy-MM-dd"
						if (!acc[dateKey]) {
							acc[dateKey] = [];
						}
						acc[dateKey].push(item);
						return acc;
					}, {}))
					.sort(([a], [b]) => b.localeCompare(a)) // 根据 dateKey 倒序排序
					.reduce((sortedAcc, [key, value]) => {
						sortedAcc[key] = value;
						return sortedAcc;
					}, {});
			},
			extractAllEntries(data) {
				return Object.values(data).flat(); // 提取所有子数组并展平为一个大数组
			},
			closePop() {
				this.isShowPop = false;
				this.queryParams.payType = "";
				this.queryParams.chooseStatus = "1";
				this.queryParams.carModelOrCarYear = null;
			},
			submitPop() {
				this.queryParams.pageNum = 1;
				this.tableData = null
				this.getTableData();
				this.isShowPop = false;
			},
			openPop() {
				this.isShowPop = true;
			},
			selectPayType(value) {
				this.queryParams.payType = value;
			},
			selectInspectionStatus(value) {
				this.queryParams.chooseStatus = value;
			},
			async getCustomerSource() {
				let res = await request({
					url: '/partnerOwn/partner/getCustomerSource',
					method: 'get',
				})
				this.customerSource = res.data

				//商品类型
				let resx = await request({
					url: '/system/inspectionGoods/partnerGoodsListCol',
					method: 'get',
				})
				this.goodsList = resx.data.goodsList
			},
			handleCustomerSourceConfirm(e) {
				this.queryParams.customerSource = e.value[0].value; // 获取用户选择的客户来源
				this.isShowCustomer = false; // 关闭选择器
			},
			handleGoodsConfirm(e) {
				this.queryParams.goods = e.value[0].value; // 获取用户选择的客户来源
				this.goodsName = e.value[0].label; // 获取用户选择的客户来源
				this.isShowGoods = false; // 关闭选择器
			},
			search() {
				this.getTableData();
				this.isShowPop = false;
			},
			clearCustomerSource() {
				this.$nextTick(() => {
					this.queryParams.customerSource = null; // 清空客户来源
				})
			},
			handleClick() {
				if (this.queryParams.customerSource) {
					this.clearCustomerSource();
				} else {
					this.isShowCustomer = true;
				}
			},
			handleGoodsClick() {
				if (this.queryParams.goods) {
					this.queryParams.goods = null;
					this.goodsName = null
				} else {
					this.isShowGoods = true;
				}
			},
			confirmTime(e) {
				const time = formatDate(e.value)
				this.queryParams.startTime = time
				this.queryParams.endTime = time
				this.getTableData()
				this.show = false
			},
			cleanSelectTime() {
				this.queryParams.startTime = null
				this.queryParams.endTime = null
				this.getTableData()
			},
			clearSelection() {
				this.queryParams = {
					queryTime: null,
					pageNum: 1,
					pageSize: 10,
					chooseStatus: "1",
					payType: "",
					startTime: null,
					endTime: null,
					carModelOrCarYear: null,
					customerSource: null,
					goods: null,
					carYear: 0,
				}
				this.getTableData()
				this.isShowPop = false
			},
			// disabledScroll(){
			//   const container = document.querySelector('.content');  content.scrollTop = 0;
			//   console.log('container',container)
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		padding-top: 200rpx;
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		box-sizing: border-box;
		background: #f4f5f6;
	}

	.t_left {
		width: 200rpx;
		border: 2px solid #327DFB;
		background: #e3ecfb;
		color: #327DFB;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 5px 10px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx;
	}

	.title_ {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #101A3E;
		padding-left: 15rpx;
	}

	.box_ {
		margin-bottom: 30rpx;
	}

	.box_cont {
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 8px;
		background: #fff;
		width: 100%;
		margin-top: 30rpx;
	}

	.d_s {
		display: flex;
		align-items: center;
	}

	.d_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.num_ {
		width: 36rpx;
		height: 36rpx;
		background: #327DFB;
		color: #fff;
		display: flex;
		align-items: center;
		border-radius: 50%;
		justify-content: center;
		margin-right: 10px;
	}

	.name_ {
		margin-right: 10px;
		font-size: 32rpx;
		color: #101A3E;
	}

	.icon_ {
		background: #e3ecfb;
		color: #327DFB;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 5rpx 20rpx;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.h_ {
		font-size: 28rpx;
		color: #8D90A6;
	}

	.n_ {
		font-size: 28rpx;
		color: #101A3E;
		display: inline-block;
		max-width: 3em;
		/* 约等于4个汉字的宽度 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.box_hang {
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
		margin-bottom: 20rpx;
	}

	.popup-content {
		padding: 20rpx 20rpx 20rpx 20rpx;
		overflow-y: scroll;
		background: white;
		border-radius: 20rpx;
		//height: 80vh;
	}

	.popup-header {
		font-size: 32rpx;
		color: #101A3E;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.popup-body {
		font-size: 28rpx;
		color: #101A3E;
	}

	.filter-section {
		margin-top: 30rpx;
	}

	.filter-section text {
		display: block;
		margin-bottom: 10rpx;
	}

	.options {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		//justify-content: space-between;
		margin-top: 30rpx;
	}

	.options text {
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
	}

	.popup-footer button {
		padding: 10rpx 20rpx;
		margin: 0 10rpx;
		border-radius: 5px;
		background-color: #327DFB;
		color: #fff;
		border: none;
	}

	.options_content {
		background: #F7F8FC;
		border-radius: 15rpx;
		width: 210rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border: 2rpx solid transparent;
		margin-top: 10rpx;
		transition: all 0.3s ease;

		&.selected {
			border-color: #327DFB;
			background-color: rgba(50, 125, 251, 0.1);
			color: #327DFB;
		}
	}

	.filter-section .options u-icon {
		margin-left: 10rpx;
	}

	.top_ {
		display: flex;
		justify-content: space-between;
		align-items: center;
		//position: fixed;
		//background: coral;
		width: 100%;
		//margin-bottom: 1rpx;
	}
</style>