<template>
	<mescroll-body class="containter" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<view v-if="isShow" class="news-li" v-for="(item,index) in dataList" :key="index">
			<view>
				<text>{{index}}.{{item.content}}</text>
			</view>
			<view style="display: flex;flex-direction: row; width:690rpx;justify-content: space-between;margin-top:20rpx;">
				<view style="display: flex;flex-direction: row;justify-content: flex-start;">
					<view  v-for="(obj,index1) in checkitems" :key="index1">
						<view class="item-container" @click="itemClick(index,index1)">
							<view :class="item.status==index1? 'selected' :'unselected' "></view>
							<text>{{obj.name}}</text>
						</view>
					</view>
				</view>
				<view ><image @click="checkItem(item)" class="icon" src="../../static/security-check/safeEdit.png"></view>
			</view>
		</view>
		<button hover-class="submithover"  @click="showModal" class="submit-button">
			<text class="submittext">提交</text>
		</button>
		<form-alert v-if="submitShow"  name="检查对象" placeholder="确定提交所填的数据?" @confirm="onSubmitClick" @cancel="cancel"></form-alert>
		 <PopUp  ref="popup" :isdistance="true"></PopUp>  
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				dataList: [],
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
				},
				isShow:false,
				checkitems:[],
				objectData:{},
				taskId:"",
				checkResult:[],
				submitShow:false
			}
		},
		methods: {
			cancel:function(){
				this.submitShow = false;
			},
			showModal:function(){
				this.submitShow = true;
			},
			onLoad() {
			  var that = this;
			  uni.$on('sendCheckItem',function(data){
				    that.objectData = data[0]
					that.taskId = data[2];
					var content = data[1].children
					content.map((opt)=>{
						opt.status = 0;
						// opt.checkitems = [];
					})
					that.dataList = content;
			  })
			  this.loadData();
			},
			onUnload(){
			  uni.$off('sendCheckItem',function(data){
					
			  })
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调 */
			upCallback(page) {
			
			},
			goDetail(){
				uni.navigateTo({
					url:"./select-checkobject"
				})
			},
			itemClick(index,status){
				this.dataList[index].status = status;
				var res = {
					name:this.checkitems[status].name,
					code:this.checkitems[status].code,
					id:this.checkitems[status].id
				}
				this.checkResult[index].result_type = JSON.stringify(res);
				this.$forceUpdate();
				console.log(JSON.stringify(this.checkResult))
			},
			checkItem(item){
				uni.navigateTo({
					url:"./index"
				})
				uni.$emit("safeReportData",[this.objectData,item,this.taskId]);
			},
			loadData(){
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/base-data/v1/dict-items?sort_property=ID&sort_direction=ASC&dict_code=JCJG&page_number=1&page_size=10', 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						this.dataList.map((opt)=>{
							opt.checkitems = res.data.data;
						})
						this.checkitems = res.data.data;
						this.isShow = true;
						// console.log(JSON.stringify(this.objectData))
						// console.log(JSON.stringify(this.dataList))
						// console.log(JSON.stringify(this.checkitems))
						this.checkResult = [];
						this.dataList.map((opt)=>{
							var res = {
								name:this.checkitems[0].name,
								id:this.checkitems[0].id,
								code:this.checkitems[0].code
							}
							var  item = {
								"result_type":JSON.stringify(res),
								"check_item_id":opt.id,
								"check_list_id":opt.check_list_id,
								"check_task_id":this.taskId,
								"lab_id":this.objectData.id
							}
							this.checkResult.push(item)
						})
				    }
				})
			
			},
			onSubmitClick(){
				this.submitShow = false;
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				var body = this.checkResult
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/check-result', 
					method: 'POST',
					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){
							uni.$emit("refreshTaskList")
							this.$refs.popup.open({
								type:'success',
								content:'提交成功!',
								timeout:1000,
								isClick:false
							}); 
							setTimeout(()=>{
								uni.navigateBack({
									delta:2
								})
							},1000)
						}
				    }
				})
			}
		}
	}
</script>

<style>
	/*说明*/
	.notice{
		font-size: 30upx;
		padding: 40upx 0;
		border-bottom: 1upx solid #eee;
		text-align: center;
	}
	/*展示上拉加载的数据列表*/
	.news-li{
		display: flex;
		flex-direction: column;
		font-size: 32upx;
		padding: 32upx;
		border-bottom: 1upx solid #eee;
		width: 100%;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
	.icon {
		width:30rpx;
		height:30rpx;
	}
	.top-container {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.hover{
		opacity: 0.7;
	}
	.item-container{
		display: flex;
		flex-direction: row;
		margin-right: 30rpx;
	}
	.selected {
		width:40rpx;
		height:40rpx;
		background-color: #00CE47;
	},
	.unselected {
		width:40rpx;
		height:40rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #00CE47 ;
	}
	.containter{
		display: flex;
		width: 100%;
	}
	.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;
		position: absolute;
		left: 50%;
		bottom: 60rpx;
		margin-left: -300rpx; 
	}
	.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;
	}
</style>
