<template>
	<div class="missionRecCard">
		<div class="all content">
			<div class="nodata" v-if="dataArr.length === 0">暂无数据</div>
			<template v-else>
				<div class="recordItem" v-for="(item, ind) in dataArr" :key="ind">
					<div class="head df jfsb aic">
						<div class="left df aic">
							<div class="fz14 fb FontColorNormal">{{ item.byCheckUnit }}</div>
							<div class="FontColorInfo fz12">{{ item.checkType | type }}</div>
						</div>
						<div class="right df aic">
							<span class="normalBtn FontColorSuccess fb" v-if="item.taskStatus === '1'">
								检查正常
							</span>
							<span class="normalBtn FontColorError fb" v-else>违法违规</span>
						</div>
					</div>
					<div class="content_in">
						<div class="contentItem">
							<div class="df aic">
								<div class="FontColorNormal">任务地点：</div>
								<div class="FontColorInfo">{{ item.taskAddr }}</div>
							</div>
							<div>
								<div class="mr20">
									<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">任务时间：</div>
								<div class="FontColorInfo">{{ item.excuteTime }}</div>
							</div>
							<div class="df aic flex1">
								<div class="FontColorNormal">根据时长：</div>
								<div class="FontColorInfo">
									{{ item.takeAllTime ? item.takeAllTime : 0 }}h
								</div>
							</div>
						</div>
						<div class="contentItem">
							<div class="df aic flex1">
								<div class="FontColorNormal">审批领导：</div>
								<div class="FontColorInfo">{{ item.approverName }}</div>
							</div>
						</div>
						<div class="contentItem">
							<div class="df aic flex1">
								<div class="FontColorNormal OPoint">执行人员：</div>
								<div class="FontColorInfo">李明组（李明、王某某)</div>
							</div>
						</div>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
export default {
	name: 'missionRecCard',
	props: {
		recordData: {
			type: Array
		},
		type: {
			type: String,
			default: 'all'
		}
	},

	watch: {
		recordData(val) {
			this.dataArr = val;
		}
	},

	mounted() {
		this.updateData();
	},
	
	watch: {
		'recordData': 'updateData'
	},

	filters: {
		type(data) {
			if (data === '1') {
				return '【日常消防监督检查】';
			} else if (data === '2') {
				return '【举报任务】';
			} else {
				return '【其他任务】';
			}
		}
	},

	data() {
		return {
			dataArr: []
		};
	},

	methods: {
		setCenter(location) {
			this.$emit('openMap', location);
		},

		recordChange() {
			console.log(1);
		},
		
		updateData() {
			let arr = [];
			
			if (this.type === 'normal') {
				this.recordData.map(item => {
					if (item.taskStatus === '1') {
						arr.push(item);
					}
				});
			
				this.dataArr = arr;
			} else if (this.type === 'illegal') {
				this.recordData.map(item => {
					if (item.taskStatus === '2') {
						arr.push(item);
					}
				});
			
				this.dataArr = arr;
			} else {
				this.dataArr = this.recordData;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.missionRecCard {
	.content {
		max-height: calc(100vh - 270px);
		// background-color: #fff;
		padding: 15px 15px;
		overflow-y: auto;
		font-size: 13px;

		.nodata {
			background-color: #fff;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 15px;
			color: #666;
			border-bottom: 1px solid #cecece;
			border-radius: 5px;
		}

		.recordItem {
			border-bottom: 1px solid #cecece;
			margin-bottom: 10px;
			background-color: #fff;
			padding: 10px 10px;
			border-radius: 5px;

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

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

			.normalBtn {
				padding: 4px 10px;
				padding-bottom: 6px;
				border-radius: 15px;
				font-size: 10px;
				text-align: center;
			}
		}
	}
}
</style>

<style lang="scss">
.missionRecCard {
	.wd100 {
		width: 100px;
	}

	.van-icon.van-icon-bars {
		display: flex;
		align-items: center;
		margin-left: 10px;
	}
}
</style>
