<template>
	<view>
		<headersVue :titles="title" style="position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="t_left" @click="isShowPop = true">筛选
			<u-icon name="arrow-down-fill" color="#327DFB" size="14"></u-icon>
		</view>
		<view class="content">
			<scroll-view class="school-scroll-view" scroll-y @scrolltolower="onReachBottomCus"
				:style="{ height: scrollHeight + 'px' }" refresher-enabled @refresherrefresh="onRefresherrefresh"
				:refresher-triggered="isTriggered" v-if="orderList && orderList.length > 0">
				<order-item v-for="(item, index) in orderList" :key="index" :order-data="item"
					@click="goDetail(item)" />
			</scroll-view>
			<u-empty mode="list" style="background: white;" v-else>
			</u-empty>
		</view>
		<u-popup round="55" :show="isShowPop" @close="closePop" @open="openPop">
			<view class="popup-content" :style="{'height':windowsHeight + 'px'}">
				<view class="popup-header">
					<text>选择筛选项</text>

					<view style="display: flex;justify-content: space-between" @click="closePop">
						<u-icon name="close-circle" size="18" color="#327DFB"></u-icon>
						<text style="color:#327DFB;">清除筛选项</text>
					</view>
				</view>
				<view style="margin-top: 20rpx">
					<uni-datetime-picker v-model="queryParams.datetimeRange" type="daterange" rangeSeparator="至" />
				</view>
				<scroll-view scroll-y="true" class="scroll_view_style" style="height: 50%;">
					<view class="popup-body">
						<view style="">
							<!-- 客户来源选择 -->
							<view class="filter-section">
								<text>业务渠道</text>
								<view class="options">
									<uni-data-select v-model="queryParams.bussiness"
										:localdata="bussinessList"></uni-data-select>
								</view>
							</view>
							<!-- 车型选择 -->
							<view class="filter-section">
								<text>客户来源</text>
								<view class="options">
									<uni-data-select v-model="queryParams.customSource"
										:localdata="customerSourceList"></uni-data-select>
								</view>
							</view>
							<view class="filter-section">
								<text>检测项目</text>
								<view class="options">
									<uni-data-select v-model="queryParams.projectId"
										:localdata="projectList"></uni-data-select>
								</view>
							</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>
	</view>
</template>

<script>
	import headersVue from '../../../components/header/headers.vue';
	import OrderItem from '@/components/order-list.vue'
	import request from '../../../utils/request';

	export default {
		data() {
			return {
				scrollHeight: 0,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					userId: null,
					customSource: null,
					projectId: null,
					bussiness: null
				},
				windowsHeight: 600,
				isTriggered: false,
				orderList: null,
				pageNo: 1,
				pageSize: 10,
				totalPages: 0,
				title: undefined,
				isShowPop: false,
				bussinessList: [],
				customerSourceList: [],
				projectList: [],
			}
		},
		methods: {
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				console.log('totalPages', this.totalPages);
				if (this.pageNo >= this.totalPages) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.pageNo++
				//此处调用自己获取数据列表的方法
				this.getList()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.pageNo = 1
				this.total = 0
				this.schoolList = []
				this.getList()
			},
			goDetail(data) {
				console.log('data', data)
				uni.navigateTo({
					url: "/pages/index/orderdetails?inspectionInfoId=" + data.inspectionInfoId
				})
			},
			calculateScrollHeight() {
				// 获取屏幕高度
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				// 获取顶部区域高度
				const topHeight = 240;
				// 计算滚动区域高度
				this.scrollHeight = screenHeight - topHeight;
			},
			closePop() {
				this.isShowPop = false;
				this.queryParams = {}
				this.queryParams.pageNo = 1
			},
			submitPop() {
				this.queryParams.pageNum = 1;
				this.tableData = null
				this.onRefresherrefresh();
				this.isShowPop = false;
			},
			openPop() {
				this.isShowPop = true;
			},
			async getList() {
				const res = await request({
					url: `/inspectionStaff/getFinishProjectByUserId`,
					methods: 'GET',
					params: this.queryParams
				})
				if (this.pageNo == 1) {
					this.orderList = res.data.records
				} else {
					this.orderList = this.orderList.concat(res.data.records)
				}
				let total = res.data.total
				this.totalPages = Math.ceil(total / this.pageSize);
				this.isTriggered = false
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			async getUserInfo() {
				const res = await request({
					url: `/system/user/get?id=${this.queryParams.userId}`,
					methods: 'get'
				})
				console.log('当前登陆人', res.data);
				this.title = res.data.nickname + '项目列表'
			},
			getBusiness() {
				request({
					url: '/channel/tree',
					method: 'get',
				}).then((res) => {
					// 在reres.data.records中找出type为1的所有书数据
					res.data.forEach(item => {
						item.text = item.name
						item.value = item.name
					})
					this.bussinessList = res.data.filter(item => item.type === 0);
					this.customerSourceList = res.data.filter(item => item.type === 1);
					console.log('渠道', this.bussinessList);
					console.log('来源', this.customerSourceList);
				});
			},
			async getInspectionProject() {
				const res = await request({
					url: '/inspection/dl-inspection-project/page',
					method: 'get',
					params: {
						pageNo: 1,
						pageSize: 10000
					}
				})
				this.projectList = res.data.records
				this.projectList.forEach(item => {
					item.text = item.projectName
					item.value = item.id
				})
			},
		},
		onReady() {
			// 动态计算滚动区域高度
			this.calculateScrollHeight();
			uni.getSystemInfo({
				success: function(res) {
					this.windowsHeight = res.windowHeight;
					console.log('屏幕高度：', res.windowHeight);
				}
			});
		},
		onLoad(data) {
			this.getBusiness()
			this.getInspectionProject()
			if (data.userId) {
				this.queryParams.userId = data.userId
				this.getUserInfo()
				this.getList()
			}
			if (data.customerSource) {
				this.queryParams.customerSource = data.customerSource
				this.getList()
				this.title = '项目列表'
			}

		},
		components: {
			headersVue,
			OrderItem // 这里使用大驼峰命名
		},
	}
</script>

<style>
	.content {
		background-color: #f7f8fa;
		/* min-height: 100vh; */
		padding: 20rpx;
		box-sizing: border-box;
		//padding-top: 200rpx;
	}

	.school-scroll-view {
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		padding: 10rpx 0;
	}

	.uni-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1px solid #f5f5f5;
		font-size: 32rpx;
		color: #333;
		line-height: 80rpx;
		font-weight: bold;
	}

	.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;
	}

	.uni-popup-body {
		padding: 20rpx;
		background-color: #fff;
	}

	.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;
	}
</style>