<template>
	<view class="addPlan">
		<headers class="fixedheader" :themeType="true" :showBack="true">
			<view class="headerName">
				{{title}}
			</view>
		</headers>
		<view :style="{ 'padding-top': statusBarHeight + 45 + 'px' }">
			<view class="plan-form">
				<view class="form-item b-bottom">
					<view class="form-lable"><text class="tag">*</text>验收部位</view>
					<input class="from-input" type="text" :value="formData.sideStationAddr" @blur="bindInputBlur" placeholder="请输入验收部位" />
				</view>
				<view class="form-item f-column b-bottom">
					<view class="form-lable">施工情况</view>
					 <textarea class="form-textarea" @input="bindLength" @blur="bindTextAreaBlur" maxlength="50" :value="formData.buildSituation" placeholder="请输入施工情况" />
					<view class="txt-length">{{textareaLengh}}/50</view>
				</view>
				<view class="form-item f-column">
					<view class="form-lable">现场照片</view>
					<view class="uni-form-input imgBox_wrap">
						<view class="addImgBox" @click="uploadImg" v-show="formData.imgFileList.length == 0">
							<image src="/static/safeMange/upload_image.png" class="icon-add" color="#F56C6C"></image>
						</view>
						<view class="imgBox" v-show="formData.imgFileList.length>0" v-for="(item,index) in formData.imgFileList" :key="index">
							<image :src="url_config+'image/'+item.url" class="img"
								@click="previewImage(url_config+'image/'+item.url)"></image>
							<view @click="deleteImg(item,1)" class="deleteImg">
								<image src="/static/safeMange/close_icon.png"></image>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="save-btn" @click="saveForm">保存</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				statusBarHeight: 0,
				title: "新增旁站记录",
				formData:{
					sideStationAddr: "",
					buildSituation: "",
					imgFileList:[],
					dangerousEngineeringId: ""
				},
				textareaLengh: 0,
			}
		},
		onShow(){
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		},
		onLoad(val){
			this.formData.dangerousEngineeringId = val.id
		},
		methods:{
			bindTextAreaBlur(e){
				console.log(e)
				this.formData.buildSituation = e.detail.value
			},
			bindInputBlur(e){
				console.log(e)
				this.formData.sideStationAddr = e.detail.value
			},
			uploadImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.formData.imgFileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.formData.imgFileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.formData.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.formData.imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.videoFileList = fileArr;
							}
			
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
			
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			bindLength(e){
				// console.log(e)
				this.textareaLengh = e.detail.value.split('').length
			},
			saveForm(){
				console.log(this.formData)
				let data = {
					sideStationAddr: this.formData.sideStationAddr,
					buildSituation: this.formData.buildSituation,
					dangerousEngineeringId: this.formData.dangerousEngineeringId,
					createUser: JSON.parse(uni.getStorageSync('userInfo')).userId,
				}
				let arr = []
				this.formData.imgFileList.forEach(item=>{
					arr.push(item.url)
				})
				data.imageUrl = arr.join(',')
				if(data.sideStationAddr == ""){
					uni.showToast({
					    title: '请输入验收部位！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				console.log(data)
				this.sendRequest({
					url:'xmgl/dangerousEngineeringSideStation/add',
					method:'post',
					data: data,
					success:res=>{
						uni.hideLoading()
						if(res.code==200){
							uni.showToast({
								title:'保存成功'
							})
							uni.navigateBack({})
						}
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.addPlan{
	min-height: 100%;
	background: #F6F6F6;
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.save-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 96rpx;
		background: #2b8df3;
		color: #fff;
		text-align: center;
		line-height: 96rpx;
	}
	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		width: 100%;
		min-height: 120rpx;
	}
	
	.imgBox {
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		position: relative;
		margin-right: 30rpx;
		margin-bottom: 16rpx;
	
		.img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	
		.deleteImg {
			position: absolute;
			right: -12rpx;
			top: -18rpx;
			uni-image{
				width: 20rpx;
				height: 20rpx;
			}
		}
	
	}
	
	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-right: 12rpx;
		uni-image{
			width: 100%;
			height: 100%;
		}
		// .icon-add {
		// 	width: 36rpx;
		// 	height: 36rpx;
		// }
	}
	.b-bottom{
		border-bottom: 1px solid #F6F6F6;
	}
	.f-column{
		flex-direction: column;
	}
	.plan-form{
		padding-top: 20rpx;
		padding-bottom: 96rpx;
		.form-item{
			padding: 28rpx 24rpx;
			display: flex;
			justify-content: space-between;
			background: #fff;
			.form-lable{
				white-space: nowrap;
				.tag{
					color: #DD524D;
				}
			}
			.from-input{
				text-align: right;
			}
		}
		.txt-length{
			color: #888;
			text-align: right;
			margin-top: 20rpx;
			font-size: 14px;
		}
		.form-textarea{
			margin-top: 30rpx;
			width: 100%;
			background: #F8F8F8;
			border: 1px solid #f0f0f0;
			height: 160rpx;
			padding: 20rpx;
			box-sizing: border-box;
			// overflow: auto;
			/deep/uni-textarea{
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				.uni-textarea-compute{
					width: 100%;
					height: 100%;
					overflow: auto;
				}
			}
		}
	}
}
</style>
