<template>
	<view class="evidence-list">
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
			<uni-swipe-action>
				<view class="list">
					<view class="item" @tap="toDetail(item.id)" v-for="item in list" :key="item.id">
						<uni-swipe-action-item :right-options="actionOptions" @tap="onDel(item.id)">
							<view class="top">
								<view class="title">
									{{item.taskDescribe}}
								</view>
								<uni-icons type="right" size="16" color="#202020"></uni-icons>
							</view>
							<view class="content">
								<view class="time">担任时间 : {{item.taskStart}}至{{item.taskEnd}}</view>
							</view>
						</uni-swipe-action-item>
					</view>
				</view>
			</uni-swipe-action>

			<view class="empty" v-if="list.length==0">
				<image src="@/static/empty.png" mode="widthFix"></image>
				暂时没有数据
			</view>
			<view class="loading-more" v-if="loading">
				<uni-load-more status="loading" />
			</view>
			<view class="no-more" v-if="!loading&&list.length!=0">
				到底啦~~
			</view>
		</scroll-view>
		<view class="add" @tap="addEvidence" v-if="substatus!=1">
			+
		</view>
	</view>
</template>

<script>
	import {
		taskList,
		taskDel
	} from '@/api/compositive-performance/majorReward.js';
	export default {
		data() {
			return {
				actionOptions: [{
					text: '删除',
					style: {
						width: "200px",
						backgroundColor: '#df0000'
					}
				}],
				list: [],
				totalPages: 0,
				loading: false,
				substatus: "",
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					fdName: uni.getStorageSync("stuName"),
					years: "",
				},
			}
		},
		onLoad(option) {
			this.queryParams.years = option.year;
			this.substatus = option.substatus;
			this.getMaterialsList();
		},
		methods: {
			scrolltolower() {
				if (this.queryParams.pageNum < this.totalPages) {
					this.queryParams.pageNum++;
					this.loading = true;
					setTimeout(() => {
						this.getMaterialsList()
					}, 1000)
				} else {

				}
			},
			addEvidence() {
				uni.navigateTo({
					url: `add?year=${this.queryParams.years}`
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: `detail?id=${id}&substatus=${this.substatus}`
				})
			},
			getMaterialsList() {
				taskList(this.queryParams).then(res => {
					this.loading = false;
					if (this.queryParams.pageNum == 1) {
						this.list = res.rows; // 如果是第一页，直接显示新数据
					} else {
						this.list = this.list.concat(res.rows); // 否则追加新数据到列表中
					}
					this.totalPages = Math.ceil(res.total / this.queryParams.pageSize);
				});
			},
			onDel(id) {
				console.log(id);
				uni.showModal({
					title: "确定删除吗?",
					success: (res) => {
						if (res.confirm) {
							taskDel(id).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: "删除成功"
									})
									this.getMaterialsList();
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	scroll-view {
		height: 100vh;

		.load-more {
			text-align: center;
		}

		.no-more {
			text-align: center;
			color: gray;
			padding-bottom: 10px;
		}

		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 200rpx;
			color: #9E9E9E;
			font-size: 36rpx;

			image {
				width: 250rpx;
				margin-bottom: 50rpx;
			}
		}
	}

	.evidence-list {
		background-color: #F5F5F7;
		min-height: 100vh;

		.list {
			padding: 40rpx;

			.item {
				padding: 40rpx;
				background-color: white;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.top {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #F5F5F7;
					padding-bottom: 22rpx;

					.title {
						display: flex;
						align-items: center;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						color: #303030;
						line-height: 50rpx;
					}

					.uni-icons {
						opacity: 0.5;
						color: #202020;
						font-weight: 600;
					}
				}

				.content {
					padding-top: 22rpx;

					&>view {
						margin-bottom: 20rpx;
					}

					.time {
						color: #9C9C9C;
						margin-top: 14rpx;
						font-size: 26rpx;
					}
				}
			}
		}

		.add {
			background-color: #1890FF;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60rpx;
			position: fixed;
			bottom: 50px;
			right: 25px;
		}
	}
</style>