{extend name="../../base/view/common/base" /}
{block name="style"}
<link rel="stylesheet" href="{__LAYUI__}/plugin/dtree/dtree.css">
<link rel="stylesheet" href="{__LAYUI__}/plugin/dtree/font/dtreefont.css">
<style>
.layui-unselect dl {max-height:188px;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="body-table">
	<form class="layui-form layui-form-bar">
		<div id="barDate" class="layui-input-inline">
			<div class="layui-input-inline" style="width:110px;">
				<input type="text" class="layui-input" id="start_time" placeholder="选择时间区间" readonly name="start_time">
			</div>
			~
			<div class="layui-input-inline" style="width:110px;">
				<input type="text" class="layui-input" id="end_time" placeholder="选择时间区间" readonly name="end_time">
			</div>
		</div>
		<div class="layui-input-inline" style="width:110px;">
			<input type="text" name="username"  placeholder="请选择员工" class="layui-input" readonly data-event="select"/>
			<input type="text" name="uid" value="" style="display:none" />	
		</div>
		<div class="layui-input-inline" style="width:220px;">
			<input type="text" name="keywords"  placeholder="输入工作内容" class="layui-input"/>
		</div>	
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">提交搜索</button><button type="reset" class="layui-btn layui-btn-danger" lay-filter="clear">清空搜索条件</button>
	</form> 
	<div>
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
  	<button class="layui-btn layui-btn-normal layui-btn-sm addLoan" type="button">+ 新增日程安排</button>
  </div>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
	<script>
		function init(layui){
			var table = layui.table
			,form = layui.form
			,dropdown = layui.dropdown
			,dtree = layui.dtree
			,employeepicker = layui.employeepicker
			,laydate = layui.laydate;
	  

		//日期范围
		laydate.render({
			elem: '#barDate',
			range: ['#start_time', '#end_time']
		});

		$('[lay-filter="clear"]').on('click',function(){
			setTimeout(function(){
				$('[lay-filter="webform"]').click();
			},10)			
		})
		
		// 选择员工
		$('.body-table').on('click','[data-event="select"]',function(){
			var that = $(this);
			var names = that.val(), ids = $('[name="uid"]').val();
			employeepicker.init({
				ids: ids,
				names: names,
				type: 0,
				department_url: "/api/index/get_department_tree",
				employee_url: "/api/index/get_employee",
				callback: function (ids, names, dids, departments) {
					$('[name="uid"]').val(ids);
					that.val(names);
					$('[lay-filter="webform"]').click();
				}
			})
		});

		//监听搜索提交
		form.on('submit(webform)', function(data){
			let f=data.field;
			tableIns.reload({where:{keywords:f.keywords,start_time:f.start_time,end_time:f.end_time,uid:f.uid},page:{curr:1}});
			return false;
		});

		var tableIns = table.render({
			elem: '#test'
			,toolbar: '#toolbarDemo'
			,title:'日程安排列表'
			,url: "/oa/plan/index"
			,page: true //开启分页
			,limit: 20
			,cellMinWidth: 80
			,cols: [[ //表头
				{field: 'id', title: '序号',fixed: 'left', width:80, align:'center'}
				,{field: 'type', title: '优先级', align:'center',width:80,templet:function(d){
					var html='';
					if(d.type==1){
						html = '<span style="color:#FF5722">紧急</span>';
					}
					else if(d.type==2){
						html = '<span style="color:#FFB800">重要</span>';
					}
					else if(d.type==3){
						html = '<span style="color:#1E9FFF">次要</span>';
					}
					else if(d.type==4){
						html = '<span style="color:#009688">不重要</span>';
					}
					else if(d.type==5){
						html = '<span style="color:#393D49">无优先级</span>';
					}
					return html;
				}}
				,{field: 'start_time', title: '日程时间范围', align:'center',width:260,templet:function(d){
					var html=d.start_time+'至'+d.end_time;
					return html;
				}}
				,{field: 'title', title: '日程安排内容'}
				,{field: 'remind_time', title: '提醒时间', align:'center',width:136}
				,{field: 'right', title: '操作',fixed:'right', width:100, align:'center',templet:function(d){
					var html='<div class="layui-btn-group">';
					html+='<button class="layui-btn layui-btn-xs layui-btn-normal"  lay-event="view">查看</button>';
					if(d.admin_id==login_user){
						html+='<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>';
					}
					html+='</div>';
					return html;
				}}
			]]
		});

		//操作
		table.on('tool(test)', function(obj){
			var data = obj.data;
			if(obj.event === 'edit'){
				$.ajax({
					url: "/oa/plan/detail",
					data:{
						id:data.id
					},
					success:function(e){
						if(e.code==0){			
							var detail={};
							detail['id']=e.data.id;
							detail['title']=e.data.title;
							detail['start_time_a']=e.data.start_time_a;
							detail['end_time_a']=e.data.end_time_a;		
							detail['start_time_b']=e.data.start_time_b;
							detail['end_time_b']=e.data.end_time_b;
							detail['remark']=e.data.remark;
							detail['type']=e.data.type;
							detail['remind_type']=e.data.remind_type;
							addEvent(detail);
						}
					}
				})				
			}
			else if(obj.event === 'view'){
				$.ajax({
					url: "/oa/plan/detail",
					data:{
						id:data.id
					},
					success:function(e){
						if(e.code==0){								
							viewEvent(e.data);
						}
					}
				})				
			}
		});
		
		//查看日程记录
		function viewEvent(detail){
			var work_type='<span style="color:#393D49">无优先级</span>';
			if(detail.type==1){
				work_type = '<span style="color:#FF5722">紧急</span>';
			}
			else if(detail.type==2){
				work_type = '<span style="color:#FFB800">重要</span>';
			}
			else if(detail.type==3){
				work_type = '<span style="color:#1E9FFF">次要</span>';
			}
			else if(detail.type==4){
				work_type = '<span style="color:#009688">不重要</span>';
			}		
			var content='<div style="width:770px">\
							<table class="layui-table" style="margin:12px 15px 0;">\
								<tr>\
									<td class="layui-td-gray2">日程时间范围</td>\
									<td>'+detail.start_time+' 至 '+detail.end_time+'</td>\
									<td class="layui-td-gray">提醒时间</td>\
									<td>'+detail.remind_time+'</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程安排内容</td>\
									<td>'+detail.title+'</td>\
									<td class="layui-td-gray">优先级</td>\
									<td>'+work_type+'</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程内容描述</td>\
									<td colspan="3">'+detail.remark+'</td>\
								</tr>\
							</table>\
						</div>';
			layer.open({
				type:1,
				title:'日程安排',
				area:['800px','336px'],
				content:content,
				success:function(){
					
				},
				btn: ['关闭'],
				btnAlign: 'c',
				yes: function(idx){
					layer.close(idx);			
				}
			})	
		}
		  
		$('.body-table').on('click','.addLoan',function(){
			var detail={};
			detail['id']=0;
			detail['title']='';
			detail['start_time_a']='';
			detail['end_time_a']='';		
			detail['start_time_b']='09:00';
			detail['end_time_b']='18:00';		
			detail['remark']='';
			detail['type']=0;
			detail['remind_type']=0;
			addEvent(detail);		
		});


		function addEvent(detail){			
			var type='<span style="color:#aaa">请选择</span>';
			if(detail.type==1){
				type = '<span class="layui-badge-dot"></span> 紧急';
			}
			else if(detail.type==2){
				type = '<span class="layui-badge-dot layui-bg-orange"></span> 重要';
			}
			else if(detail.type==3){
				type = '<span class="layui-badge-dot layui-bg-blue"></span> 次要';
			}
			else if(detail.type==4){
				type = '<span class="layui-badge-dot layui-bg-green"></span> 不重要';
			}
			else if(detail.type==5){
				type = '<span class="layui-badge-dot layui-bg-black"></span> 无优先级';
			}
			
			var remind_type='不提醒';
			if(detail.remind_type==1){
				remind_type = '提前5分钟';
			}
			else if(detail.remind_type==2){
				remind_type = '提前15分钟';
			}
			else if(detail.remind_type==3){
				remind_type = '提前30分钟';
			}
			else if(detail.remind_type==4){
				remind_type = '提前1小时';
			}
			else if(detail.remind_type==5){
				remind_type = '提前2小时';
			}else if(detail.remind_type==6){
				remind_type = '提前1天';
			}
			
			var content='<form class="layui-form" style="width:828px">\
							<table class="layui-table" style="margin:15px 15px 0;">\
								<tr>\
									<td class="layui-td-gray2">日程时间范围 <span style="color: red">*</span></td>\
									<td>\
										<input id="start_time_a" name="start_time_a" style="width:120px; display:inline-block;" autocomplete="off" class="layui-input" value="'+detail.start_time_a+'" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间"><div style="display: inline-block; margin-left:3px; width: 86px;"><select lay-filter="start_time_b" id="start_time_b"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:120px; display:inline-block;" autocomplete="off" class="layui-input" value="'+detail.end_time_a+'" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间"><div style="display: inline-block; margin-left:3px; width: 86px;"><select lay-filter="end_time_b" id="end_time_b"></select></div>\
									</td>\
									<td class="layui-td-gray">日程优先级 <span style="color: red">*</span></td>\
									<td>\
										<div class="layui-input" id="type" style="width:120px; line-height:35px;">'+type+'</div>\
									</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程内容 <span style="color: red">*</span></td>\
									<td><input name="title" class="layui-input" value="'+detail.title+'" lay-verify="required" placeholder="请完成日程内容" lay-reqText="请完成日程内容"></td>\
									<td class="layui-td-gray">提醒 <span style="color: red">*</span></td>\
									<td>\
										<div class="layui-input" id="remind_type" style="width:120px; line-height:35px;">'+remind_type+'</div>\
									</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程详细描述</td>\
									<td colspan="3">\
										<textarea name="remark" form-input="remark" class="layui-textarea" style="min-height:120px;">'+detail.remark+'</textarea>\
									</td>\
								</tr>\
							</table>\
						</form>';
			layer.open({
				type:1,
				title:'日程安排',
				area:['860px','390px'],
				content:content,
				success:function(){
					//日期时间范围
					laydate.render({
						elem: '#start_time_a',
						type: 'date',
						min: 0,
						format: 'yyyy-MM-dd',
						showBottom: false,
						done:function(a,b,c){
							detail.start_time_a=a;
						}
					});

					//日期时间范围
					laydate.render({
						elem: '#end_time_a',
						type: 'date',
						min: 0,
						format: 'yyyy-MM-dd',
						showBottom: false,
						done:function(a,b,c){
							detail.end_time_a=a;
						}
					});
					$('#start_time_a,#end_time_a').empty();
					
					var hourArray=[];
					for(var h=0;h<24;h++){
						var t=h<10?'0'+h:h
						var t_1=t+':00',t_2=t+':15',t_3=t+':30',t_4=t+':45';
						hourArray.push(t_1,t_2,t_3,t_4);
					}					
					var html_1='', html_2='',def_h1=detail.start_time_b,def_h2=detail.end_time_b;
					for(var s=0;s<hourArray.length;s++){
						var check_1='',check_2='';
						if(hourArray[s]==def_h1){
							check_1='selected';
						}
						if(hourArray[s]==def_h2){
							check_2='selected';
						}
						html_1 += '<option value="'+hourArray[s]+'" '+check_1+'>'+hourArray[s]+'</option>';
						html_2 += '<option value="'+hourArray[s]+'" '+check_2+'>'+hourArray[s]+'</option>';
					}
					
					$('#start_time_b').append(html_1);
					$('#end_time_b').append(html_2);
					form.render();
					
					$('[name="title"]').on('input',function(){
						var _val=$(this).val();
						detail.title=_val;
					});	
					form.on('select(start_time_b)', function(data){
						detail.start_time_b=data.value;
					});
					form.on('select(end_time_b)', function(data){
						detail.end_time_b=data.value;
					});
					$('[form-input="remark"]').on('input',function(){
						var _val=$(this).val();
						detail.remark=_val;
					});

					dropdown.render({
						elem: '#type'
						,data: [{
						  title: '<span class="layui-badge-dot"></span> 紧急',
						  id: 1
						},{
						  title: '<span class="layui-badge-dot layui-bg-orange"></span> 重要',

						  id: 2
						},{
						  title: '<span class="layui-badge-dot layui-bg-blue"></span> 次要',
						  id: 3
						},{
						  title: '<span class="layui-badge-dot layui-bg-green"></span> 不重要',
						  id: 4
						},{
						  title: '<span class="layui-badge-dot layui-bg-black"></span> 无优先级',
						  id: 5
						}]
						,click: function(obj){
							this.elem.html(obj.title);
							detail.type = obj.id;
						}
						,style: 'width: 120px;'
					  });
					  
					  dropdown.render({
						elem: '#remind_type'
						,data: [{
						  title: '不提醒',
						  id: 0
						},{
						  title: '提前5分钟',
						  id: 1
						},{
						  title: '提前15分钟',
						  id: 2
						},{
						  title: '提前30分钟',
						  id: 3
						},{
						  title: '提前1小时',
						  id: 4
						},{
						  title: '提前2小时',
						  id: 5
						},{
						  title: '提前1天',
						  id:6
						}]
						,click: function(obj){
						  this.elem.html(obj.title);
						  detail.remind_type = obj.id;
						}
						,style: 'width: 120px;'
					  });					
				},
				btn: ['确定提交'],
				btnAlign:'c',
				yes: function(idx){
					if(detail.start_time_a=='' || detail.end_time_a==''){
						layer.msg('请完善日程时间范围');
						return;
					}
					if(detail.type==0){
						layer.msg('请选择日程优先级');
						return;
					}
					if(detail.title==''){
						layer.msg('请填写日程内容');
						return;
					}
					console.log(detail);
					$.ajax({
						url: "/oa/plan/add",
						type:'post',
						data:detail,
						success:function(e){
							layer.msg(e.msg);
							if(e.code==0){								
								layer.close(idx);								
								tableIns.reload();
							}
						}
					})			
				}
			})	
		}
		  
	}
		
	</script>
	{include file="../../base/view/common/layui" base='base' extend="['dtree','employeepicker']" use="[]" callback="init" /}
{/block}
<!-- /脚本 -->