<template>
	<view class="container">
		<view class="form">
			<view class="form_item" v-if="survMulchRecord.stationName">
				<view class="left">选择站点:</view>
				<view class="nr">{{survMulchRecord.stationName}}</view>
			</view>
			<view class="form_item" v-if="survMulchRecord.sampTime">
				<view class="left">采样时间:</view>
				<view class="nr">{{survMulchRecord.sampTime}}</view>
			</view>
			<view class="form_item" v-if="survMulchRecord.cropName">
				<view class="left">覆膜作物:</view>
				<view class="nr">{{survMulchRecord.cropName}}</view>
			</view>
			<view class="form_item" v-if="survMulchRecord.mulchYear">
				<view class="left">覆膜年份:</view>
				<view class="nr">{{survMulchRecord.mulchYear}}年</view>
			</view>
			<view class="form_item" v-if="survMulchRecord.mulchRemain">
				<view class="left">覆膜残留量:</view>
				<view class="nr">{{survMulchRecord.mulchRemain}}kg/hm²</view>
			</view>
			<view class="item_pic" v-if="imglist.length!=0">
				<view class="pic_top">
					相关图片:
				</view>
				<view class="pic_bot">
					<view class="imgList">
						<image @click="seepic(item)" v-for="(item,index) in imglist" :key="index" :src="item.path" mode=""></image>
					</view>
				</view>
			</view>
			<view class="bz_item" v-if="survMulchRecord.mNote">
				<view class="bz_top">
					备<span class="bz">注:</span>
				</view>
				<view class="bz_bot">
					<textarea v-model="survMulchRecord.mNote" disabled="true" placeholder="请输入备注" style="width: 100%;"/>
				</view>
			</view>
		</view>
		<view class="bot_btn">
			<button class="primary" @click="toback()">返 回</button>
		</view>
		<view class="pagebot"></view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default{
		data(){
			return{
				array:[],
				arrays:[],
				survMulchRecord:{
					sampTime:'',
					mulchYear:'',
					mulchRemain:'',
					cropName:'',
					stationName:'',
					stationCode:'',
					mNote:'',
					mPics:[],
					id:''
				},
				index:'',
				imglist:[],
				mpics:[],
				baseUrl:configService.apiUrl,
				uploadUrl:'/applet/common/upload',
			}
		},
		onLoad(options) {
			this.survMulchRecord = JSON.parse(decodeURIComponent(options.item));
			console.log(this.survMulchRecord)
			this.mpics = this.survMulchRecord.mPics
			console.log(this.mpics)
			this.imglist = []
			var imglist = this.imglist
			for(var i=0;i<this.mpics.length;i++){
				imglist.push({
					path:this.baseUrl + '/applet/common/static/' + this.mpics[i],
					fileid:this.mpics[i]
				})
			}
			console.log(this.imglist,'图片')
		},
		onShow() {
			
		},
		methods:{
			toback(){
				uni.navigateBack({
					delta:1
				})
			},
			// 预览图片
			seepic(item) {
				console.log(item.path,'图片路径')
				let photoList = this.imglist.map(item => {
					return item.path;
				});
				uni.previewImage({
					current: 0,     // 当前显示图片的链接/索引值
					urls: photoList,    // 需要预览的图片链接列表，photoList要求必须是数组
					loop:true   // 是否可循环预览
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #fff;
	}
	.form{
		padding: 0 30rpx;
	}
	.form_item{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0rpx;
		border-bottom:1rpx solid #e4e4e4;
		// font-weight: 500
	}
	.left{
		font-weight: bold;
	}
	.nr{
		flex: 1;
		color: #767676;
		padding-left: 16rpx;
		text-align: right;
	}
	.dw{
		color: greenyellow;
	}
	.item_pic{
		border-bottom:1rpx solid #e4e4e4;
		padding: 30rpx 0rpx;
		font-weight: 500;
	}
	.imgList{
		display: flex;
		flex-wrap: wrap;
	}
	.imgList image{
		width: 130rpx;
		height: 130rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
	}
	.imgList image:nth-child(4n){
		margin-right: 0rpx;
	}
	.bz_item{
		padding: 40rpx 0rpx;
	}
	.bz_top{
		// font-weight: 500;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	.pic_top{
		font-weight: bold;
	}
	.bz{
		margin-left: 30rpx;
	}
	.bz_bot{
		color: #767676;
		line-height: 50rpx;
	}
	.bot_btn{
		padding: 0 30rpx;
		margin-top: 30rpx;
	}
	.primary{
		width: 100%;
		height: 90rpx;
		background-color: #0F6EFF;
		border: none;
		border-radius: 50rpx;
		color:#fff;
		font-weight: bold;
	}
	.dw{
		margin-left: 5rpx;
	}
	.pagebot{
		height: 200rpx;
	}
</style>