<template>
	<view class="con">
		<van-empty description="暂无请假申请" v-if="data.length === 0" />
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-box" @scrolltolower="lower" v-if="data.length > 0">
			<view v-for="(item, index) in data" :key="index" class="leave-item">
				<view class="top flex flex_start_center" @click="jumpPage(item)">
					<van-image round width="55rpx" fit="cover" height="55rpx"
						:src="userInfo.UserIcon ? userInfo.UserIcon : userInfo.GroupLogo" style="margin-right: 20rpx"
						class="flex flex_start_center" />
					<view class="grow one_line name">{{ item.CreateByName }}的请假</view>
					<view class="date">{{ item.CreateTime }}</view>
				</view>
				<view class="flex flex_between_center margin-t-b-15">
					<view class="flex label-next">
						<view class="label">请假类型</view>
						<text v-if="item.DataObj.LeaveType === 1">事假</text>
						<text v-if="item.DataObj.LeaveType === 2">病假</text>
					</view>
					<view class="status" :class="{
              status1: item.VerifyStatus === 4,
              status2: item.VerifyStatus === 6,
              status3: item.VerifyStatus === 0,
            }">{{ item.AuditStatusName }}</view>
				</view>
				<view class="flex label-next margin-t-b-15">
					<view class="label">开始时间</view>{{ item.DataObj.LeaveInfoList[0].ClassDate }}
					{{ item.DataObj.LeaveInfoList[0].StartTime }}
				</view>
				<view class="flex label-next margin-t-b-15">
					<view class="label">结束时间</view>{{
            item.DataObj.LeaveInfoList[item.DataObj.LeaveInfoList.length - 1]
              .ClassDate
          }}
					{{
            item.DataObj.LeaveInfoList[item.DataObj.LeaveInfoList.length - 1]
              .EndTime
          }}
				</view>
				<view class="flex label-next margin-t-b-15 one_line" style="width: 80%">
					<view class="label">请假事由</view>{{ item.DataObj.Remarks || "无" }}
				</view>

				<van-button type="danger" size="mini" class="invalid-btn" plain v-if="item.VerifyStatus === 0"
					@click="invalidApply(item)">作废</van-button>
			</view>
			<Loadmore :state="pageState" />
		</scroll-view>
		<van-toast id="van-toast" />
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import {
		getStudentLeaveList,
		invalidReceiptInfo
	} from "../../api/index";
	import Loadmore from "../../components/loadmore.vue";
	export default {
		components: {
			Loadmore,
		},
		setup() {
			let userInfo = uni.getStorageSync("userInfo");
			let Toast = inject("$toast");
			let Dialog = inject("$dialog");
			let data = reactive({
				data: [],
				pageState: "more",
				msg: {
					PageIndex: 1,
					PageSize: 10,
					rowsPerPage: 10,
				},
				PageCount: 0,
				userInfo,
				timer: null, //防抖
			});

			let methods = {
				jumpPage(item) {
					uni.navigateTo({
						url: "/pages/course/askForLeaveDetail?data=" +
							encodeURIComponent(JSON.stringify(item)),
					});
				},
				lower(e) {
					if (data.msg.PageIndex < data.PageCount) {
						data.pageState = "loading";
						if (data.timer) clearTimeout(data.timer);
						data.timer = setTimeout(() => {
							data.msg.PageIndex++;
							that.getList();
						}, 1000);
					} else {
						data.pageState = "none";
					}
				},
				reload() {
					data.msg.PageIndex = 1;
					that.getList();
				},
				async getList() {
					let res = await getStudentLeaveList(data.msg);
					if (res) {
						if (data.timer) data.timer = null;
						data.PageCount = res.Data.PageCount;
						if (data.msg.PageIndex === 1) {
							data.data = res.Data.PageData;
						} else {
							data.data = [...data.data, ...res.Data.PageData];
						}
						if (data.msg.PageIndex >= res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					}
				},
				invalidApply(item) {
					Dialog.confirm({
							title: "提示信息",
							message: "是否要作废此申请?",
						})
						.then(async (e) => {
							//确认
							let delMsg = {
								Id: item.Id,
							};
							let res = await invalidReceiptInfo(delMsg);
							if (res) {
								Toast.success(res.Message);
								that.reload();
							}
						})
						.catch(() => {
							//取消
						});
				},
			};
			onMounted(() => {
				that.getList();
				console.log("12343434");
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "请假列表",
			});
		},
	};
</script>


<style scoped>
	.con {
		height: 100vh;
		box-sizing: border-box;
		font-family: PingFang SC;
		padding: 30rpx 0;
	}

	.leave-item {
		box-sizing: border-box;
		width: 690rpx;
		padding: 20rpx 30rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
		position: relative;
	}

	.top {
		border-bottom: 1rpx solid #e2e2e2;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.date {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.status {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00df9f;
	}

	.status1 {
		color: #ff3816;
	}

	.status2 {
		color: #111111;
	}

	.status3 {
		color: #4fc08d;
	}

	.label {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 30rpx;
	}

	.label-next {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
	}

	.margin-t-b-15 {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}

	.scroll-box {
		height: 100%;
		width: 100%;
	}

	.invalid-btn {
		position: absolute;
		right: 30rpx;
		bottom: 20rpx;
		z-index: 10;
	}
</style>
