<template>
	<view class="page" @touchome.stop.prevent="preventHandler">

		<view class="search">

			<view class="search-input">
				<image class="search-input-img" src="../../static/baseIcon/search.png" mode="aspectFill"></image>
				<input class="search-input-text" placeholder="输入项目名称" @input="searchInput" :disabled="false" />
			</view>

			<text class="search-text" @click="drawerClick">筛选</text>

		</view>

		<scroll-view class="scrollviewCss" scroll-y="false" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="45" refresher-background="#f8f8f8" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrollBottem">

			<view>
				<view v-for="(item,index) in dataList" class="newslist" @click="itemClick(item)">

					<view class="item">

						<view class="item-name" v-html="highLight(item.projectName)">{{item.projectName}}</view>
						<text class="item-date">{{item.orderDate}}</text>

					</view>
					<text class="item-num">{{item.pledgeRatePercent}}%</text>
					<image src="../../static/baseIcon/zy.png" style="width: 15px;height: 15px;margin-left: 5px;"
						mode="aspectFill">
					</image>

				</view>


			</view>
			<!-- 加载....没有更多 -->
			<view style="line-height: 60rpx;margin-bottom: 50rpx;">
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</scroll-view>

		<uni-drawer ref="drawer" width="320" mode="right">

			<view class="drawerView">
				<text style="color: #101010;font-size: 16px;font-weight: 600;font-family: sans-serif;">申请日期</text>
				<view class="drawerView-date">
					<input class="drawerView-date-text" v-model="listQuery.params.dataDateStart" placeholder="开始日期"
						:disabled="true" @click="openDate(1)">
					<text style="margin-left: 10px;margin-right: 10px;color: #777;">至</text>
					<input class="drawerView-date-text" v-model="listQuery.params.dataDateEnd" placeholder="结束日期"
						:disabled="true" @click="openDate(2)">
				</view>

				<!-- <text
					style="color: #101010;font-size: 16px;font-weight: 600;font-family: sans-serif; margin-top: 20px;">选择项目</text> -->


				<!-- 	<scroll-view scroll-y :show-scrollbar="true"
					style="display: flex;flex-direction: column; margin-top: 20px;width: 100%; height:50%; overflow:auto;">

					<view class="to_do_content_list" :class="{'to_do_finish':item.checked}"
						v-for="(item,index) in personnelList" :key="index" @click="select(item.id)">
						<view class="to_do_content_list_checkbox">
							<view class="checkbox"></view>
						</view> -->
				<!-- 内容 -->
				<!-- 	<view class="to_do_content_list_cont">{{item.date}}</view>
					</view>



				</scroll-view> -->




				<view class="drawerView-bom">

					<text class="drawerView-bom-text1" @click="resetClik">重置</text>
					<text class="drawerView-bom-text2" @click="assignClick">确定</text>

				</view>

				<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay='true' @close="cancelClick"
					@cancel="cancelClick" @confirm="confirmClick" :show="datetimeShow" v-model="selectDate" mode="date"
					:formatter="formatter">

				</u-datetime-picker>

			</view>

		</uni-drawer>
	</view>


</template>

<script>
	import {
		formatTimeTwo
	} from "@/utils/index";
	export default {
		data() {
			return {
				searchText: "",
				search: {
					calculatedValue: "",
					endDate: "",
				},
				selectDate: "",
				datetimeShow: false,
				datetimeIndex: "1",
				personnelList: [

				],
				triggered: true,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '拉也没用，没有了'
				},
				listQuery: {
					current: 1,
					size: 10,
					params: {
						projectName: "",
						dataDateStart: "",
						dataDateEnd: "",
					}
				},
				loadingType: 'more', //加载更多状态
				dataList: [

				],

			};
		},

		onShow() {
			this.listQuery.current = 1
			this.dataList = [];
			this.loadData();
		},
		onLoad() {

		},
		// onPullDownRefresh() {
		// 	this.listQuery.current = 1
		// 	this.loadData('refresh');
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 2000);
		// },
		// //加载更多
		// onReachBottom() {

		// },
		onReady() {
			/*  #ifdef  MP-WEIXIN */
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			/* #endif */
		},
		methods: {
			// 禁止滑动
			preventHandler() {
				return
			},
			/* 滚动到底部 */
			scrollBottem() {
				console.log("滚动高度")
				this.status = "nomore"
				console.log("长度：》》》", this.dataList.length);
				this.listQuery.current = this.listQuery.current + 1
				this.loadData();
			},
			onRefresh() {
				// setTimeout(() => {

				// }, 2000)
				console.log("进入");

				this.listQuery.current = 1
				this.loadData('refresh');
				setTimeout(function() {
					this.triggered = false;
					uni.stopPullDownRefresh();
				}, 2000);
			},
			/* 下拉被复位 */
			onRestore() {
				this.triggered = true; // 需要重置
				console.log(this.triggered);
				console.log("停止");
			},
			/* 下拉被中止，没下拉完就松手就会触发 */
			onAbort() {
				console.log("onAbort");
			},
			searchInput(e) {
				console.log("searchText》》》", e.detail.value);
				this.searchText = e.detail.value
				
				this.listQuery.params.projectName = this.searchText
				this.listQuery.current = 1
				this.dataList = [];
				console.log("searchInput>>",this.listQuery);
				this.loadData("refresh");
			},
			highLight(value) {
				console.log("highLight》》》", value);
				if (value == '' || value == undefined || value == null)
					return
				if (value.includes(this.searchText)) {
					value = value.replace(
						this.searchText,
						"<font style='color:red!important'>" + this.searchText + "</font>"
					)
					return value
				} else {
					return value
				}
			},
			drawerClick() {
				this.$refs['drawer'].open()
			},
			openDate(type) {
				switch (type) {
					case 1:
						this.datetimeIndex = "1"
						this.datetimeShow = true
						break;
					case 2:
						this.datetimeIndex = "2"
						this.datetimeShow = true
						break;
					default:
						break;
				}
			},
			formatter(type, value) {

				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			cancelClick() {
				this.datetimeShow = false
			},
			confirmClick(date) {
				console.log('confirmClick', date)
				console.log('confirmClick', formatTimeTwo(parseInt(date.value), "Y-M-D"))

				switch (this.datetimeIndex) {
					case "1":
						this.listQuery.params.dataDateStart = formatTimeTwo(parseInt(date.value), "Y-M-D")
						break;
					case "2":
						this.listQuery.params.dataDateEnd = formatTimeTwo(parseInt(date.value), "Y-M-D")
						break;
					default:
						break;
				}
				this.datetimeShow = false

			},
			// 点击item 选中
			select(id) {

				for (var i = 0; i < this.personnelList.length; i++) {
					let item = this.personnelList[i]

					if (item.id == id) {
						item.checked = !item.checked
					} else {
						item.checked = false
					}

				}

				let index = this.personnelList.findIndex((item) => item.id == id)
				console.log("我被点击了", this.personnelList[index].date);

				// 	this.personnelList[index].checked = !this.personnelList[index].checked
			},
			resetClik() {
				this.listQuery.params = {
					dataDateStart: "",
					dataDateEnd: "",
				}
			},

			assignClick() {
				console.log('confirm', this.listQuery)
				this.datetimeShow = false
				this.listQuery.params.projectName = this.searchText
				this.listQuery.current = 1
				this.dataList = [];
				this.$refs['drawer'].close()

				this.loadData("refresh");
				// uni.showToast({
				// 	icon: "none",
				// 	title: JSON.stringify(this.listQuery),
				// 	duration: 5000,
				// });
			},

			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}

				var list = []
				console.log('loadData', this.listQuery)
				this.$api.projectListPage(this.listQuery).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)

					this.listQuery.current=resp.current,
					list = resp.records

					console.log("消息列表", list)
					// this.goodsList = list;
					// let goodsList = await this.$api.json('goodsList');
					if (type === 'refresh') {
						this.dataList = [];
					}

					this.dataList = this.dataList.concat(list);
					console.log("消息列表>>>>>", this.dataList.length)
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType = this.dataList.length > list.total ? 'nomore' : 'more';
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}

				}).catch(e => {
					console.log('eeeee', e)
				})

			},
			itemClick(item) {
				console.log('itemClick', item)
				uni.navigateTo({
					url: '../index/RegulatoryReporting?projectSid=' + item.projectSid + "&orderDate=" + item.orderDate
				});
			}
		}
	}
</script>

<style lang="scss">
	.popup-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.page {
		width: 100%;
		height: 100%;

		.drawerView {
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 15px 20px;
			background: #fff;

			.drawerView-date {
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.drawerView-date-text {
					text-align: center;
					background-color: #F4F5F9;
					border-radius: 20px;
					padding: 10px 20px;
					font-size: 14px;
				}
			}

			.to_do_content_list {
				position: relative;
				padding: 15px;
				margin: 15px;
				border-radius: 5px;
				background: #eee;
				color: #666;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

			// .to_do_content_list::after {
			// 	position: absolute;
			// 	content: "";
			// 	top: 0;
			// 	bottom: 0;
			// 	left: 0;
			// 	width: 10px;
			// 	background: #2C405A;

			// }

			.to_do_content_list_checkbox {
				padding-right: 20px;
				padding-left: 10px;
			}

			.checkbox {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #FFFFFF;
			}

			.to_do_finish .checkbox {
				position: relative;
				background: #FFFFFF;
			}

			.to_do_finish .checkbox:after {
				position: absolute;
				content: "";
				height: 10px;
				width: 10px;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				border-radius: 50%;
				background: #007AFF;
			}

			.to_do_finish .to_do_content_list_cont {
				color: #007AFF;
			}

			// .to_do_finish.to_do_content_list:before {

			// 	position: absolute;
			// 	content: "";
			// 	left: 40px;
			// 	right: 10px;
			// 	top: 0;
			// 	bottom: 0;
			// 	height: 2px;
			// 	margin: auto 0;
			// 	background: #007AFF;
			// }

			.to_do_finish.to_do_content_list::after {
				background: #C35CDF;
			}


			.drawerView-bom {
				width: 85%;
				position: fixed;
				display: flex;
				flex-direction: row;
				align-items: center;
				bottom: 0;
				min-height: 40px;
				margin-bottom: 50px;
				background: #EA4726;
				border-radius: 20px;
				padding: 1px;

				.drawerView-bom-text1 {
					flex: 1;
					text-align: center;
					min-height: 38px;
					line-height: 38px;
					color: #EA4726;
					background: #fff;
					font-size: 14px;
					border-radius: 20px 0px 20px 20px;
					// border-top-left-radius: 20px;
					// border-bottom-left-radius: 20px;
					// border-bottom-right-radius:20px;
				}

				.drawerView-bom-text2 {
					flex: 1;
					line-height: 38px;
					color: #fff;
					font-size: 14px;
					text-align: center;
				}
			}

		}

		.search {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #007AFF;
			width: 100%;
			padding: 10px;

			.search-input {
				flex: 1;
				margin-left: 15px;
				background: #fff;
				border-radius: 30px;
				padding: 5px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 35px;

				.search-input-img {
					margin-left: 10px;
					width: 20px;
					height: 20px;
				}

				.search-input-text {
					margin-left: 10px;
					font-size: 14px;
					color: #000;
				}
			}

			.search-text {
				margin-right: 30px;
				font-size: 15px;
				color: #fff;
			}
		}

		.scrollviewCss {
			overflow-y: hidden;
			height: 90vh;

			.newslist {
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #fff;
				border-radius: 12px;
				margin-left: 12px;
				margin-right: 12px;
				margin-top: 12px;
				padding: 15px 20px;

				.item {
					flex: 1;
					display: flex;
					flex-direction: column;

					.item-name {
						font-size: 16px;
						color: #000;
						font-weight: 1000;
						font-family: sans-serif;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin-right: 20px;
					}

					.item-date {
						margin-top: 10px;
						font-size: 14px;
						color: #717171;
					}

				}

				.item-num {
					font-size: 13px;
					color: #fff;
					background: #F67E35;
					border-radius: 15px;
					padding: 5px 10px;

				}


			}
		}
	}
</style>