<template>
	<view class="content">
		<text class="title">  实验室名称: {{objectData.name}}</text>
		<text class="title" style="margin-top: 30rpx;">位置</text>
		<view class="location-container" hover-class="hover" @click="showAddressSel">
			<text class="location">{{address}}</text>
			<image class="tip" src="../../static/common/arrow_right_gray.png">
		</view>
		<text class="title" style="margin-top: 30rpx;">整改项详情</text>
		<view style="width: 100%;">
			<textarea class="detail" :value="description"  @blur="changeTextValue" />
		</view>
		<text class="title" style="margin-top: 30rpx;">整改项照片</text>
		<view style="width: 100%;display: flex;align-items: flex-start; justify-content: flex-start;margin-top: 30rpx;">
			<view style="margin-right: 30rpx;"  v-for="(item,index) in images" :key="index">
				<button  @click="onPhotoClick(index)" class="camera-button">
					<image mod="scaleToFill" class="camera-button" :src="item" />
				</button>
			</view>
			<view class="photo">
				<button  @click="onclick" class="camera-button">
					<image class="camera" src="../../static/common/camera.png">
				</button>
			</view>
		</view>
		<button hover-class="submithover"  @click="showModal" class="submit-button">
			<text class="submittext" >提交</text>
		</button>
		<ActionSheet :show="showActionSheet" :tips="tips" :item-list="itemList" :mask-closable="maskClosable"
			:color="color" :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></ActionSheet>
		<form-alert v-if="submitShow"  name="检查对象" placeholder="确定提交所填的数据?" @confirm="onSubmitClick" @cancel="cancel"></form-alert>
		 <PopUp  ref="popup" :isdistance="true"></PopUp>  
	</view>
</template>

<script>
import ActionSheet from  "@/components/actionsheet/actionsheet.vue"
import AddressSelect from  "@/components/multi-select/cityChiden.vue"
import uniNavBar from "@/components/uni-header/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				showActionSheet: false,
				maskClosable: true,
				tips: "请选择",
				color: "#9a9a9a",
				size: 26,
				isCancel: true,
				itemList: [{text:"打开相机"},{text:"从相册中选择"}],
				objectData:{},
				checkitem:{},
				taskId:"",
				images:[],
				room:{},
				description:"",
				address:"",
				addressType:"",
				submitMethod:"POST",
				baseBody:{},
				submitShow:false,
				
			}
		},
		onLoad(option) {
		  if(option.mod){
			  this.submitMethod = "PUT"
		  }
		  var that = this;
		  uni.$on('addressSave',function(data){
				console.log(JSON.stringify(that.GLOBALUTIL.addressSelectionTemp))	
				var roomData = {};
				roomData.code = that.GLOBALUTIL.addressSelectionTemp[3].code;
				roomData.id = that.GLOBALUTIL.addressSelectionTemp[3].id;
				roomData.name = that.GLOBALUTIL.addressSelectionTemp[1].name + that.GLOBALUTIL.addressSelectionTemp[3].name;
				that.room = roomData
				that.address = that.GLOBALUTIL.addressSelectionTemp[0].name + that.GLOBALUTIL.addressSelectionTemp[1].name+that.GLOBALUTIL.addressSelectionTemp[2].name + that.GLOBALUTIL.addressSelectionTemp[3].name;
		  })
		  uni.$on('safeReportData',function(data){
			 that.objectData = data[0]
			 that.checkitem = data[1]
			 that.taskId = data[2]
			 that.room = that.objectData
			 if(that.objectData.type == "site"){
			 	that.addressType = "site";
			 	that.address = that.objectData.name
			 }
		  })
		  uni.$on('rectificationEdit',function(data){
		  		var baseData = data[0];
				that.baseBody  = baseData;
				that.objectData = JSON.parse(baseData.check_scope)
				that.checkitem = baseData.check_item
				that.taskId = baseData.check_task_id ;
				that.description = baseData.description ;
				that.images = JSON.parse(baseData.images);
				that.room = JSON.parse(baseData.room);
				if(that.objectData.type == "site"){
					that.addressType = "site";
					that.address = that.objectData.name
				}
				
		  })
		  uni.$on('securitySubmitPicChange',function(data){
		  	that.images = data[0];
		  })
		},
		onUnload(){
		  var that = this
		  uni.$off('addressSave',function(data){
				that.GLOBALUTIL.addressSelectionTemp = [];
		  })
		  uni.$off('safeReportData',function(data){
		  })
		  uni.$off('rectificationEdit',function(data){
		  })
		  uni.$off('securitySubmitPicChange',function(data){
		  })
		},
		methods: {
			showAddressSel(){
				if(this.addressType == "site"){
					return
				}
				uni.navigateTo({
					url:"../../components/address-select/index?maxLevel=4"
				})
			},
			onclick: function() {
				console.log(this.textvalue)
				this.showActionSheet = true;
			
			},
			onPhotoClick:function(index){
				uni.navigateTo({
					url:"../../components/image-preview/image-preview"
				})
				uni.$emit("previewPhoto",[this.images,index])
			},
			onSubmitClick: function() {
				this.submitShow = false;
			    var body = {
					"check_scope":JSON.stringify(this.objectData),
					"check_item_id":this.checkitem.id,
					"check_list_id":this.checkitem.check_list_id,
					"check_task_id":this.taskId,
					"images":JSON.stringify(this.images),
					"place":this.objectData.name,
					"description":this.description,
					"room":JSON.stringify(this.room)
				}
				if(this.submitMethod == "PUT"){
					body = this.baseBody
					body.description = this.description
				}
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				 console.log(JSON.stringify(body))
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/danger', 
					method: this.submitMethod,
					data:JSON.stringify(body),
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/json',
						'user' : JSON.stringify(user)
				    },
				    success: (res) => {
						console.log(JSON.stringify(res))
						if(res.statusCode == 200){
							if(this.submitMethod == "PUT"){
								uni.$emit("rectificationListData",[this.baseBody])
							}
							this.$refs.popup.open({
								type:'success',
								content:'提交成功!',
								timeout:1000,
								isClick:false
							}); 
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
				    }
				})
			},
			itemClick: function(item) {
				var that = this
				if(item.index == 0){
					uni.chooseImage({
					    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['camera'], //相机
					    success: function (res) {
						   var imgPath = res.tempFilePaths;
						   that.uploadPic(imgPath);
					    }
					});
				}else{
					uni.chooseImage({
					    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success: function (res) {
					       var imgPath = res.tempFilePaths;
					       that.uploadPic(imgPath);
					    }
					});
				}
				this.closeActionSheet();
			},
			uploadPic(imgPath){
				var user = {};
				var that = this;
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				 let imgs = imgPath.map((value, index) => {  
					return {  
						name: "file",
						uri: value  
					}  
				});  
				uni.uploadFile({
					url: this.GLOBALUTIL.url+'/safety/v1/file/image', 
					files:imgs,
					filePath:imgPath[0],
					name:"file",
					header: {
						'user' : JSON.stringify(user),
						'Content-Type': 'multipart/form-data',
				    },
				    success: (res) => {
						var uri = JSON.parse(res.data).data;
						that.images.push(uri);
				    }
				})
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			changeTextValue:function(e){
				this.description =  e.detail.value;
			},
			cancel:function(){
				this.submitShow = false;
			},
			showModal:function(){
				this.submitShow = true;
			},
			
		},
		components: {
			ActionSheet,
			AddressSelect,
			uniNavBar
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 30rpx;
		color: #8f8f94;
	}
	.loginbtn {
		width:180rpx;
		height:200rpx;
	}
	.login-hover {
		width:200rpx;
		height:200rpx;
		background-color:#00CE47;
	}
	.testview {
		width:209rpx;
		height:200rpx;
		background-color:linear-gradient(red, yellow, blue);
	}
	.location-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width:100%;
	}
	.arrow-right{
		width:40rpx;
		height:40rpx;
	}
	.camera-button {
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width:200rpx;
		height: 200rpx;
		padding:0 ;
	}
	.camera {
		width:50rpx;
		height:50rpx;
	}
	.submit-button {
		display: flex;
		width:600rpx;
		height:60rpx;
		align-items: center;
		justify-content: center;
		background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);
		border-radius: 15rpx;
		margin-top: 80rpx;
	}
	.submittext {
		font-size: 14px;
		color: #FFFFFF;
		font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	.submithover{
		opacity: 0.7;
	}
	.detail {
		width:100%;
		height:300rpx;
		border: 1rpx solid #000000;
	}
	.status_bar {
		  height: var(--status-bar-height);
		  width: 100%;
	 }
	 .location{
		 font-size: 34rpx;
		 color: #000000;
	 }
	 .tip {
	 		width: 30rpx;
	 		height:30rpx
	 }
	 .hover {
	 	opacity: 0.7;
	 }
</style>
