<template>
	<div style="padding-top: 13vw;">
		<TopNav navTitle="工作日志" :rightTitle="'地图模式'"/>
		<div class="rz_item_box" v-for="(item,index) in gzrzList.list" :key="index" >
			<div class="rz_item_img_box">
				<van-image width="45px" height="45px" fit="contain" :src="item.imgUrl">
					<template v-slot:loading>
						<van-loading type="spinner" size="20" />
					</template>
				</van-image>
				<div class="rz_item_text">
					<div class="time">{{item.time}}</div>
					<div>
						<soan>{{item.name}}</soan>
						<soan class="address">{{item.address}}</soan>
					</div>
				</div>
			</div>
			<soan class="rz_zt" :class="item.status == 0 ? 'proceed' : 'accomplish'">{{item.status == 0 ? '进行中' : '已完成'}}</soan>
		</div>
	</div>
</template>

<script setup>
	import TopNav from '../../../components/topNav.vue';
	import {
		ref,
		reactive
	} from 'vue';
	const themeType = ref(getStorage('themeSetting'));
	const gzrzList = reactive({
		list: [{
				name: '人员核查',
				time: '2022-03-11 14:32:55',
				address: '高新区创业路5号3单元',
				imgUrl: require('../../../assets/images/menu-yyhc.png'),
				status: 0
			},
			{
				name: '车辆核查',
				time: '2022-03-11 14:32:55',
				address: '高新区创业路5号3单元',
				imgUrl: require('../../../assets/images/menu-clhc.png'),
				status: 1
			},
			{
				name: '人员报备',
				time: '2022-03-11 14:32:55',
				address: '高新区创业路5号3单元',
				imgUrl: require('../../../assets/images/menu-rwzx.png'),
				status: 1
			}
		]
	})
</script>

<style lang="scss" scoped>
	@import "../../../assets/styles/mixin.scss";

	.rz_item_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:4vw 3vw;
		// border-bottom: 1px solid #F1F3F4;
		@include font_size($font_medium_s);
		@include font_color($font-color-theme);
		@include item_bottom_color($bottom-border-top-clore-theme);
		.rz_item_img_box {
			display: flex;
			align-items: center;
		}

		.rz_item_text {
			margin-left: 3vw;

			.time {
				@include font_size($font_medium);
				margin-bottom: 1.5vw;
			}

			.address {
				margin-left: 5vw;

			}
		}

		.rz_zt {
			height: 5vw;
			@include font_size($font_little_s);
			padding: 2px 8px;
			border-radius: 15px;
			color: #fff;
			
		}
		.accomplish{
			background-color: #23D96E;
		}
		.proceed{
			background-color: #3e6ee8;
		}
	}
</style>
