<template>
	<div class="reportList">
		<headNav title="其他任务" @rightClick="rightClick" iconName="plus" :backRouter="{
			path: '/'
		}"></headNav>
		<!-- 搜索 -->
		<div class="searchItem">
			<van-search
				v-model="searchValue"
				input-align="center"
				shape="round"
				@search="sureSearch"
				@clear="cancelSearch"
				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"
						title="选择年月"
						type="year-month"
						: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="missionSelectLabel"
						@cancel="show_mission = false"
						@confirm="chooseStatus"
					/>
				</van-popup>
			</div>
			<div class="totalCar">
				<div class="mr20">
					本月任务：<span>{{ total }}</span
					>条
				</div>
			</div>
		</div>

		<div class="missionList">
			<van-list
				v-model="loading"
				:finished="finished"
				:immediate-check="false"
				finished-text="没有更多了"
				@load="getMorePagerList"
			>
			<div
				class="missionItem"
				v-for="item in listTable"
				@click="goDetail(item.id)"
				:key="item.id"
			>
				<div class="headInfo_car">
					<van-cell>
						<template #title>
							<span class="custom-title">{{
								item.enforce_obj_name
							}}</span>
						</template>
						<template #default>
							<span
								:class="[
									item.job_status == 'AUDIT' && 'fb FontColorError',
									item.job_status == 'REJECT' && 'fb FontColorOther',
									item.job_status == 'TODO' && 'fb FontColorWarn',
									item.job_status == 'DOING' && 'fb FontColorOther',
									item.job_status == 'ARCHIVED' && 'fb FontColorSuccess',
								]"
								>{{enfoceJobStatus[item.job_status]}}</span
							>
							<!-- <span
								v-else-if="item.job_status == 2"
								class="fb FontColorSuccess"
								>已完成</span
							>
							<span
								v-else-if="item.job_status == 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 max-width">
								{{ item.enforce_obj && item.enforce_obj.enforce_obj_address }}
							</div>
						</div>
						<div>
							<div>
								<van-icon
									v-if="item.enforce_obj"
									name="location"
									color="#00f"
									@click.stop="setCenter(item.enforce_obj.latitude, item.enforce_obj.longitude)"
								/>
							</div>
						</div>
					</div>
					<div class="contentItem">
						<div class="df aic flex1">
							<div class="FontColorNormal mr5">任务内容：</div>
							<div class="FontColorNormal max-width">
								{{ item.job_desc }}
							</div>
						</div>
					</div>
					<div class="contentItem">
						
					</div>
					<div class="contentItem">
						<div class="flex1">
							<div class="df aic flex1">
								<div class="FontColorNormal mr5">执行人员：</div>
								<div class="FontColorNormal">
									{{ item.executor_names }}
								</div>
							</div>
						</div>
						<div class="flex1">
							<div class="df aic flex1">
								<div class="FontColorNormal mr5">执行时间：</div>
								<div class="FontColorNormal">
									{{item.start_time ? dayjs(new Date(item.start_time)).format('YYYY-MM-DD') : '暂无时间' }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</van-list>
		</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 dayjs from 'dayjs'
import headNav from "@/components/headNav.vue";
import baiduMap from "@/components/BMap.vue";
import {enfoceJobStatus} from "@/utils/variables.js";
import {getMaxDateInMonth} from "@/utils/index.js";
import mask_overLay from "@/components/overLay_xy.vue";
import { notEmpty } from '@/utils/tool';

export default {
	name: "reportList",
	components: {
		headNav,
		baiduMap,
		"v-mask": mask_overLay,
	},

	data() {
		const missionSelect = [
				{
					label: '全部任务',
					value: ''
				}, {
					label: '待执行',
					value: 'TODO'
				}, {
					label: '执行中',
					value: 'DOING'
				}, {
					label: '已归档',
					value: 'ARCHIVED'
				}
			]
		return {
			enfoceJobStatus,
			dayjs,
			total: 0,
			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,
			missionSelectLabel: missionSelect.map(el => el.label),
			missionSelect,
			listTable: [],
			center: "重庆市",
			zoom: 15,
			requestData: {
				page: 1,
				size: 10,
				sort: 'create_time desc',
			},
			searchInfo: {
				job_type: 'OTHER'
			},
			loading: false,
     		finished: false,
			xInfo: null
		};
	},
	created() {
		const xInfo = localStorage.getItem('x-info')
		xInfo &&(this.xInfo = JSON.parse(xInfo))
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			var now = new Date(); //当前日期
			this.getThisMonthStart(now);
			this.getPagerListApi();
		},
		rightClick() {
			this.$router.push('/otherAdd');
		},
		getMorePagerList() {
			this.requestData.page++
			this.getPagerListApi()
		},
		// 获取日常检查列表Api
		async getPagerListApi() {
			this.showOverLay = true;
			let query = ['job_type==OTHER'];
			if (this.xInfo) {
				query.push(`executor_ids==*${this.xInfo.uid}*`);
			}
			if (notEmpty(this.searchInfo.job_status)) {
				query.push('job_status==' + this.searchInfo.job_status);
			}
			else {
				query.push('job_status=in=("TODO","DOING","ARCHIVED")');
			}
			if (this.currentDate) {
				const now = dayjs(this.currentDate).format('YYYY-MM');
				query.push('last_enforce_date>=' + now);
				const end = dayjs(this.currentDate).add(1, 'month').format('YYYY-MM');
				query.push('last_enforce_date<' + end);
			}
			const search = this.searchValue && this.searchValue.trim() || '';
			if (notEmpty(search)) {
				query.push(`enforce_obj_name==*${search}*`);
			}
			await this.$http.get("/v2/api/enforce-job", {
				params: {
					...this.requestData,
					query: query.join(';')
				}
			})
				.then((res) => {
					if (this.requestData.page < 2) {
						this.listTable = res.data.data;
					}
					else {
						this.listTable = this.listTable.concat(res.data.data);
					}
					this.showOverLay = false;
					this.loading = false;
					this.total = res.data.total
					this.finished = res.data.page * res.data.size >= res.data.total;
				})
				.catch((err) => {
					this.$toast.fail("获取数据失败>>" + err);
					this.showOverLay = false;
				});
		},

		// 获取本月开始 结束
		getThisMonthStart(now) {
			var nowMonth = now.getMonth() + 1; //当前月
			var nowYear = now.getFullYear(); //当前年
			this.searchInfo.last_enforce_date = `${nowYear}-${nowMonth + 1}-01`;

			this.showDate = nowYear + "年" + (nowMonth) + "月";
		},

		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(lat, lng) {
			this.showMap = true;
			this.$set(this, 'center', {
				lat, lng
			})
		},

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

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

		// 选择了一个状态
		chooseStatus(value, index) {
			if (index == 0) {
				this.searchInfo.job_status = "";
			} else {
				this.searchInfo.job_status = this.missionSelect[index].value
			}
			this.show_mission = false;
			this.showMission = value;
			this.requestData.page = 1
			this.getPagerListApi();
		},

		// 确定搜索
		sureSearch(val) {
			const search = this.searchValue && this.searchValue.trim() || '';
			this.searchInfo.enforce_obj_name = search;
			this.requestData.page = 1
			this.getPagerListApi();
		},

		// 取消搜索
		cancelSearch() {
			this.searchInfo.enforce_obj_name = "";
			this.getPagerListApi();
		},

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

<style scoped lang="scss">
.reportList {
	.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 10px;
		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;
				}
			}
			.FontColorNormal  {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				&.max-width {
					max-width: 220px;
				}
			}
		}
		.headInfo_car {
			/deep/ {
				.van-cell__title {
					flex: 2;
					max-width: 66.66%;
				}
			}
		}
	}

	.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">
.reportList {
	.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;
			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>
