<template>
	<view class="my-apply">
		<uni-nav-bar @clickLeft="goBack()" height="110rpx" leftWidth="200rpx" leftText="实时报警" leftIcon="left" border
			backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="my-top-search-nav">
			<view class="search-wrap">
				<view class="search-body">
					<image class="left-img" src="/static/home/searchIcon.png" mode=""></image>
					<input class="search-input" v-show="isHetongShow" type="text" v-model="contractCode"
						placeholder="请输入合同编号" />
					<input class="search-input" v-show="!isHetongShow" type="text" v-model="incomeGeneratingProjectCode"
						placeholder="请输入项目代码" />
					<view class="right-btn" @click="search">
						搜索
					</view>
				</view>
			</view>
		</view>

		<view class="empty-view"></view>

		<view class="content">
			<view class="item-wrap" @click="intoUpdatePage(val)" v-for="(val,index) in applyList" :key="val.pkId">
				<view class="apply-item">
					<view class="top-info">
						<!-- <image class="left-img" src="../../../static/common/avatar.png" mode=""></image> -->
						<view class="info-title">{{val.itemName}}</view>
						<!-- <view class="right-time">
							2021.10.06
						</view> -->
					</view>
					<view class="center-info">
						<view class="info-details">所属模块：{{val.menuName}}</view>
						<view class="info-details">申请人：{{val.applicantName}}</view>

						<view class="info-details">所属部门：{{val.applicationDeptName}}</view>
						<view class="info-details" v-if="val.eventStatus != 4">提交时间：{{val.submissionTime}} </view>
					</view>
					<view class="bottom-btns">
						<view v-if="val.eventStatus == 3" class="shenhezhong shenhe-status">
							<image src="/static/profile/my_apply/blue-time.png" mode=""></image>
							审核中
						</view>
						<view v-if="val.eventStatus == 4" class="no-submit shenhe-status">
							<image class="" src="/static/profile/my_apply/orange-time.png" mode=""></image>
							未提交
						</view>
						<view v-if="val.eventStatus == 1" class="tongguo shenhe-status">
							<image class="" src="/static/profile/my_apply/tongguo.png" mode=""></image>
							审核通过
						</view>
						<view v-if="val.eventStatus == 2" class="zuofei shenhe-status">
							<image class="" src="/static/profile/my_apply/zuofei.png" mode=""></image>
							已作废

						</view>
						<view v-if="val.eventStatus == 0" class="return shenhe-status">
							<image class="" src="/static/profile/my_apply/return.png" mode=""></image>
							已退回
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'warning',
		data() {
			return {
				itemName: "",
				moduleId: "",
				submissionTimeFrom: "",
				submissionTimeFromTo: "",
				eventStatus: "",
				pageSize: 10,
				pageNum: 1,
				totalNum: 0,

				applyList: [],
				obj: {
					eventStatus: '',
					moduleId: '',
					submissionTimeFrom: '',
					submissionTimeFromTo: ''

				}
			}
		},
		//上拉加载
		onReachBottom() {
			const totalPage = Math.ceil(this.totalNum / this.pageSize);
			if (this.pageNum < totalPage) {
				this.pageNum += 1;
				this._getMyApplyList(false);
			} else {
				uni.showToast({
					title: "已全部加载",
					icon: 'none'
				})
			}
		},
		onShow() {
			// this._getMyApplyList(true);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1;
			this._getMyApplyList(true);
		},
		methods: {
			intoUpdatePage(val) {
				// this.$store.commit("clearAllData");   /* 清空选择人员时留存的数据 */
				const routeObj = routeArray.find(item => {
					return item.pcRoute == val.menuID;
				})
				if (routeObj !== undefined && routeObj !== null && routeObj !== "") {
					const params =
						`?pkId=${val.pkId}&itemId=${val.itemId}&execId=${val.execId}&eventStatus=${val.eventStatus}&detail=${true}`;
					uni.navigateTo({
						url: routeObj.appAdd + params,
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "路由异常, 无法跳转, 请检查correspondingRoute.js中是否配置"
					})
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			caseSearch(itemName) {

				this.pageNum = 1;
				this.eventStatus = "";
				this.moduleId = "";
				this.submissionTimeFrom = '';
				this.submissionTimeFromTo = "";
				this.itemName = itemName;
				this._getMyApplyList(true);
			},
			quedingSearch(queryData) {
				this.pageNum = 1;
				this.itemName = "";
				this.obj = {
					eventStatus: queryData.eventStatus,
					moduleId: queryData.moduleId,
					submissionTimeFrom: queryData.submissionTimeFrom,
					submissionTimeFromTo: queryData.submissionTimeFromTo
				}
				this.eventStatus = queryData.eventStatus;
				this.moduleId = queryData.moduleId;
				this.submissionTimeFrom = queryData.submissionTimeFrom;
				this.submissionTimeFromTo = queryData.submissionTimeFromTo;
				this._getMyApplyList(true);
			},
			_getMyApplyList(flag) {
				const params = {
					myApplyApproval: {
						isMyApplyOrApproval: 0,
						moduleId: ""
					},
					queryRequest: {
						pageSize: this.pageSize,
						pageNum: this.pageNum,
					}
				}
				if (this.itemName) {
					params.myApplyApproval.itemName = this.itemName;
				}
				if (this.eventStatus) {
					params.myApplyApproval.eventStatus = this.eventStatus;
				}
				if (this.moduleId) {
					params.myApplyApproval.moduleId = this.moduleId;
				}
				if (this.submissionTimeFrom && this.submissionTimeFromTo) {
					params.myApplyApproval.submissionTimeFrom = this.submissionTimeFrom;
					params.myApplyApproval.submissionTimeFromTo = this.submissionTimeFromTo;
				}
				getMyApplyList(params).then(res => {
					if (res.statusCode === 200) {
						const data = res.data.data.rows;
						this.totalNum = res.data.data.total;
						if (flag === true) {
							this.applyList = data;
						} else {
							this.applyList = this.applyList.concat(data);
						}
					} else {
						this.applyList = [];
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.applyList = [];
					uni.showToast({
						title: '网络异常, 请求失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.empty-view {
		height: 120rpx;
	}

	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(254deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}

	.my-apply {
		background-color: #f3fbff;
	}

	.my-apply>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.content {
		padding: 14rpx;
	}

	.item-wrap {
		margin-bottom: 14rpx;
	}

	.apply-item {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 24rpx 21rpx;
		box-sizing: border-box;
	}

	.info-title {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		line-height: 72rpx;
		color: #3d3d3d;
		flex: 1;
	}

	.right-time {
		font-size: 24rpx;
		line-height: 72rpx;
		color: #ababab;
	}

	.center-info {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.info-details {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #5b5b5b;
	}

	.bottom-btns {
		text-align: center;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 83rpx;
	}

	.shenhezhong {
		color: #2c6fd9;
	}

	.shenhe-status image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.no-submit {
		color: #f7870f;
	}

	.tongguo {
		color: #15a306;
	}

	.zuofei {
		color: #565656;
	}

	.return {
		color: #e2053e;
	}





	.my-top-search-nav {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.search-wrap {
		background-blend-mode: normal,
			normal;
		padding-bottom: 44rpx;
		padding-top: 20rpx;
	}

	.search-body {
		width: 715rpx;
		height: 78rpx;
		background-color: #ffffff;
		border-radius: 39rpx;
		margin: 0 auto;
		padding: 13rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.search-body .search-input {
		height: 100%;
		flex: 1;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.left-img {
		width: 26rpx;
		height: 26rpx;

	}

	.right-btn {
		width: 110rpx;
		height: 58rpx;
		line-height: 58rpx;
		background-image: linear-gradient(0deg,
				#2da0f3 0%,
				#54bcff 100%);
		border-radius: 29rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
	}
</style>
