<template>
	<view class="">
		<view class="top">
			<view class="top_left">
				<image src="../../static/images/my/date.png" mode="" style="margin-right: 20rpx;"></image>
				<!-- <view class="top_left_1">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"
						fields="month">
						<view class="uni-input" style="font-size:28rpx;">{{date}}</view>
					</picker>
				</view> -->
				<view class="top_left_1">
					<picker mode="date" :value="date" :start="startDate" :end="date2" @change="bindDateChange">
						<view class="uni-input" style="font-size:28rpx;">{{ date }}</view>
					</picker>
				</view>
				<view class="xian" style="padding: 0 10rpx"> -- </view>
				<view class="top_left_1">
					<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
						<view class="uni-input" style="font-size:28rpx;">{{ date2 }}</view>
					</picker>
				</view>
			</view>
			<view class="top_right">
				<image src="../../static/images/my/shaixuan_white.png" mode="" @click="click_shaixuan"></image>
				<image src="../../static/images/my/chaxun_white.png" mode="" @click="is_show_search_fun"></image>
			</view>
			<!-- 筛选  -->
			<view class="search_box" v-if="show_shaixuan">
				<view :class="isEnabled==0?'search_box_item isEnabled':'search_box_item'" @click="isEnabled_fn(0)"> 全部
				</view>
				<view :class="isEnabled==1?'search_box_item isEnabled':'search_box_item'" @click="isEnabled_fn(1)"> 未接单
				</view>
				<view :class="isEnabled==2?'search_box_item isEnabled':'search_box_item'" @click="isEnabled_fn(2)"> 已接单
				</view>
				<view :class="isEnabled==3?'search_box_item isEnabled':'search_box_item'" @click="isEnabled_fn(3)"> 已完成
				</view>
				<view :class="isEnabled==4?'search_box_item isEnabled':'search_box_item'" @click="isEnabled_fn(4)"> 已评价
				</view>
			</view>

		</view>
		<view class="search" v-if="is_show_search">
			<uni-search-bar style="width: 100%;padding: 0;" bgColor="white" placeholder="搜索" v-model="serchValue"
				@input="onSearch" clearButton="none"></uni-search-bar>
		</view>
		<scroll-view 
			:style="is_show_search?'margin-top: 80rpx;':''" 
			class="bottom" 
			@scrolltolower='Scrolltolower'
			scroll-y="true" 
			:refresher-triggered="triggered" 
			@refresherrefresh="onRefresh" 
			refresher-enabled="true"
		>
			<view class="bottom_item" v-for="item in data_list" :key="item.id" @click="to_returns_details(item.id)">
				<view class="item_top">
					<view class="item_top_l">
						<!-- 【{{item.vehicleCode}}】 {{item.orderVehiclePerson}} -->
						<image src="/static/images/dispatch/task_lu.png"></image>
						<view class="item_top_l_text">
							{{item.orderTitle}}
						</view>
					</view>
					<view class="item_top_r">
						【{{item.vehicleCode}}】|{{item.orderVehicleDriverName}}
					</view>
					<view class="item_top_status">
						{{item.statusName}}
					</view>
					<view class="item_top_status2">
					</view>
				</view>
				<view class="item_content" style="text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;">
					{{item.orderContent}}
				</view>
				<view class="item_bottom">
					<view class="item_bottom_l" style="display: flex;">
						<image src="../../static/images/my/time.png" mode="widthFix"
							style="width: 30rpx;height:30rpx;margin-right: 10rpx;"></image>
						<view>
							{{item.arriveDate}}
						</view>
					</view>
					<view class="item_bottom_r">
						{{item.assignUserName}}
					</view>
				</view>
			</view>
			<view style="text-align: center; padding: 20rpx; color: #b3b3b3;" v-if="totalCount==0">
				没有数据~
			</view>
			<view style="text-align: center; padding: 20rpx; color: #b3b3b3;"
				v-if="totalCount==data_list.length&&data_list.length>8">
				没有更多数据~
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const {
		urlList,
		https
	} = require('@/static/api');
	export default {
		data() {
			return {
				show_shaixuan: false,
				// 日期
				startDate: '1999-05',
				startDate2: '1999-05',
				endDate: new Date(),
				date: '',
				date2: '',
				isLoading: false, //是否在加载中
				serchValue: '',
				startTime: '',
				endTime: '',
				currentPage: 1,
				pageSize: 7,
				isEnabled: 0,
				data_list: [],
				is_no: false,
				is_show_search: false,
				triggered: true,
				totalCount: 1,
			};
		},
		onLoad() {
			var year = new Date().getFullYear()
			var methods = new Date().getMonth() + 1
			var day = new Date().getDate();
			if (methods < 10) {
				methods = '0' + methods
			}
			if (day < 10) {
				day = "0" + day;
			}
			var endday = new Date(year, methods, 0).getDate()
			this.date = year + "-" + methods + "-01"
			this.date2 = year + "-" + methods + "-" + day;
			this.startTime = `${this.date} 00:00:00`;
			this.startDate2 = this.date2;
			this.endTime = `${this.date2} 23:59:59`;
			this.get_list();
		},
		methods: {
			onRefresh() {
				if (!this.isLoading) {
					this.triggered = true;
					this.isLoading = true;
					this.currentPage = 1;
					this.data_list = [];
					this.get_list();
				}
			},
			is_show_search_fun() {
				this.is_show_search = !this.is_show_search
				this.show_shaixuan = false
			},
			onSearch() {
				console.log(this.serchValue);
				if (!this.isLoading) {
					this.isLoading = true;
					this.currentPage = 1;
					this.data_list = [];
					this.get_list();
				}
			},
			Scrolltolower() {
				if (this.is_no == true) {
					return
				}
				this.currentPage = this.currentPage + 1;
				this.get_list();
			},
			click_shaixuan(e) {
				//点击筛选
				this.is_show_search = false
				this.show_shaixuan = !this.show_shaixuan
			},
			bindDateChange(e) {
				this.date = e.detail.value;
				this.startTime = `${this.date} 00:00:00`;
				this.currentPage = 1;
				this.data_list = [];
				this.get_list();
			},
			bindDateChange2(e) {
				this.date2 = e.detail.value;
				this.endTime = `${this.date2} 23:59:59`;
				this.currentPage = 1;
				this.data_list = [];
				this.get_list();
			},
			isEnabled_fn(e) { //确认筛选
				console.log(e)
				this.isEnabled = e
				if (!this.isLoading) {
					this.isLoading = true;
					this.currentPage = 1;
					this.data_list = [];
					this.get_list();
				}
				this.show_shaixuan = false
			},
			get_list() {
				var url = urlList.orders_query
				var data = {
					startTime: this.startTime,
					endTime: this.endTime,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					status: this.isEnabled,
					key: this.serchValue
				};
				console.log(data);
				https(url, 'GET', data, '').then(res => {
					this.totalCount = res.data.totalCount
					this.isLoading = false;
					this.triggered = false;
					if (res.data.items.length != 0) {
						this.data_list = [...this.data_list, ...res.data.items]
						this.is_no = false
					} else {
						this.is_no = true
					}
				}).catch(err => {
					console.log(err)
				})
			},
			to_returns_details(id) {
				uni.navigateTo({
					url: "/pages/taskInfo/taskInfo?id=" + id + "&is_query=1",
				});
			}
		}
	}
</script>

<style lang="scss">
	.top {
		background: #3476fe;
		color: white;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		box-sizing: border-box;
		height: 88rpx;
		position: relative;

		.top_left {

			display: flex;
			align-items: center;
			flex: 1;
			margin-left: 20rpx;

			.top_left_1 {}

			image {
				width: 40rpx;
				height: 40rpx;
			}

		}

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

			.top_right_1 {
				padding: 4rpx 10rpx;
				margin-right: 20rpx;
				border-radius: 4rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;

			}
		}

		.search_box {
			position: absolute;
			width: 120rpx;
			top: 88rpx;
			box-shadow: #ebebeb 2px 2px 2px;
			text-align: center;
			background: white;
			border-radius: 10rpx;
			font-size: 24rpx;
			left: 620rpx;
			border: solid 1rpx #ebebeb;
			z-index: 9999;
			color: #333;

			.search_box_item {
				padding: 10rpx 0;
			}

			.isEnabled {
				background: #5597ed;
				color: white;
				border-radius: 10rpx;
			}
		}

	}

	.yearspicker_box {
		position: fixed;
		height: 50vh;
		width: 100vw;
		left: 0;
		bottom: 0;
		z-index: 99;
	}

	.top_search {
		height: 8vh;
		background: #f3f4f6;
	}

	.search {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 88rpx;
		left: 0;
		z-index: 50;
		background: white;
	}

	.bottom {
		height: calc(100vh - 88rpx);
		box-sizing: border-box;
		background: #f4f4f4;
		padding: 20rpx;
		font-size: 24rpx;
		padding-bottom:0;
		.uni-searchbar {
			padding: 0 !important;
		}

		.bottom_item {
			background: white;
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			.item_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.item_top_l {
					display: flex;
					align-items: center;
					font-weight: bold;
					color: #353535;
					font-size: 30rpx;

					.item_top_l_text {
						white-space: normal;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					image {
						margin-right: 6rpx;
						height: 36rpx;
						width: 36rpx;
					}
				}

				.item_top_r {
					width: 200rpx;
					text-align: left;
					color: #c2c1c2;
					font-weight: 600;
					font-size: 24rpx;
					white-space: normal;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.item_top_status{
					position: absolute;
					color: #fff;
					top: 18rpx;
					right: 2rpx;
					font-size: 20rpx;
					z-index: 99;
					transform:rotate(45deg);
				}
				.item_top_status2{
					position: absolute;
					border-left: transparent 46rpx solid;
					border-right:#3476fe  46rpx solid;
					border-top: #3476fe  46rpx solid;
					border-bottom: transparent 46rpx solid;
					width: 0;
					// background: transparent;
					// #03a2e
					height: 0;
					top: 0;
					right: 0;
				}
			}

			.item_content {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #555555;
				line-height: 40rpx;
			}

			.item_bottom {
				border-top: 1rpx solid #eee;
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				color: #888888FF;
				font-size: 26rpx;
				justify-content: space-between;

				.item_bottom_l {}

				.item_bottom_r {}
			}
		}
	}
</style>
