<template>
	<mescroll-body class="containter" 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)">
			<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">{{JSON.parse(news.manager).name}}</text></view>
				<view class="detailtext"><text class="titletext">创建人</text><text class="contenttext">{{JSON.parse(news.creator).name}}</text></view>
				<view class="detailtext"><text class="titletextlong">创建时间</text><text class="contenttext">{{GLOBALUTIL.moment(news.created).format("YYYY-MM-DD HH:mm:ss")}}</text></view>
				<view class="detailtext"><text class="titletextlong">检查任务</text><text class="contenttext">{{news.check_task_code_name}}</text></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: 30rpx;">状态</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: 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="showLabPicker">
				<text class="title" style="margin-top: 30rpx;">实验室</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: 15rpx;" >开始日期</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: 15rpx;">结束日期</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="selector" 
			@confirm="onConfirm" 
			ref="picker" 
			themeColor="#f00"
			:selectList="itemList"
		></Picker>
	</mescroll-body>
</template>

<script>
	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";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				dataList: [],
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
				},
				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:"linkage",
				curTask:{},
				curStatus:{},
				curLab:{},
				startTime:"",
				endTime:"",
			}
		},
		
		components: {
			Drawer,
			Picker
		},
		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.imgsrc = this.handleStatus(opt)
						})
						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 = "linkage";
				this.itemList = this.statusData;
				this.$refs.picker.show()
			},
			showTaskPicker(){
				this.curType = "task"
				this.pickerMod = "linkage";
				this.itemList = this.taskData;
				this.$refs.picker.show()
			},
			showLabPicker(){
				this.curType = "lab"
				this.pickerMod = "linkage";
				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;
						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{
		font-size: 32upx;
		border-bottom: 1upx solid #eee;
		width: auto;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top:20rpx;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
	.icon {
		width:20rpx;
		height:20rpx;
		margin-right: 20rpx;
	}
	.top-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding-left: 50rpx;
		margin-top: -35rpx;
		margin-bottom: 20rpx;
	}
	.status {
		width:170rpx;
		height:35rpx;
		background-color: rgba(242,115,115,0.10);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 35rpx;
	}
	.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;
	}
	.containter{
		display: flex;
		width: 100%;
		background-color: #F5F5F5;
		padding: 20rpx;
	}
	.statuspic{
		width:80rpx;
		height:80rpx;
	}
	.titletext{
		font-size:28rpx;
		color: #666666;
		margin-right: 78rpx;
	}
	.titletextlong{
		font-size:28rpx;
		color: #666666;
		margin-right: 50rpx;
	}
	.contenttext{
		font-size:28rpx;
		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: 1rpx solid #D0D0D0;
		width: auto;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 40rpx;
		padding-bottom: 10rpx;
	}
	.datacontent {
		width: 100%;
		font-size: 16px;
		color: #4F4F4F;
	}
	.hover {
		opacity: 0.7;
	}
	.tip {
		width: 30rpx;
		height:30rpx
	}
	.submit-button {
		display: flex;
		width:500rpx;
		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;
	}
	.d-container {
		width: 600upx;
	}
	.datetime{
		width: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top:20px;
	}
</style>
