<template>
	<view class="container">
		<view class="form">
			<view class="form_item">
				<view class="form_top">
					选择站点:
				</view>
				<view class="form_bot">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="dates">
							<view class="uni-input" v-if="!survMulchRecord.stationName" style="color: #808080;">请选择监测站点</view>
							<view class="uni-input" v-else>{{survMulchRecord.stationName}}</view>
						</view>
						<image class="dateimg" src="../../../static/xiala.png" mode="" style="width: 32rpx;height: 16rpx;"></image>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_top">
					采样时间:
				</view>
				<view class="form_bot">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="dates">
							<view class="uni-input" style="color: #808080;" v-if="!survMulchRecord.sampTime">请选择采样时间</view>
							<view class="uni-input" v-else>{{survMulchRecord.sampTime}}</view>
						</view>
						<image class="dateimg" src="../../static/data.png" mode=""></image>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_top">
					覆膜作物:
				</view>
				<view class="form_bot">
						<input type="text" placeholder="请输入覆膜作物" v-model="survMulchRecord.cropName" @blur="crop">
				</view>
			</view>
			<view class="form_item">
				<view class="form_top">
					覆膜年份:
				</view>
				<view class="form_bot">
					<picker mode="date" fields="year" :value="year" :start="startDate" :end="endDate" @change="bindDateChangeyear">
						<view class="dates">
							<view class="uni-input" style="color: #808080;" v-if="!survMulchRecord.mulchYear">请选择覆膜年份</view>
							<view class="uni-input" v-else>{{survMulchRecord.mulchYear}}</view>
						</view>
						<image class="dateimg" src="../../static/data.png" mode=""></image>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_top">
					覆膜残留量:
				</view>
				<view class="form_bot" style="display: flex;">
					<input type="text" placeholder="请输入覆膜残留量" v-model="survMulchRecord.mulchRemain" style="width: 90%;">
					<span class="dw">kg/hm²</span>
				</view>
			</view>
			<view class="item_pic">
					<view class="pic_top">
						相关图片:
					</view>
					<view class="pic_bot">
						<view class="imgList">
							<image class="imgs2" src="../../static/upload.png" mode="" @click="uploadimg()"></image>
							<view class="imgs1" v-for="(item,index) in imglist" :key="index">
								<image @click="seepic(item)" class="imgs" :src="baseUrl + '/applet/common/static/' + item.path" mode=""></image>
								<image class="delet" src="../../static/del_people.png" mode="" @click="todelet(index)"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="bz_item">
					<view class="bz_top">
						备<span class="bz">注:</span>
					</view>
					<view class="bz_bot">
						<textarea v-model="survMulchRecord.mNote" style="width: 100%;" @blur="mNote"/>
					</view>
				</view>
			</view>
			<view class="bot_btn">
				<button class="primary" @click="tosubmit()">提 交</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',
				reload:'true'
			}
		},
		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.mpics[i],
					fileid:this.mpics[i]
				})
			}
		},
		onShow() {
			this.getazsurvMulchRecord()
		},
		methods:{
			getazsurvMulchRecord(){
				this.array = []
				this.arrays = []
				this.$http.get('/applet/survStationInfo/list').then(res=>{
					for(var i=0;i<res.data.data.length;i++){
						this.arrays.push({
							label:res.data.data[i].stationName,
							value:res.data.data[i].stationCode
						})
						this.array.push(res.data.data[i].stationName)
						console.log(this.array)
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				console.log(this.index)
				this.survMulchRecord.stationName = this.array[this.index]
				for(var i=0;i<this.arrays.length;i++){
					if(this.survMulchRecord.stationName == this.arrays[i].label){
						this.survMulchRecord.stationCode = this.arrays[i].value
					}
				}
				console.log(this.survMulchRecord)
			},
			bindDateChange: function(e) {
				this.survMulchRecord.sampTime = e.detail.value
			},
			bindDateChangeyear: function(e){
				this.survMulchRecord.mulchYear = e.detail.value
			},
			mNote(e){
				this.survMulchRecord.mNote = e.detail.value
			},
			crop(e){
				this.survMulchRecord.cropName = e.detail.value
			},
			uploadimg(){
				var that = this
				uni.chooseImage({
					count: 9, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function (res) {
						var tempFilesSize = res.tempFiles[0].size; //获取图片的大小，单位B
						if (tempFilesSize <= 2000000) { //图片小于或者等于2M时 可以执行获取图片
						let params = {}
						params.file = res.tempFilePaths[0]
						params.biz = 'busi'
						var tempFilePaths = res.tempFilePaths
						for(var i=0;i<tempFilePaths.length;i++){
							that.$http.upload(that.baseUrl+that.uploadUrl,{
								filePath: res.tempFilePaths[i],
								name: 'file',
								formData:{
									file:res.tempFilePaths[i],
									biz:'busi'
								}
							}).then(res =>{
								console.log(res.data)	
								var imglist = that.imglist
								imglist.push({
									path:res.data.data.savePath,
									fileid:res.data.data.savePath
								})
								var mpics = that.mpics
								mpics.push(res.data.data.savePath)
								console.log(imglist,1456145)
							})
						}
						}else {
						  uni.showToast({
						    title: '上传图片不能大于2M!', //标题
						    icon: 'none' //图标 none不使用图标，详情看官方文档
						  })
						}
					}
				});
			},
			todelet(index){
				this.imglist.splice(index,1)
				this.mpics.splice(index,1)
			},
			// 预览图片
			seepic(item) {
				console.log(item.path,'图片路径')
				let photoList = this.imglist.map(item => {
					return this.baseUrl + '/applet/common/static/' + item.path;
				});
				uni.previewImage({
					current: 0,     // 当前显示图片的链接/索引值
					urls: photoList,    // 需要预览的图片链接列表，photoList要求必须是数组
					loop:true   // 是否可循环预览
				});
			},
			tosubmit(){
				this.survMulchRecord.mPics = this.mpics
				if(!this.survMulchRecord.stationCode){
					uni.showToast({
						title: "请选择站点",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(!this.survMulchRecord.sampTime){
					uni.showToast({
						title: "请选择采样时间",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(!this.survMulchRecord.cropName){
					uni.showToast({
						title: "请输入覆膜作物",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(!this.survMulchRecord.mulchYear){
					uni.showToast({
						title: "请选择覆膜年份",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(!this.survMulchRecord.mulchRemain){
					uni.showToast({
						title: "请输入覆膜残留量",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(this.survMulchRecord.mPics.length == 0){
					uni.showToast({
						title: "请至少上传一张图片",
						icon: 'none',
						duration: 2000
					})
					return
				}
				console.log(this.survMulchRecord)
				this.$http.post('/applet/survMulchRecord/edit',this.survMulchRecord).then(res=>{
					uni.showLoading({
						title: '正在提交...'
					});
					if(res.data.code == 0){
						uni.hideLoading();
						uni.navigateBack()
						let pages = getCurrentPages();
						let prevPage = pages[ pages.length - 2 ];
						prevPage.$vm.reload = this.reload;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: white;
	}
	.form{
		padding: 0 30rpx;
	}
	.form_item{
		padding-top: 33rpx;
		padding-bottom: 25rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}
	.form_top{
		margin-bottom: 26rpx;
		font-weight: bold;
	}
	.form_bot{
		position: relative;
	}
	.dates{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.dateimg{
		height: 32rpx;
		width: 32rpx;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.dw{
		color: #2ac066;
	}
	.item_pic{
		border-bottom:1rpx solid #e4e4e4;
		padding: 30rpx 0rpx;
		font-weight: 500;
	}
	.imgList{
		display: flex;
		flex-wrap: wrap;
	}
	.imgs2{
		width: 130rpx;
		height: 130rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
	}
	.imgs1{
		width: 130rpx;
		height: 130rpx;
		position: relative;
		margin-right: 24rpx;
		margin-top: 20rpx;
	}
	.imgs{
		width: 130rpx;
		height: 130rpx;
	}
	.imgs1:nth-child(4n){
		margin-right: 0rpx;
	}
	.imgs image{
		width: 100%;
		height: 100%;
	}
	.bz_item{
		padding: 40rpx 0rpx;
	}
	.bz_top{
		font-weight: bold;
		margin-bottom: 26rpx;
	}
	.bz{
		margin-left: 30rpx;
	}
	.pic_top{
		font-weight: bold;
		margin-bottom: 26rpx;
	}
	.bz_bot{
		color: #767676;
		line-height: 50rpx;
		border: 1rpx solid #ececec;
		border-radius: 10rpx;
		padding: 16rpx;
	}
	.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;
	}
	.pagebot{
		height: 200rpx;
	}
	.delet{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
	}
</style>