<template>
	<view style="width: 100%;height: 100%;padding: 10px;">
		<scroll-view  scroll-y="true" class="scroll-Y" show-scrollbar="false" >
		<view style="display: flex;flex-direction: row;border-bottom: 1rpx solid #4BBC9A;align-items: center;">
			<image class="tip" src="../../static/security-submit/tip.png">
			<text class="toptitle">整改项提交</text>
		</view>
		<view class="item" hover-class="hover" @click="showTaskPicker">
			<text class="title" style="margin-top: 30rpx;">检查任务</text>
			<view class="selcontent">
				<text class="datacontent">{{curTask.name}}</text>
				<image class="tip" src="../../static/common/arrow_right_gray.png">
			</view>
		</view>
		<view class="item" hover-class="hover" @click="showObjectPicker">
			<text class="title" style="margin-top: 30rpx;">检查对象</text>
			<view class="selcontent">
				<text class="datacontent">{{curObject.name}}</text>
				<image class="tip" src="../../static/common/arrow_right_gray.png">
			</view>
		</view>	
		<view class="item" hover-class="hover" @click="showItemTypePicker">
			<text class="title" style="margin-top: 30rpx;">检查项类型</text>
			<view class="selcontent">
				<text class="datacontent">{{curItemType.name}}</text>
				<image class="tip" src="../../static/common/arrow_right_gray.png">
			</view>
		</view>	
		<view class="item" hover-class="hover" @click="showItemPicker">
			<text class="title" style="margin-top: 30rpx;">检查项</text>
			<view class="selcontent">
				<text class="datacontent">{{curItem.name}}</text>
				<image class="tip" src="../../static/common/arrow_right_gray.png">
			</view>
		</view>	
		<view class="item" hover-class="hover" @click="showAddressSel">
			<text class="title" style="margin-top: 30rpx;">位置</text>
			<view class="selcontent">
				<text class="datacontent">{{address}}</text>
				<image class="tip" src="../../static/common/arrow_right_gray.png">
			</view>
		</view>	
		<view style="margin-top: 20px;">
			<text class="title">整改项详情</text>
			<view style="width: auto;margin-top: 10px;">
				<textarea class="detail"  @blur="changeTextValue" />
			</view>
		</view>
		<view style="margin-top: 20px;">
			<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;flex-direction: row;">
				<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>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 40px;">
			<view hover-class="submithover"  @click="showModal" class="submit-button">
				<text class="submittext" >提交</text>
			</view>
		</view>
		<view style="width: 100%;height: 40px;">
			
		</view>
		</scroll-view>
		<ActionSheet :show="showActionSheet" :tips="tips" :item-list="actionList" :mask-closable="maskClosable"
			:color="color" :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></ActionSheet>
		<Picker
		    mode="linkage"
			   :level="1"
			   @confirm="onConfirm"
			   ref="picker"
			   :linkList="itemList"
			   themeColor="#f00"
		></Picker>
		<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 Picker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				showActionSheet: false,
				maskClosable: true,
				tips: "请选择",
				color: "#9a9a9a",
				size: 26,
				isCancel: true,
				actionList: [{text:"打开相机"},{text:"从相册中选择"}],
				objectData:{},
				checkitem:{},
				taskId:"",
				images:[],
				textvalue:"kk",
				itemList:[],
				curPicker:"",
				curTask:{},
				curObject:{},
				curItemType:{},
				curItem:{},
				taskList:[],
				objectList:[],
				itemTypeList:[],
				checkItemList:[],
				address:"",
				addressType:"",
				description:"",
				room:{},
				submitShow:false,
				
			}
		},
		onLoad() {
			var that = this;
			uni.$on('addressSave',function(data){
				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('securitySubmitPicChange',function(data){
				that.images = data[0];
			})
			this.getTaskList();
		},
		onUnload(){
		  var that = this;
		  uni.$off('addressSave',function(data){
		  	  that.GLOBALUTIL.addressSelectionTemp = [];
		  })
		  uni.$off('securitySubmitPicChange',function(data){
		  })
		},
		methods: {
			cancel:function(){
				this.submitShow = false;
			},
			showModal:function(){
				this.submitShow = true;
			},
			onclick: function() {
				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.curCheckScope),
					"check_item_id":this.curItem.value,
					"check_list_id":this.curItemType.value,
					"check_task_id":this.curTask.value,
					"images":JSON.stringify(this.images),
					"description":this.description,
					"room":JSON.stringify(this.room)
				}
				console.log(JSON.stringify(body))
				// console.log(this.GLOBALUTIL.url)
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				var bd = JSON.stringify(body);
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/danger', 
					method: 'POST',
					data:bd,
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/json',
						'user' : JSON.stringify(user)
				    },
				    success: (res) => {
						if(res.statusCode == 200){
							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;
						console.log(uri)
						console.log(JSON.stringify(res))
						that.images.push(uri);
				    }
				})
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			changeTextValue:function(e){
				this.description =  e.detail.value;
			},
			showTaskPicker(){
				this.curPicker = "task";
				this.itemList = this.taskList
				this.$refs.picker.show()
			},
			showObjectPicker(){
				this.curPicker = "object";
				this.itemList = this.objectList
				this.$refs.picker.show()
			},
			showItemTypePicker(){
				this.curPicker = "type";
				this.itemList = this.itemTypeList
				this.$refs.picker.show()
			},
			showItemPicker(){
				this.curPicker = "item";
				this.itemTypeList.map((opt)=>{
					if(opt.value == this.curItemType.value){
						this.checkItemList = opt.children
						var itemlist = []
						this.checkItemList.map((opt)=>{
							itemlist.push({label:opt.content,value:opt.id})
						})
						this.itemList = itemlist
					}
				})
				this.$refs.picker.show()
			},
			onConfirm(data){
				console.log(JSON.stringify(data))
				if(this.curPicker == "task"){
					this.curTask = {"name":data.checkArr[0],value:data.checkValue[0]}
					this.loadTaskObject();
				}else if(this.curPicker == "object"){
					this.curObject = {"name":data.checkArr[0],value:data.checkValue[0]}
					this.objectData.map((opt)=>{
						if(opt.id == this.curObject.value){
							if(opt.type == "site"){
								this.addressType = "site";
								this.address = opt.name
							}
							this.curCheckScope = opt;
							this.room = opt
						}
					})
					this.loadItemTypeData();
				}else if (this.curPicker == "type"){
					this.curItemType = {"name":data.checkArr[0],value:data.checkValue[0]}
				}else{
					this.curItem = {"name":data.checkArr[0],value:data.checkValue[0]}
				}
			},
			showAddressSel(){
				if(this.addressType == "site"){
					return
				}
				uni.navigateTo({
					url:"../../components/address-select/index?maxLevel=4"
				})
			},
			//任务列表
			getTaskList(){
				var body = {};
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/check-tasks?page_size=200&page_number=1', 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						var data = res.data.data;
						var itemList = data.map((opt)=>{
							return {label:opt.name,value:opt.id};
						})
						this.tasklist = itemList;
						this.itemList = itemList; 
				    }
				})
			},
			//任务对象
			loadTaskObject(){
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/check-task-scope/'+this.curTask.value, 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						var data = res.data;
						this.objectData = data;
						var itemList = data.map((opt)=>{
							return {label:opt.name,value:opt.id};
						})
						this.objectList = itemList;
						this.itemList = itemList; 
				    }
				})
			},
			loadItemTypeData(){
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/check-task-lists/'+this.curTask.value+"?check_site_id="+this.selObject, 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						var data = res.data;
						this.itemData = data;
						var itemList = data.map((opt)=>{
							return {label:opt.content,value:opt.id,children:opt.children};
						})
						this.itemarr = itemList;
						this.itemTypeList = itemList;
				    }
				})
			},
			
			
		},
		components: {
			ActionSheet,
			AddressSelect,
			Picker,
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
	}

	.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;
		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-left: 0;
		margin-right: 0;
		margin-bottom: 40rpx;
	}
	.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:auto;
		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
	 }
	 .toptitle {
		color: #666666;
		font-size: 17px;
	 }
	.selcontent {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}
	.item {
		border-bottom: 1rpx solid #D0D0D0;
		width: 100%;
		margin-top: 20rpx;
		padding-bottom: 10rpx;
	}
	.datacontent {
		width: 100%;
		font-size: 16px;
		color: #4F4F4F;
	}
	.hover {
		opacity: 0.7;
	}
	.scroll-Y{
		height: 100%;
	}
	.photo{
		margin-right: 30rpx;
	}
</style>
