<template>
	<Mescroll style="background-color: #F5F5F5;" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="news-li" v-for="news in dataList" :key="news.id" hover-class="hover" @click="goDetail(news)">
				<view style="width: auto;background-color: #FFFFFF;">
					<image class="statuspic" :src="news.imgsrc">
					<view  class="top-container" >
						<text class="title">{{news.description}}</text>
						<view class="detailtext"><text class="titletext">实验室</text><text class="contenttext">{{JSON.parse(news.check_scope).name}}</text></view>
						<view class="detailtext"><text class="titletext">负责人</text><text class="contenttext">{{news.manager?JSON.parse(news.manager).name:""}}</text></view>
						<view class="detailtext"><text class="titletext">创建人</text><text class="contenttext">{{news.creator?JSON.parse(news.creator).name:""}}</text></view>
						<view class="detailtext"><text class="titletextlong">创建时间</text><text class="contenttext">{{news.createTime}}</text></view>
						<view class="detailtext"><text class="titletextlong">检查任务</text><text class="contenttext">{{news.check_task_code_name?news.check_task_code_name:""}}</text></view>
					</view>
				</view>	
			</view>
			<Drawer mode="left" :visible="showDrawer" @close="closeDrawer">
				<view class="d-container">
					<view style="width: 100%; height:100%;padding:10px">
						<view hover-class="hover" @click="close" style="width: auto;display: flex;flex-direction: row; justify-content: flex-end;padding-right: 20px;">
							<image class="tip" src="../../static/rectification-item/close.png">
						</view>
						<text style="font-size: 24px; line-height:33px;margin-top: 50px;">过滤条件</text>
						<view class="item" hover-class="hover" @click="showStatusPicker">
							<text class="title" style="margin-top: 30upx;">状态</text>
							<view class="selcontent">
								<text class="datacontent">{{curStatus.name}}</text>
								<image class="tip" src="../../static/common/arrow_right_gray.png">
							</view>
						</view>
					<view class="item" hover-class="hover" @click="showTaskPicker">
						<text class="title" style="margin-top: 30upx;">检查任务</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="showLabPicker">
						<text class="title" style="margin-top: 30upx;">实验室</text>
						<view class="selcontent">
							<text class="datacontent">{{curLab.name}}</text>
							<image class="tip" src="../../static/common/arrow_right_gray.png">
						</view>
					</view>
					<view class="datetime" hover-class="hover" @click="showStartTimePicker">
						<text class="title" style="margin-left: 15upx;" >开始日期</text>
						<view class="selcontent-time">
							<text class="datacontent">{{startTime!=""?startTime:"请选择开始时间"}}</text>
							<image class="tip" src="../../static/common/arrow_right_gray.png">
						</view>
					</view>
					<view class="datetime" hover-class="hover" @click="showEndTimePicker">
						<text class="title" style="margin-left: 15upx;">结束日期</text>
						<view class="selcontent-time">
							<text class="datacontent">{{endTime !=""?endTime:"请选择开始时间"}}</text>
							<image class="tip" src="../../static/common/arrow_right_gray.png">
						</view>
					</view>
				
					<view style="display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 80px;">
						<view hover-class="submithover"  @click="onSubmitClick" class="submit-button">
							<text class="submittext" >提交</text>
						</view>
					</view>
				
		
					</view>
				</view>
			</Drawer>
				<Picker
				    :mode="pickerMod" 
					@confirm="onConfirm" 
					ref="picker" 
					themeColor="#f00"
					:selectList="itemList"
				></Picker>
	</Mescroll>
</template>

<script>
	import Mescroll from "../../components/mescroll-uni/mescroll-body.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import Drawer from '@/components/uni-drawer/uni-drawer.vue'
	import Picker from "@/components/w-picker/w-picker.vue";
	const sortFunction = (x,y)=>{
		if(x.created > y.created){
			return -1;
		}else {
			return 1;
		}
	}
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				dataList: [],
				upOption: {
					use: false,
				},
				showDrawer:false,
				drawer:{status:"fckkk"},
				itemList:[],
				statusData : [{label:"待确定",value:"unconfirmed"}, {label:"待处理",value:"pend"}, {label:"待整改",value:"correct"},{label:"整改中",value:"processed"},{label:"已处理",value:"finish"}, {label:'已取消',value:'cancel'}],
				curType:"",
				labData:[],
				taskData:[],
				filterBody:"",
				pickerMod:"selector",
				curTask:{},
				curStatus:{},
				curLab:{},
				startTime:"",
				endTime:"",
			}
		},
		
		components: {
			Drawer,
			Picker,
			Mescroll
		},
		methods: {
			closeDrawer(){
			},
			close(){
				this.showDrawer = false;
			},
			onNavigationBarButtonTap(){
				this.showDrawer = true;
			},
			onLoad() {
			  this.loadData();
			  this.getTaskList();
			  this.getLabList();
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调 */
			upCallback(page) {
			
			},
			/*获取列表*/
			loadData(){
				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/dangers?page_number=1&page_size=200'+this.filterBody, 
					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;
						data.map((opt)=>{
							opt.createTime = this.GLOBALUTIL.moment(opt.created).format("YYYY-MM-DD HH:mm:ss")
							opt.imgsrc = this.handleStatus(opt)
						})
						data.sort(sortFunction);
						this.dataList = data;
						// console.log(JSON.stringify(data))
				    }
				})
			},
			handleStatus(opt) {
				switch (opt.status) {
					case 'unconfirmed':
						return "../../static/rectification-item/daiqueding.png"
					case 'pend':
						return "../../static/rectification-item/daichuli.png"
					case 'correct':
						return "../../static/rectification-item/daizhenggai.png"
					case 'processed':
						return "../../static/rectification-item/zhenggaizhong.png"
					case 'finish':
						return "../../static/rectification-item/yiwancheng.png"
					case 'cancel':
						return "../../static/rectification-item/cancel.png"
					default:
						return"../../static/rectification-item/daiqueding.png"
				}
			},
			goDetail(data){
				uni.navigateTo({
					url:"./detail"
				})
				uni.$emit("rectificationListData",[data])
			},
			showStatusPicker(){
				this.curType = "status"
				this.pickerMod = "selector";
				this.itemList = this.statusData;
				this.$refs.picker.show()
			},
			showTaskPicker(){
				this.curType = "task"
				this.pickerMod = "selector";
				this.itemList = this.taskData;
				this.$refs.picker.show()
			},
			showLabPicker(){
				this.curType = "lab"
				this.pickerMod = "selector";
				this.itemList = this.labData;
				this.$refs.picker.show()
			},
			showStartTimePicker(){
				this.curType = "startTime";
				this.pickerMod = "date";
				this.$refs.picker.show()
			},
			showEndTimePicker(){
				this.curType = "endTime";
				this.pickerMod = "date";
				this.$refs.picker.show()
			},
			onConfirm(data){
				console.log(JSON.stringify(data))
				if(this.curType == "status"){
					this.curStatus = {"name":data.checkArr.label,value:data.checkArr.value}
				}else if(this.curType == "task"){
					this.curTask =   {"name":data.checkArr.label,value:data.checkArr.value}
				}else if(this.curType == "lab"){
					this.curLab =  {"name":data.checkArr.label,value:data.checkArr.value}
				}
				else if(this.curType == "startTime"){
					this.startTime = data.result
				}else{
					this.endTime = data.result
				}
				//this.curTask = {"name":data.checkArr[0],value:data.checkValue[0]}
			},
			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;
						console.log(data.length)
						var itemList = data.map((opt)=>{
							return {label:opt.name,value:opt.id};
						})
						this.taskData = itemList;
				    }
				})
			},
			getLabList(){
				var body = {};
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/education-manage/v1/experiment-centers?page_number=1&page_size=100&_=1539337073882', 
					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.labData = itemList;
				    }
				})
			},
			onSubmitClick(){
				this.filterBody = "";
				if(this.curTask.value){
					this.filterBody = this.filterBody +'&check_task_id='+this.curTask.value
				}
				if(this.curLab.value){
					this.filterBody = this.filterBody +'&check_scope='+this.curLab.value
				}
				if(this.curStatus.value){
					this.filterBody = this.filterBody +'&status='+this.curStatus.value
				}
				if(this.startTime){
					this.filterBody = this.filterBody+'&check_start_date='+this.startTime
				}
				if(this.endTime){
					this.filterBody = this.filterBody+'&check_end_date='+this.endTime
				}
				this.showDrawer = false;
				this.loadData();
			}
		}
	}
</script>

<style>
	/*说明*/
	.notice{
		font-size: 30upx;
		padding: 40upx 0;
		border-bottom: 1upx solid #eee;
		text-align: center;
	}
	/*展示上拉加载的数据列表*/
	.news-li{
		widht:auto;
		font-size: 32upx;
		padding-top: 20upx;
		padding-left: 20upx;
		padding-right: 20upx;
		padding-bottom: 0upx;
		background-color: #F5F5F5;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
	.icon {
			width:20upx;
			height:20upx;
			margin-right: 20upx;
		}
		.top-container {
			display: flex;
			flex-direction: column;
			width: auto;
			padding-left: 50upx;
			margin-top: -35upx;
			padding-bottom: 30upx;
		}
		.status {
			width:170upx;
			height:35upx;
			background-color: rgba(242,115,115,0.10);
			border-radius: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 35upx;
		}
		.status-text{
			color: #F27373;
			font-size: 11px;
		}
		.hover{
			opacity: 0.7;
		}
		.title {
			font-size: 16px;
			color: #333333;
		}
		.des {
			font-weight:200;
			font-size:14px;
			color:#676767
		}
		.detail {
			font-size:14px;
		}
		.type {
			font-size:14px;
		}
		.statuspic{
			width:80upx;
			height:80upx;
		}
		.titletext{
			font-size:28upx;
			color: #666666;
			margin-right: 78upx;
		}
		.titletextlong{
			font-size:28upx;
			color: #666666;
			margin-right: 50upx;
		}
		.contenttext{
			font-size:28upx;
			color: #333333;
		},
		.selcontent {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20px;
		}
		.selcontent-time {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.item {
			border-bottom: 1upx solid #D0D0D0;
			width: auto;
			margin-top: 20upx;
			margin-left: 20upx;
			margin-right: 40upx;
			padding-bottom: 10upx;
		}
		.datacontent {
			width: 100%;
			font-size: 16px;
			color: #4F4F4F;
		}
		.hover {
			opacity: 0.7;
		}
		.tip {
			width: 30upx;
			height:30upx
		}
		.submit-button {
			display: flex;
			width:500upx;
			height:60upx;
			align-items: center;
			justify-content: center;
			background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);
			border-radius: 15upx;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 40upx;
		}
		.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;
		}
		.d-container {
			width: 600upx;
		}
		.datetime{
			width: auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top:20px;
		}
		.detailtext{
			padding-right: 20px;
		}
</style>
