<template>
	<view class="registration_review">

		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" :scrollable="false" lineWidth="30rpx" lineHeight="4rpx" lineColor="#06B079"
				:inactiveStyle="{fontSize:'28rpx', color:'#4A4A53'}" :activeStyle="{fontSize:'36rpx', color:'#06B079'}"
				@change="handelTab" :current="current">
			</u-tabs>
		</u-sticky>

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

				<view class="bg_image" v-if="item.status == 'unread'">
					<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="form_name">
						<view class="name">{{overflowHide(item.title, 10)}}</view>
						<view class="week">
							<!-- <text>{{timeFormat(item.logTime, 'yyyy年')}}</text> -->
							<!-- <text>{{getWeek(item.logTime)}}</text> -->
							<text>{{getCreatedTime(item)}}</text>
							
						</view>
					</view>
				</view>
				<view class="u-content">
					<u-parse :content="item.content"></u-parse>
				</view>
				<view class="name_time">
					<view class="name">
						<text>学生姓名</text>
						<text>{{item.studentName}}</text>
					</view>
					<view class="time">{{timeFormat(item.createdTime)}}</view>
				</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="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="#06B079" @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 {
		getLogReviewListApi,
		getProjectListApi,
	} from '@/config/api.js';

	export default {
		mixins: [listMixin],
		data() {
			return {
				studentId: '',
				formId: '',
				checkboxValue: [],
				checkboxList: [{
					name: '未阅',
					disabled: false
				}],
				keyword: '',
				search: {
					//搜索对象必须为key search的对象
					keySearch: "",
					status: '',
					category: 'daily',

				},
				show: false, //筛选
				current: 0,
				tabs: [{
					name: '日志',
				}, {
					name: '周志',
				}, {
					name: '月志'
				}],

				list: [], //列表必须为key list的数组

				projectId: '',
				showTime: false,
				timeValue: '',
				switchValue: false,

			}
		},

		onLoad(option) {
			console.log(option)
			this.studentId = option.studentId;
			this.projectId = option.projectId;
			this.formId = option.formId;

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

			this.search.keySearch = '';

			if (option && option.category) {
				this.search.category = option.category;
				this.current =
					option.category == 'daily' ? 0 :
					option.category == 'weekly' ? 1 :
					option.category == 'monthly' ? 2 :
					'';
			}
			
			if (option && option.status) {
				this.search.status = 'unread';
				this.checkboxValue = ['未阅'];
				this.switchValue = true;
			}

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

		onShow() {

		},

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

		methods: {
			
			getCreatedTime(e) {
				let time = this.$u.timeFormat(e.logTime / 1000, 'yyyy/mm/dd');
				if (e.category == "weekly") {
					time = new Date(e.logTime).getFullYear() + "年第" + (this.getWeek(e.logTime) + 1) + "周";
				} else if (e.category == "monthly") {
					time = this.$u.timeFormat(e.logTime / 1000, 'yyyy年mm月');
				}
				return time
			},

			getWeek(dt) {
				if (dt > 0) {
					let d1 = new Date(dt);
					let d2 = new Date(dt);
					d2.setMonth(0);
					d2.setDate(1);
					let rq = d1 - d2;
					let days = Math.ceil(rq / (24 * 60 * 60 * 1000));
					let num = Math.ceil(days / 7);
					return num;
				} else {
					return '';
				}
			},

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

			handelTab(item) {
				let category = item.index === 0 ? 'daily' : item.index === 1 ? 'weekly' : item.index === 2 ? 'monthly' :
					'';

				this.search.category = category;

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

			},

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

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

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

				this.search.status = n.length > 0 ? 'unread' : '';

				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() {

			},

			close() {
				this.show = false
			},

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

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

				if (search.status) {
					params.status = search.status;
				}

				if (search.category) {
					params.category = search.category;
				}

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

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

				return await getLogReviewListApi(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) {
				this.projectId = values.id;
			},

			handelChange(e) {
				this.checkboxValue = e ? ['未阅'] : [];
				this.search.status = e ? 'unread' : '';

			},

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

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

				this.show = false;
			},

		}
	}
</script>

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

		.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: 94rpx;
						height: 94rpx;
						border-radius: 4rpx;
						background-color: #06B079;
						font-size: 24rpx;
						line-height: 94rpx;
						color: #FFFFFF;
						text-align: center;
					}

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

						.week {
							padding: 8rpx 0 0 0;
							font-size: 20rpx;
							line-height: 32rpx;
							color: #909097;

							// padding: 0 0 0 20rpx;
							text {
								padding: 8rpx 0 0 20rpx;
							}
						}
					}
				}

				.u-content {
					font-size: 24rpx;
					line-height: 32rpx;
					color: #909097;
					margin: 32rpx 0 30rpx 0;
				}

				.name_time {
					border-top: 2rpx solid #E2E2E8;
					padding: 28rpx 0 0 0;
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;


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

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

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

		.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: #06B079;
							color: #FFFFFF;
							border: 2rpx solid #06B079;
						}
					}
				}

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