<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"  @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>
				<button  @click="onclick" class="camera-button">
					<image class="camera" src="../../static/common/camera.png">
				</button>
			</view>
		</view>
		<button hover-class="submithover"  @click="onSubmitClick" 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>
		
	</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:""
				
			}
		},
		onLoad() {
		  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.objectData = JSON.parse(baseData.check_scope)
				that.checkitem = baseData.check_item
				that.taskId = baseData.check_task_id ;
				that.room = JSON.parse(baseData.room);
				if(that.objectData.type == "site"){
					that.addressType = "site";
					that.address = that.objectData.name
				}
				
		  })
		},
		onUnload(){
		  var that = this
		  uni.$off('addressSave',function(data){
				that.GLOBALUTIL.addressSelectionTemp = [];
		  })
		  uni.$off('safeReportData',function(data){
		  })
		  uni.$off('rectificationEdit',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;
			
			},
			onSubmitClick: function() {
				// uni.navigateTo({
				// 	url:'../../components/address-select/index?maxLevel='+this.maxLevel
				// });
			    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)
				}
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/danger', 
					method: 'POST',
					body:JSON.stringify(body),
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/json',
						'user' : JSON.stringify(user)
				    },
				    success: (res) => {
						console.log(res)
				    }
				})
			},
			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 = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				// uni.request({
				//     url: this.GLOBALUTIL.url+'/safety/v1/file/image', 
				// 	method: 'POST',
				// 	data:{
				// 		file:[{"uri": imgPath[0],"name":"file"}]
				// 	},
				//     header: {
				//         'Accept': 'application/json',
				//         'Content-Type': 'multipart/form-data',
				// 		'user' : JSON.stringify(user)
				//     },
				//     success: (res) => {
				// 		console.log(res)
				//     }
				// })
				// console.log(imgPath[0])
				//  let imgs = imgPath.map((value, index) => {  
				// 	return {  
				// 		name: "file["+index+"]",//注意这一行，uni的hello的示例中，这里为key名+index，这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。  
				// 		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) => {
						console.log(JSON.stringify(res))
				    }
				})
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			changeTextValue:function(e){
				this.description =  e.detail.value;
			},
			
		},
		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;
	}
	.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>
