<template>
	<div class="notice">
		<headNav :Larrow="false" :title="'消息'"></headNav>

		<div class="tabContainer">
			<div class="tabContent">
				<div class="tabItem" v-for="(item, ind) in msgList" :key="ind">
					<div class="tabItem_head">
						<div class="tabItem_head_content">
							<span class="fz14 fb FontColorNormal">{{ item.msgTitle }}</span>
						</div>
						<!-- 								<div v-if="item.isRead === 2" class="tabItem_head_icon">
												<span></span>
											</div> -->
					</div>

					<div class="tabItem_body">
						<div class="tabItem_body_item">
							<div class="label">任务名称：</div>
							<div class="content">{{ item.msgName }}</div>
						</div>
						<div class="tabItem_body_item">
							<div class="label">任务地点：</div>
							<div class="content">
								<span class="mr5">{{ item.taskAddr }}</span>
								<van-icon
									name="location"
									color="#0066FF"
									@click.stop="setCenter(item.taskAddr)"
								></van-icon>
							</div>
						</div>
						<div class="tabItem_body_item">
							<div class="label">任务时间：</div>
							<div class="content">{{ item.taskTime }}</div>
						</div>
						<div class="tabItem_body_item">
							<div class="label">根据时长：</div>
							<div class="content">{{ item.expandTime?item.expandTime:'— —' }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

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

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

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

export default {
	name: 'notice',
	components: {
		headNav,
		baiduMap,
		'v-mask': mask_overLay
	},
	data() {
		return {
			msgList: [],
			showOverLay: false,
			showMap: false,
			center: '重庆市',
			zoom: 15
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			this.showOverLay = true;
			await this.getMsgListApi();
			this.showOverLay = false;
		},

		async getMsgListApi() {
			await get('/v1/api/cdsupervisionMsg/listByCondition').then(res => {
				if (res.success === true) {
					this.msgList = res.data;
				}
			});
		},

		// 关闭地图
		closeOverLay() {
			this.showMap = false;
		},

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

<style lang="scss" scoped>
@import '@/style/variable.scss';

.notice {
	font-size: 14px;

	.tabContainer {
		margin-top: 47px;

		.tabContent {
			height: $heightContainer;
			overflow: hidden;
			overflow-y: auto;
		}

		.tabItem {
			background-color: #fff;
			margin: 10px 15px;
			padding: 10px 15px;
			border-radius: 5px;
			border-bottom: 1px solid #e6e6e6;

			.tabItem_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #fcfcfc;
				padding-bottom: 10px;

				.tabItem_head_content {
					display: flex;
				}

				.tabItem_head_icon {
					span {
						display: block;
						width: 10px;
						height: 10px;
						border-radius: 50%;
						background-color: #e82a1b;
					}
				}
			}

			.tabItem_body {
				margin-top: 5px;

				.tabItem_body_item {
					display: flex;
					align-items: center;
					padding: 5px 0;

					.label {
						color: #ababab;
					}

					.content {
						margin-left: 5px;
						color: #898989;
						display: flex;
						align-items: center;
					}
				}

				.tabItem_body_content {
					color: #8d8d8d;
					line-height: 24px;
					font-size: 13px;
				}
			}

			.tabItem_time {
				margin-top: 10px;
				color: #bababa;
			}
		}
	}
}
</style>

<style lang="scss">
.notice {
	.van-tabs__line {
		width: 80px;
		background-color: #5797ff;
	}
}
</style>
