<template>
	<div class="otherMission">
		<headNav :title="'其他任务'"></headNav>

		<!-- 搜索 -->
		<div class="searchItem">
			<van-search
				v-model="searchValue"
				input-align="center"
				shape="round"
				@search="sureSearch"
				@clear="cancaelSearch"
				background="#ffffff"
				placeholder="请输入搜索内容"
			/>
		</div>

		<!-- 日期筛选 -->
		<div class="date_totalInfo">
			<div class="df jfsb">
				<div class="flex1 mb10">
					<van-cell>
						<template #title>
							<div class="df">
								<span class="custom-title" @click="show_time = true">
									{{ showDate }}
								</span>
								<div class="df aic FontColorInfo fz12" @click="show_time = true">
									<van-icon class="iconArrow" name="play"></van-icon>
								</div>
							</div>
						</template>
					</van-cell>
				</div>

				<div class="flex1 mb10">
					<van-cell>
						<template #default>
							<div class="df aic missionFlex">
								<span class="fz13" @click="show_mission = true">
									{{ showMission }}
								</span>
								<van-icon
									@click="show_mission = true"
									class="iconArrow"
									name="play"
								></van-icon>
							</div>
						</template>
					</van-cell>
				</div>

				<!-- 时间弹窗 -->
				<van-popup v-model="show_time" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="date"
						title="选择年月"
						:min-date="minDate"
						:max-date="maxDate"
						@cancel="show_time = false"
						@confirm="chooseDate"
					/>
				</van-popup>

				<!-- 任务弹窗 -->
				<van-popup v-model="show_mission" position="bottom">
					<van-picker
						show-toolbar
						title="任务状态"
						:columns="missionSelect"
						@cancel="show_mission = false"
						@confirm="chooseStatus"
					/>
				</van-popup>
			</div>
			<div class="totalCar">
				<div class="mr20">
					今日任务：
					<span>{{ listTable.length }}</span>
					条
				</div>
			</div>
		</div>

		<div class="missionList">
			<div class="missionItem" v-for="item in listTable" :key="item.id" @click="goDetial(item.id)">
				<div class="headInfo_car">
					<van-cell>
						<template #title>
							<span class="custom-title">{{ item.checkObjName }}</span>
							<span class="carTips FontColorInfo">【其他任务】</span>
						</template>
						<template #default>
							<span v-if="item.excuteStatus == 1" class="fb FontColorError">
								待执行
							</span>
							<span v-else-if="item.excuteStatus == 2" class="fb FontColorSuccess">
								已完成
							</span>
							<span v-else-if="item.excuteStatus == 3" class="fb FontColorOther">
								执行中
							</span>
						</template>
					</van-cell>
				</div>
				<div class="content_in">
					<div class="contentItem">
						<div class="df aic">
							<div class="FontColorNormal mr5">任务地点：</div>
							<div class="FontColorNormal">{{ item.taskAddr }}</div>
						</div>
						<div>
							<div>
								<van-icon
									name="location"
									color="#00f"
									@click.stop="setCenter(item.taskAddr)"
								/>
							</div>
						</div>
					</div>
					<div class="contentItem">
						<div class="df aic flex1">
							<div class="FontColorNormal mr5">任务内容：</div>
							<div class="FontColorNormal">{{ item.taskName }}</div>
						</div>
					</div>
					<div class="contentItem">
						<div class="df aic flex1">
							<div class="FontColorNormal mr5">执行时间：</div>
							<div class="FontColorNormal">{{ item.excuteTime }}</div>
						</div>
					</div>
					<div class="contentItem">
						<div class="df aic flex1">
							<div class="FontColorNormal mr5">审批领导：</div>
							<div class="FontColorNormal">{{ item.approverName }}</div>
						</div>
					</div>
					<div class="contentItem">
						<div class="df aic flex1">
							<div class="FontColorNormal mr5">执行人员：</div>
							<div class="FontColorNormal">{{ item.excutePersonName }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 弹出地图展示 -->
		<van-popup v-model="showMap" position="bottom" :style="{ height: '450px' }">
			<div><baiduMap :center="center" :zoom="zoom"></baiduMap></div>
		</van-popup>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay"></v-mask>
	</div>
</template>

<script>
import { get, post } from '@/utils/http.js';
import headNav from '@/components/headNav.vue';
import baiduMap from '@/components/baiduMap.vue';
import mask_overLay from '@/components/overLay_xy.vue';

export default {
	name: 'otherMission',
	components: {
		headNav,
		baiduMap,
		'v-mask': mask_overLay
	},

	data() {
		return {
			searchValue: '',
			show_time: false,
			showMap: false,
			show_mission: false,
			showOverLay: false,
			currentDate: new Date(),
			minDate: new Date(2000, 0, 1),
			maxDate: new Date(2050, 10, 1),
			showDate: '全部时间',
			showMission: '全部任务',
			todayMisNum: 1,
			todayMisTime: 1.5,
			missionSelect: ['全部任务', '待执行', '任务完成', '执行中'],
			listTable: [],
			center: '重庆市',
			zoom: 15,
			searchInfo: {
				// startTime: '',
				// endTime: ''
				taskForm: '3',
				excuteTime: '',
				auditStatus: '2'
			}
		};
	},

	mounted() {
		this.init();
		// if (window.history && window.history.pushState) {
		// 	history.pushState(null, null, document.URL);
		// 	window.addEventListener('popstate', this.backPage, false);
		// }
	},

	// destroyed() {
	// 	window.removeEventListener('popstate', this.backPage, false);
	// },

	methods: {
		init() {
			var now = new Date(); //当前日期
			this.getThisMonthStart(now);
			this.getPagerListApi();
		},

		// 获取日常检查列表Api
		async getPagerListApi() {
			this.showOverLay = true;
			await post('/cdsupervisionOthertask/pageList', this.searchInfo)
				.then(res => {
					this.showOverLay = false;
					if (res.success == true) {
						this.listTable = res.data.list;
					} else {
					}
				})
				.catch(err => {
					this.$toast.fail('获取数据失败');
					this.showOverLay = false;
				});
		},

		// 获取本月开始 结束
		getThisMonthStart(now) {
			var nowDay = now.getDate(); //当前天

			var nowMonth = now.getMonth(); //当前月
			var nowYear = now.getYear(); //当前年
			nowYear += nowYear < 2000 ? 1900 : 0;

			this.showDate = nowYear + '年' + (nowMonth + 1) + '月' + nowDay + '日';

			this.searchInfo.excuteTime = this.$getTime(now).split(' ')[0];
		},

		getMonthDays(myMonth, nowYear) {
			//获得某月的天数
			var monthStartDate = new Date(nowYear, myMonth, 1);
			var monthEndDate = new Date(nowYear, myMonth + 1, 1);
			var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
			return days;
		},

		getItemTime(item) {
			if (item.checkContTime) {
				return parseFloat(item.checkContTime) + parseFloat(item.commutingTime) + 'h';
			} else {
				return '— —';
			}
		},

		// 设置地图中心
		setCenter(location) {
			this.showMap = true;
			this.center = location;
		},

		// 后退
		// backPage() {
		// 	exitCurrentUi();
		// },

		// 选择了一个时间
		chooseDate() {
			this.getThisMonthStart(this.currentDate);
			this.getPagerListApi();
			this.show_time = false;
		},

		// 选择了一个状态
		chooseStatus(value, index) {
			if (index == 0) {
				this.searchInfo.excuteStatus = '';
			} else {
				this.searchInfo.excuteStatus = index;
			}
			this.show_mission = false;
			this.showMission = value;
			this.getPagerListApi();
		},

		// 确定搜索
		sureSearch(val) {
			const str = this.searchValue || '';
			this.searchInfo.checkObjName = str.trim();
			this.getPagerListApi();
		},

		// 取消搜索
		cancaelSearch() {
			this.searchInfo.checkObjName = '';
			this.getPagerListApi();
		},

		goDetial(id) {
			this.$router.push(`/otherListDetail/${id}`);
		}
	}
};
</script>

<style scoped lang="scss">
.otherMission {
	.searchItem {
		margin-top: 45px;
	}

	.date_totalInfo {
		background-color: #fff;
		padding-bottom: 10px;
		border-bottom: 1px solid #ececec;
	}

	.missionList {
		margin-top: 10px;
		height: calc(100vh - 215px);
		margin: 15px 15px;
		overflow-y: auto;
		font-size: 13px;

		.missionItem {
			border-bottom: 1px solid #cecece;
			margin-bottom: 20px;
			background-color: #fff;
			padding: 5px 12px;
			border-radius: 5px;

			.contentItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 10px;

				&:last-child {
					padding-bottom: 10px;
				}
			}
		}
	}

	.missionFlex {
		justify-content: flex-end;
	}

	.totalCar {
		font-size: 12px;
		color: rgb(153, 153, 153);
		padding-left: 15px;
		display: flex;
	}

	.iconArrow {
		transform: rotate(90deg);
		margin-left: 5px;
		color: #999999;
		font-size: 12px;
		margin-bottom: 2px;
	}
}
</style>

<style lang="scss">
.otherMission {
	.van-search {
		padding: 10px 25px;

		.van-search__content.van-search__content--round {
			border: 1px solid #e1e1e1;
		}
	}

	.van-cell {
		&::after {
			border-bottom: none;
		}
	}

	.van-cell.van-cell--clickable {
		display: flex;
		align-items: center;
		color: #969696;

		.van-icon.van-icon-bars {
			margin-left: 5px;
		}
	}

	.headInfo_car {
		.van-cell__title {
			font-weight: bold;
			flex: 2;
			display: flex;
			align-items: center;
		}

		.van-cell {
			padding: 4px 0px;
		}

		.custom-title {
			color: #323232;
			display: inline-block;
			max-width: 120px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.van-cell.van-cell--clickable {
			padding: 0;
		}
	}

	.custom-title {
		color: #323233;
		font-size: 13px;
	}

	.date_totalInfo {
		.van-cell {
			background-color: #f5f5f5;
		}
	}
}
</style>
