<template>
	<view class="registration_review" :style="vuex_theme">

		<view class="search_box">
			<view style="width: 148px;">
				<u-subsection :list="['未签到','全部']" :current="curNow" :fontSize="26" :activeColor="'#000'"
					@change="sectionChange"></u-subsection>
			</view>
			<view style="display: flex; justify-content: space-between; align-items: center;">
				<u-icon slot="icon" size="40" :name="'/static/img/home/dateIcon.png'" @click="showTime = true"></u-icon>
				<view style="width: 16px;"></view>
				<u-icon slot="icon" size="40" :name="'/static/img/home/search.png'" @click="searchCli"></u-icon>
				<view style="width: 16px;"></view>
				<u-icon slot="icon" size="40" :name="'/static/img/home/selectIcon.png'" @click="show = true"></u-icon>
			</view>
		</view>

		<u-calendar :minDate="minDate" :maxDate="maxDate" :monthNum="25" :show="showTime" :defaultDate="defaultDateMultiple"
			@close="showTime = false" :showSubtitle="false" color="var(--primary-color)" @confirm="confirm">
		</u-calendar>

		<view class="list_box" v-if="list.length > 0">
			<view class="item" v-for="(item, i) in list" :key="i">

				<view class="bg_image" v-if="item.waitAttendance == 'not_attendance'">
					<u-image src="/static/img/home/labelBgGreen.png" width="142rpx" height="48rpx"></u-image>
					<text>未签到</text>
				</view>

				<view class="bg_image" v-else>
					<u-image src="/static/img/home/labelBgGrey.png" width="142rpx" height="48rpx"></u-image>
					<text>已签到</text>
				</view>

				<view class="info">
					<view class="avatar">{{getNameLastTwo(item.studentName)}}</view>
					<view class="name">{{overflowHide(item.studentName)}}</view>
					<view class="number">{{item.studentNumber}}</view>
				</view>
				<view class="company">
					<text>实习项目</text>
					<text>{{item.projectName || '--'}}</text>
				</view>
				<view class="company">
					<text>班级</text>
					<text>{{item.className || '--'}}</text>
				</view>
				<view class="company position">
					<text>手机号</text>
					<text>{{item.studentPhone|| '--'}}</text>
				</view>

				<view class="time">
					<text>签到时间</text>
					<text>{{timeFormat(item.signIn, 'yyyy-mm-dd hh:MM')}}</text>
				</view>

			</view>
			<c-loading :loading="loading"></c-loading>
		</view>
		<view v-else class="no_data">
			<c-no-data></c-no-data>
		</view>
		
		<u-popup :show="show" mode="bottom" @close="close" :round="22">
			<view class="popup">
				<view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px;">
					<view class="title">
						项目筛选
					</view>
					<image class="close" src="/static/img/home/closepop.png" @click="close" mode=""></image>
				</view>
				<view class="search">
					<u-search placeholder="请输入项目关键词搜索" placeholderColor="#C1C1C9" searchIconSize="36" height="64rpx"
						bgColor="#F4F4F4" :showAction="true" shape="round" v-model="sxsearch" @custom="workSearch()" @search="workSearch()">
					</u-search>
				</view>
				<scroll-view v-if="works.length>0" scroll-y="true" style="height: 80%; margin-top: 40rpx;"
					@scrolltolower="lower()">
					<view class="item_box" v-for="(item,index) in works" :key="index" @click="popupSelItem(item)">
						<view style="display: flex; align-items: center; justify-content: space-between;">
							<view class="item_title">
								{{item.name}}
							</view>
							<image v-if="item.id == projectId" style="width: 20px; height: 20px;"
								src="/static/img/home/popselect.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
				<view v-else class="no_data" @click="jumpVerified">
					<view class="text_black_28">
						暂未搜索到该项目
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- <u-popup :show="show" mode="right" @close="close" @open="open" :closeOnClickOverlay="false">
			<view class="popup_search">
				<view class="content">
					<view class="title">按项目筛选</view>
					<scroll-view class="scroll" scroll-y="true">
						<view class="item" v-for="(item, i) in projectList" :key="i" @click="handelClick(item)">
							<view class="selectItem" v-if="item.id == projectId">
								<text>{{item.name}}</text>
							</view>
							<view v-else>
								<text>{{item.name}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="switch">
						<text>未签到</text>
						<u-switch v-model="switchValue" size="48" activeColor="var(--primary-color)" @change="handelChange">
						</u-switch>
					</view>
				</view>

				<view class="footer">
					<view class="left_btn">
						<c-button type="cancel" text="重置" @click="handelCancel">
						</c-button>
					</view>
					<view class="right_btn">
						<c-button type="confirm" text="确定" @click="hancelSubmit">
						</c-button>
					</view>
				</view>

			</view>
		</u-popup> -->

	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'
	import listMixin from "@/common/mixins/list-mixin.js";
	import miment from 'miment'

	import {
		getStudentSignInListApi,
		getProjectListApi,
	} from '@/config/api.js';

	export default {
		mixins: [listMixin],
		data() {

			const d = new Date();
			const year = d.getFullYear();
			let month = d.getMonth() + 1;
			month = month < 10 ? `0${month}` : month;
			const date = d.getDate();

			return {
				checkboxValue: [],
				// 基本案列数据
				checkboxList: [{
					name: '未签到',
					disabled: false
				}],
				keyword: '',
				show: false,
				search: {
					//搜索对象必须为key search的对象
					keySearch: "",
					waitAttendance: '',
					time: '',

				},
				showTime: false,
				minDate: `${year-2}-${month}-${date+1}`,
				maxDate: `${year}-${month}-${date+1}`,
				timeValue: `${year}-${month}-${date}`,
				defaultDateMultiple: [`${year}-${month}-${date}`],
				list: [], //列表必须为key list的数组
				projectId: '',
				switchValue: false,
				
				curNow: 1,
				sxsearch: '',
				works: [],
				workspage: 1,
				workstotal: 0,
			}
		},

		onLoad(option) {
			// this.$store.dispatch(`home/getProjectList`, {
			// 	pageSize: -1,
			// })

			// this.search.keySearch = '';

			// this.finished = false;
			// this.loading = "loadmore";
			// this.page = 0;
			// this.list = [];

			this.worksloadData()
			
			if (option && option.status) {
				// this.search.status = 'wait';
				this.curNow = 0;
				// this.checkboxValue = ['待处理'];
				// this.switchValue = true;
			}
			

		},

		onShow() {
			this.finished = false;
			this.loading = "loadmore";
			this.page = 0;
			this.list = [];
			this._getList();
		},

		computed: {
			...mapState('home', {
				// 箭头函数可使代码更简练
				projectList: 'projectList',

			}),

		},

		methods: {
			
			searchCli() {
				this.$u.route('/pages/main/home/search/search?type=student&searchkey=' + this.keyword);
			},
			
			sectionChange(index) {
				this.curNow = index;
			
				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this._getList();
			},
			

			getNameLastTwo(value) {
				if (value && value.length > 3) {
					return value.substring(value.length - 3)
				} else {
					return value;
				}
			},

			overflowHide(value, num = 4) {
				if (value && value.length > num) {
					return `${value.slice(0, num)}...`
				} else {
					return value;
				}
			},

			confirm(e) {
				this.timeValue = e[0];
				this.time = miment(e[0]).valueOf();

				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this._getList();

				this.showTime = false;
			},

			handelDetail(record) {
				this.$u.route({
					url: `pages/main/home/registrationDetail/registrationDetail?&id=${record.id}`
				})
			},

			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},

			checkboxChange(n) {
				console.log('change', n);

				this.search.waitAttendance = n.length > 0 ? 'not_attendance' : '';

				this.switchValue = n.length > 0 ? true : false;

				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this._getList();
			},

			handelSearch(value) {
				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this._getList();
			},

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// scroll-view到底部加载更多
			onreachBottom() {},
			// 搜索
			searchSubmit() {
				// 调用混合搜索
				this._searchData();
			},
			// 模拟后端分页
			async getData(requestParams) {
				const {
					search = {}
				} = requestParams;

				let params = {};
				params.pageNumber = requestParams.page + 1;
				params.pageSize = 5;

				// if (search.waitAttendance) {
				// 	params.waitAttendance = search.waitAttendance;
				// }
				
				if (this.curNow == 0) {
					params.waitAttendance = 'not_attendance';
				}

				if (this.keyword) {
					params.keySearch = this.keyword
				}

				if (this.projectId) {
					params.projectId = this.projectId
				}

				if (this.time) {
					params.time = this.time
				}

				return await getStudentSignInListApi(params);
			},
			// 数据请求(没错就是这么少的代码)
			async _getList() {
				if (this.page == 0) {
					this.list = [];
				}

				// 根据实际情况修改自己修改key
				let result = await this.getData({
					page: this.page, // 传入页码
					size: this.size, // 传入每页条数
					search: this.search, // 传入搜索的对象
				});

				this.total = result.total;

				if (this.list.length == 0 && result.records.length == 0) {
					this.shownoData = false
				} else {
					this.shownoData = true
				}

				this.list = this.list.concat(result.records)

				// 判断是否全部加载完成
				if (this.total == this.list.length) {
					this.finished = true;
					this.loading = 'nomore';
				} else {
					this.loading = 'loadmore';
				}
			},

			handelClick(values) {
				console.log(values);
				this.projectId = values.id;
			},

			handelChange(e) {
				console.log(e)
				this.checkboxValue = e ? ['未签到'] : [];
				this.search.waitAttendance = e ? 'not_attendance' : '';
			},

			handelCancel() {
				this.switchValue = false;
				this.projectId = '';
			},

			hancelSubmit() {
				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this._getList();

				this.show = false;
			},
			
			workSearch() {
				uni.hideKeyboard();
				this.works = []
				this.worksloadData()
			},
			
			lower() {
				setTimeout(() => {
					this.worksloadData(true);
				}, 200)
			},
			
			worksloadData(e) {
				let params = {}
				// this.loading = 'loading'
			
				if (e) {
					if (this.total <= this.works.length) {
						// this.loading = 'nomore'
						return
					}
					this.workspage++
				} else {
					this.workspage = 1
				}
				params['pageNumber'] = this.workspage
				if (this.sxsearch) {
					params['keyWord'] = this.sxsearch
				}
				getProjectListApi(params).then(async res => {
					if (res) {
						this.total = res.total
						// this.loading = 'loadmore'
						this.works = this.works.concat(res.records)
					}
				})
			},
			popupSelItem(item) {
				this.show = false
				this.projectId = item.id;
				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this._getList();
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.registration_review {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #F7F7F7;

		// .search_box {
		// 	padding: 36rpx 30rpx 0;
		// 	background-color: #FFFFFF;

		// 	.top {
		// 		display: flex;
		// 		flex-flow: row nowrap;
		// 		justify-content: space-between;

		// 		.check {
		// 			padding: 20rpx 0 0 0;
		// 		}

		// 		.search {
		// 			width: 410rpx;
		// 		}

		// 		.icon {
		// 			display: flex;
		// 			flex-flow: row nowrap;
		// 		}
		// 	}

		// 	.bottom {
		// 		.time {
		// 			padding: 30rpx 0 30rpx 40rpx;
		// 		}
		// 	}


		// }
		
		.search_box {
			padding: 36rpx 30rpx 12rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		
			.check {
				padding: 20rpx 0 0 0;
			}
		
			.search {
				width: 468rpx;
			}
		}

		.list_box {
			padding: 0 0 50rpx 0;

			.item {
				position: relative;
				width: 630rpx;
				margin: 30rpx auto;
				padding: 30rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;

				.bg_image {
					position: absolute;
					top: 0;
					right: 0;

					text {
						position: absolute;
						top: 12rpx;
						right: 30rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #FFFFFF;
					}
				}

				.info {
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					margin: 0 0 30rpx 0;

					.avatar {
						width: 78rpx;
						height: 94rpx;
						padding: 0 8rpx;
						border-radius: 4rpx;
						background-color: var(--primary-color);
						font-size: 24rpx;
						line-height: 94rpx;
						color: #FFFFFF;
						text-align: center;
					}

					.name {
						font-size: 32rpx;
						line-height: 44rpx;
						color: #202131;
						font-weight: 500;
						margin: 0 20rpx;
					}

					.number {
						font-size: 28rpx;
						line-height: 32rpx;
						color: #909097;
					}
				}

				.company {
					display: flex;
					flex-flow: row nowrap;
					margin: 0 0 30rpx 0;

					text {
						width: 130rpx;
						font-size: 28rpx;
						line-height: 32rpx;
						color: #909097;
						margin: 0 0 0 16rpx;
					}

					text:first-child {
						text-align: justify;
						text-align-last: justify;
					}

					text:last-child {
						width: 400rpx;
						color: #202131;
						margin: 0 0 0 30rpx;
					}
				}

				.time {
					border-top: 2rpx solid #E2E2E8;
					padding: 28rpx 0 0 0;

					text {
						font-size: 28rpx;
						line-height: 32rpx;
						color: #909097;
					}

					text:last-child {
						color: #202131;
						margin: 0 0 0 78rpx;
					}
				}
			}
		}

		.popup_search {
			width: 640rpx;
			position: relative;

			.content {
				padding: 0 40rpx;

				.title {
					padding: 24rpx 0;
					font-size: 28rpx;
					line-height: 36rpx;
					color: #202131;
				}

				.scroll {
					max-height: 60vh;

					.item {

						view {
							display: flex;
							flex-flow: row wrap;
							align-items: center;
							width: 500rpx;
							height: 74rpx;
							border-radius: 4rpx;
							border: 2rpx solid #C1C1C9;
							margin: 0 10rpx 20rpx;
							font-size: 24rpx;
							line-height: 32rpx;
							color: #C0C0C9;
							padding: 16rpx 20rpx;
						}

						.selectItem {
							background-color: var(--primary-color);
							color: #FFFFFF;
							border: 2rpx solid var(--primary-color);
						}
					}
				}

				.time {
					padding: 40rpx 0 0 0;
				}

				.switch {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					padding: 40rpx 0 0 0;

					text {
						font-size: 28rpx;
						line-height: 36rpx;
						color: #202131;
					}
				}


			}

			.footer {
				width: 560rpx;
				height: 96rpx;
				padding: 28rpx 40rpx;
				background: #FFFFFF;
				position: fixed;
				bottom: 0;
				right: 0;
				z-index: 99;
				border-top: 2rpx solid #E2E2E8;

				view {
					display: inline-block;
				}

				.left_btn {
					width: 194rpx;
					margin: 0 20rpx 0 0;
				}

				.right_btn {
					width: 346rpx;
				}
			}
		}
		
		.popup {
			height: 500px;
			padding: 19px 16px;
		
			.title {
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		
			.close {
				width: 22px;
				height: 22px;
			}
		
			.item_box {
				border-radius: 4px;
				margin: 0 0 48rpx;
		
				.item_title {
					height: 20px;
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
					line-height: 20px;
				}
		
			}
		
			.no_data {
				width: 100%;
				margin-top: 310rpx;
		
				.text_black_28 {
					font-size: 14px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: rgba(0, 0, 0, 0.65);
					text-align: center;
				}
		
			}
		
		}
	}
</style>