<template>
	<view class="container">
		<view class="containerBody">
			<VNavigationBar title="配件统计" background-color="rgba(0,0,0,0)" title-color="#333"></VNavigationBar>
			<view class="body">
				<uni-card title="申请统计" :isFull="false">
					<commonTimeSelect v-model="requestQueryParams.dateRange"
						@subsection-change="selectRequestStatistics()">
					</commonTimeSelect>

					<!-- 添加统计数据展示 -->
					<view class="statistics" v-if="requestData"
						@click="goDetailList(requestQueryParams.dateRange,'request')">
						<view class="stat-item">
							<text class="label">车辆台次：</text>
							<text class="value">{{ requestData.carCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">申请次数：</text>
							<text class="value">{{ requestData.applyTimes || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">配件总数：</text>
							<text class="value">{{ requestData.totalWaresCount || 0 }}</text>
						</view>
					</view>
				</uni-card>
				<uni-card title="申请列表" :isFull="false">
					<commonTimeSelect v-model="accessoriesRequestListQueryParams.dateRange"
						@subsection-change="selectAccessoriesRequestListStatistics()">
					</commonTimeSelect>

					<!-- 添加统计数据展示 -->
					<!-- <view class="statistics">
						<view class="stat-item">
							<text class="label">车牌号</text>
						</view>
						<view class="stat-item">
							<text class="label">车主</text>
						</view>
						<view class="stat-item">
							<text class="label">申请次数</text>
						</view>
						<view class="stat-item">
							<text class="label">配件总数</text>
						</view>
						<view class="stat-item">
							<text class="label">领用数量</text>
						</view>
					</view>
					<view v-if="accessoriesRequestListData.length != 0" @click="goWorkDetail(item.ticketId)"
						v-for="item in accessoriesRequestListData">
						<view class="statistics">
							<view class="stat-item">
								<text class="value">{{ item.carNo || '' }}</text>
							</view>
							<view class="stat-item">
								<text class="value">{{ item.userName || '' }}</text>
							</view>
							<view class="stat-item">
								<text class="value">{{ item.partsApplyCount || 0 }}</text>
							</view>
							<view class="stat-item">
								<text class="value">{{ item.totalApplyQuantity || 0 }}</text>
							</view>
							<view class="stat-item">
								<text class="value">{{ item.receivedQuantity || 0 }}</text>
							</view>
						</view>
					</view> -->

					<uni-row class="demo-uni-row">
						<uni-col :span="5">
							<view class="demo-uni-col dark">车牌号</view>
						</uni-col>
						<uni-col :span="7">
							<view class="demo-uni-col dark">车主</view>
						</uni-col>
						<uni-col :span="4">
							<view class="demo-uni-col light">申请次数</view>
						</uni-col>
						<uni-col :span="3.5">
							<view class="demo-uni-col light">配件总数</view>
						</uni-col>
						<uni-col :span="3.5">
							<view class="demo-uni-col light">领用数量</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row" v-for="(item, index) in accessoriesRequestListData">
						<view @click="goWorkDetail(item.ticketId)">
							<uni-col :span="6">
								<view class="demo-uni-col dark">{{ item.carNo || '' }}</view>
							</uni-col>
							<uni-col :span="8">
								<view class="demo-uni-col dark">{{ item.userName || '' }}</view>
							</uni-col>
							<uni-col :span="4">
								<view class="demo-uni-col light">{{ item.partsApplyCount || 0 }}</view>
							</uni-col>
							<uni-col :span="3">
								<view class="demo-uni-col light">{{ item.totalApplyQuantity || 0 }}</view>
							</uni-col>
							<uni-col :span="3">
								<view class="demo-uni-col light">{{ item.receivedQuantity || 0 }}</view>
							</uni-col>
						</view>
					</uni-row>
					<view v-if="accessoriesRequestListData.length == 0">
						<u-empty mode="data">
						</u-empty>
					</view>
				</uni-card>
				<uni-card title="采购统计" :isFull="false">
					<commonTimeSelect v-model="procurementQueryParams.dateRange"
						@subsection-change="selectProcurementStatistics()">
					</commonTimeSelect>

					<!-- 添加统计数据展示 -->
					<view class="statistics" v-if="procurementData"
						@click="goDetailList(procurementQueryParams.dateRange,'procurement')">
						<view class="stat-item">
							<text class="label">车辆台次：</text>
							<text class="value">{{ procurementData.carCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">采购次数：</text>
							<text class="value">{{ procurementData.useTimes || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">采购总数：</text>
							<text class="value">{{ procurementData.totalGoodsCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">采购金额：</text>
							<text class="value">{{ procurementData.totalGoodsMoney || 0 }}</text>
						</view>
					</view>
				</uni-card>
				<uni-card title="领用统计" :isFull="false">
					<commonTimeSelect v-model="pickingQueryParams.dateRange"
						@subsection-change="selectPickingStatistics()">
					</commonTimeSelect>

					<!-- 添加统计数据展示 -->
					<view class="statistics" v-if="pickingData"
						@click="goDetailList(pickingQueryParams.dateRange,'picking')">
						<view class="stat-item">
							<text class="label">车辆台次：</text>
							<text class="value">{{ pickingData.carCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">领用次数：</text>
							<text class="value">{{ pickingData.useTimes || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">领用总数：</text>
							<text class="value">{{ pickingData.totalGoodsCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="label">领用金额：</text>
							<text class="value">{{ pickingData.totalGoodsMoney || 0 }}</text>
						</view>
					</view>
				</uni-card>
				<uni-card title="完成率统计" :isFull="false">
					<commonTimeSelect v-model="completionRateQueryParams.dateRange"
						@subsection-change="selectCompletionRateStatistics()">
					</commonTimeSelect>

					<!-- 添加统计数据展示 -->
					<view class="statistics">
						<view class="stat-item">
							<text class="label">车牌号：</text>
						</view>
						<view class="stat-item">
							<text class="label">完成率：</text>
						</view>
						<view class="stat-item">
							<text class="label">采购总数：</text>
						</view>
						<view class="stat-item">
							<text class="label">领用数量：</text>
						</view>
					</view>

					<!-- 添加统计数据展示 -->
					<view class="statistics" v-if="completionRateData" v-for="item in completionRateData"
						@click="goWorkDetail(item.ticketId)">
						<view class="stat-item">
							<text class="value">{{ item.carNo || '' }}</text>
						</view>
						<view class="stat-item">
							<text class="value">{{ item.completionRate || 0 }}%</text>
						</view>
						<view class="stat-item">
							<text class="value">{{ item.purchaseTotalCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="value">{{ item.availableCount || 0 }}</text>
						</view>
					</view>

					<view v-if="completionRateData.length == 0">
						<u-empty mode="data">
						</u-empty>
					</view>
				</uni-card>

			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import commonTimeSelect from '@/components/commonTimeSelect.vue'
	export default {
		components: {
			VNavigationBar,
			commonTimeSelect
		},
		data() {
			return {
				requestQueryParams: {
					dateRange: []
				},
				requestData: {},
				procurementQueryParams: {
					dateRange: [],
					type: '01'
				},
				procurementData: {},
				pickingQueryParams: {
					dateRange: [],
					type: '02'
				},
				completionRateData: {},
				completionRateQueryParams: {
					dateRange: []
				},
				accessoriesRequestListData: {},
				accessoriesRequestListQueryParams: {
					dateRange: []
				},
				pickingData: {
					carCount: 0,
					applyTimes: 0,
					totalWaresCount: 0
				},
			}
		},
		onLoad(data) {
			// this.selectRequestStatistics()
			// this.selectProcurementStatistics()
			// this.selectPickingStatistics()
			// this.selectAccessoriesRequestListStatistics()
		},
		methods: {
			selectRequestStatistics() {
				request({
					url: "/admin-api/repair/statistics/accessoriesRequestStatistics",
					params: this.requestQueryParams,
					method: 'get'
				}).then(res => {
					this.requestData = res.data
				})
			},
			selectCompletionRateStatistics() {
				request({
					url: "/admin-api/repair/statistics/vehicles-accessories-completion-rate",
					params: this.completionRateQueryParams,
					method: 'get'
				}).then(res => {
					this.completionRateData = res.data
				})
			},
			selectAccessoriesRequestListStatistics() {
				request({
					url: "/admin-api/repair/statistics/accessoriesRequestListStatistics",
					params: this.accessoriesRequestListQueryParams,
					method: 'get'
				}).then(res => {
					this.accessoriesRequestListData = res.data
				})
			},
			/**
			 * 采购
			 */
			async selectProcurementStatistics() {
				const res = await this.baseProcurementOrPickingStatistics(this.procurementQueryParams)
				this.procurementData = res
			},
			/**
			 * 领料
			 */
			async selectPickingStatistics() {
				const res = await this.baseProcurementOrPickingStatistics(this.pickingQueryParams)
				this.pickingData = res
				console.log('领料', res);
			},
			/**
			 * 采购和领料接口
			 * @param {Object} params
			 */
			async baseProcurementOrPickingStatistics(params) {
				try {
					const res = await request({
						url: "/admin-api/repair/statistics/procurementOrPickingStatistics",
						params: params,
						method: 'get'
					})
					return res.data
				} catch (e) {
					console.error("请求失败:", e)
					return {}
				}
			},
			goWorkDetail(id) {
				const innerUrl = `/pages-order/orderDetail/orderDetail?id=${id}&isDetail=1`
				uni.navigateTo({
					url: innerUrl
				})
			},

			goDetailList(dateRange, type) {
				// 创建 URL 查询参数对象
				let params = {};

				// 只添加不为 null 的参数
				if (dateRange !== null && dateRange !== undefined) {
					params.dateRange = JSON.stringify(dateRange);
				}

				// 只添加不为 null 的参数
				if (type !== null && type !== undefined) {
					params.accessoriesType = JSON.stringify(type);
				}

				// 构建查询字符串
				let queryString = Object.keys(params)
					.map(key => `${key}=${encodeURIComponent(params[key])}`)
					.join('&');

				// 使用构建好的 URL 查询字符串进行页面跳转
				uni.navigateTo({
					url: `/pages-business/statistics/statistics?${queryString}`
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #F3F5F7;

		.containerBody {
			height: 100%;
			display: flex;
			flex-direction: column;
			background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
			background-size: 100% 500rpx;
			background-repeat: no-repeat;
		}

		.body {
			flex: 1;
			height: 0;
			overflow: auto;

			.statistics {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.label {
				font-size: 24rpx;
				color: #888;
			}

			.value {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-top: 5rpx;
			}

		}

	}
</style>