<template>
	<view class="detail">
		<view class="card">
			<view class="title">查看详细</view>
			<view class="row">
				<label>工作岗位：</label>
				<label>{{detail.postName}}</label>
			</view>
			<view class="row">
				<label>工作日期：</label>
				<label>{{detail.workDate}}</label>
			</view>
			<view class="row">
				<label>工作时长：</label>
				<label>{{detail.workTime}}</label>
			</view>
			<view class="row">
				<label>主要工作：</label>
				<label>{{detail.mainWork}}</label>
			</view>
			<view class="row">
				<label>附件：</label>
				<view class="photos">
					<image @tap="previewImg(attachment,index)" v-for="(img,index) in attachment" :src="basePath+img"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/config.js";
	import {
		previewImg
	} from "@/utils/uploadImg.js"
	export default {
		data() {
			return {
				detail: null,
				attachment: [],
				basePath: baseUrl
			}
		},
		onLoad(option) {
			this.detail = JSON.parse(option.detailData);
			console.log(this.detail);
			this.attachment = this.detail.workMaterial.split(",");
			console.log(this.attachment);
		},
		methods: {
			previewImg(imgs, index) {
				let images = imgs.map(img => {
					return {
						path: baseUrl + img
					}
				})
				previewImg(images, index);
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		height: calc(100vh - 44px);
		background-color: #F5F5F7;
		padding: 20rpx 30rpx 0;

		.card {
			margin: 30rpx 0rpx 0;
			padding: 30rpx;
			background-color: white;
			border-radius: 20rpx;

			.title {
				font-weight: bold;
				color: #202020;
				display: inline-block;
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}

			.row {
				margin-bottom: 30rpx;

				&>label:first-child {
					color: #9C9C9C;
					margin-right: 40rpx;
				}

				.photos {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;

					image {
						margin-bottom: 10rpx;
						width: 23.5%;
						border-radius: 8rpx;
						height: 136rpx;

						&:not(:nth-child(4n)) {
							margin-right: 2%;
						}
					}
				}
			}
		}
	}
</style>