{extend name="common/base"/}
{block name="style"}
  <link rel="stylesheet" href="{__JS__}/module/dtree/dtree.css">
  <link rel="stylesheet" href="{__JS__}/module/dtree/font/dtreefont.css">
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form body-content">
	<h3 style="padding:5px 0;">发送消息</h3>
	{if condition="$id eq 0"}
	<table class="layui-table">
		<tr>
			<td class="layui-td-gray2">接收人类型</td>
			<td>
				<input type="radio" name="type"  lay-filter="type" value="0" title="同事" checked>
				<input type="radio" name="type"  lay-filter="type" value="1" title="部门">
				<input type="radio" name="type"  lay-filter="type" value="2" title="岗位">
				<input type="radio" name="type"  lay-filter="type" value="3" title="全部">
			</td>
		</tr>
		<tr id ="person">
			<td class="layui-td-gray2">收件人<span style="color: red">*</span></td>
			<td>
				<input type="text" name="person_name" value="" lay-verify="required" lay-reqText="请选择收件人" placeholder="请选择收件人" readonly class="layui-input">
				<input type="hidden" name="uids" value="">
				<input type="hidden" name="dids" value="">
				<input type="hidden" name="pids" value="">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray2">主题<span style="color: red">*</span></td>
			<td>
				<input type="text" name="name" value="" lay-verify="required" lay-reqText="请输入消息主题" placeholder="请输入消息主题" class="layui-input" lay-verify="required">
			</td>
		</tr>
		<tr><td class="layui-td-gray2">发送内容<span style="color: red">*</span></td>
			<td>
				<textarea name="content" placeholder="请输入消息内容" class="layui-textarea" style="height: 200px;" lay-verify="required" lay-reqText="请输入消息内容"></textarea>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray2" style="vertical-align:top">消息附件</td>
			<td>
				<table class="layui-hide" id="schedule-document" lay-filter="schedule-document"></table>
				<div class="layui-upload" style="max-width: 1000px;">
					<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="testList">选择文件(可多选)</button> <span style="color:#FF5722;margin-left: 10px;">最大只能上传300MB的文件，超过300MB请压缩成多个文件上传。</span>
					<div class="layui-upload-list" style="display:none;">
						<table class="layui-table">
							<thead>
							  <tr>
							  <th width="55%">文件名</th>
							  <th width="15%" style="text-align:center">文件大小</th>
							  <th width="20%" style="text-align:center">状态</th>
							  <th width="10%" style="text-align:center">操作</th>
							</tr></thead>
							<tbody id="demoList"></tbody>
						</table>
						<div style="margin-top:10px;">
							<input type="hidden" class="layui-input" id="uploadId" name="file_ids" >
							<button type="button" class="layui-btn layui-btn-sm" id="testListAction">开始上传</button>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</table>
	{else/}
	<table class="layui-table">
		<tr>
			<td class="layui-td-gray2">接收人类型</td>
			<td>
				<input type="radio" name="type"  lay-filter="type" value="0" title="同事" {eq name="$detail.type" value="0"}checked{/eq}>
				<input type="radio" name="type"  lay-filter="type" value="1" title="部门" {eq name="$detail.type" value="1"}checked{/eq}>
				<input type="radio" name="type"  lay-filter="type" value="2" title="岗位" {eq name="$detail.type" value="2"}checked{/eq}>
				<input type="radio" name="type"  lay-filter="type" value="3" title="全部" {eq name="$detail.type" value="3"}checked{/eq}>
			</td>
		</tr>
		<tr id ="person" {eq name="$detail.type" value="3"}style="display:none;"{/eq}>
			<td class="layui-td-gray2">收件人<span style="color: red">*</span></td>
			<td>
				{eq name="$detail.type" value="3"}
				<input type="text" name="person_name" value="0" lay-verify="required" lay-reqText="请选择收件人" placeholder="请选择收件人" readonly class="layui-input">
				{else/}
				<input type="text" name="person_name" value="{$detail.person_name}" lay-verify="required" lay-reqText="请选择收件人" placeholder="请选择收件人" readonly class="layui-input">
				{/eq}
				<input type="hidden" name="uids" value="{$detail.type_user}">
				<input type="hidden" name="dids" value="{$detail.type_user}">
				<input type="hidden" name="pids" value="{$detail.type_user}">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray2">主题<span style="color: red">*</span></td>
			<td>
				<input type="text" name="name" value="{$detail.name}" lay-verify="required" lay-reqText="请输入消息主题" placeholder="请输入消息主题" class="layui-input" lay-verify="required">
			</td>
		</tr>
		<tr><td class="layui-td-gray2">发送内容<span style="color: red">*</span></td>
			<td>
				<textarea name="content" placeholder="请输入消息内容" class="layui-textarea" style="height: 200px;" lay-verify="required" lay-reqText="请输入消息内容">{$detail.content}</textarea>
				{if condition="($detail.fid > 0)"}		
				<table class="layui-table">
				<tr>
					<td class="layui-td-gray2">引用消息内容</td>
					<td>{$detail.from_content}</td>
				</tr>
				{notempty name="$detail.from_file_array"}
				<tr>
					<td class="layui-td-gray2" style="vertical-align:top">引用消息附件</td>
					<td>
						<table class="layui-table" style="max-width: 680px;">
							<thead>
								<th width="70%">文件名</th>
								<th width="20%" style="text-align:center">文件大小</th>
								<th width="10%" style="text-align:center">操作</th>
							</thead>
							<tbody>							
								{volist name="$detail.from_file_array" id="vo"}
									<tr>
										<td>{$vo.name}</td>
										<td style="text-align: center;">{$vo.filesize/1048576|round=2}MB</td>
										<td style="text-align: center;"><a class="layui-btn layui-btn-xs layui-btn-normal" href="{$vo.filepath}" target="_blank">下载</a></td>
									</tr>
								{/volist}
							</tbody>
						</table>
					</td>
				</tr>
				{/notempty}
				</table>
				{/if}
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray2" style="vertical-align:top">消息附件</td>
			<td>
				<table class="layui-hide" id="schedule-document" lay-filter="schedule-document"></table>
				<div class="layui-upload" style="max-width: 800px;">
					<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="testList">选择文件(可多选)</button> <span style="color:#FF5722;margin-left: 10px;">最大只能上传300MB的文件，超过300MB请压缩成多个文件上传。</span>
					<div class="layui-upload-list" {empty name="$file_array"}style="display:none;"{/empty}>
						<table class="layui-table">
							<thead>
								<tr>
								<th width="55%">文件名</th>
								<th width="15%" style="text-align:center">文件大小</th>
								<th width="20%" style="text-align:center">状态</th>
								<th width="10%" style="text-align:center">操作</th>
								</tr>
							</thead>
							<tbody id="demoList">
							{notempty name="$file_array"}
								{volist name="file_array" id="vo"}
									<tr>
										<td>{$vo.name}</td>
									  	<td style="text-align: center;">{$vo.filesize/1048576|round=2}MB</td>
										<td style="text-align: center;">已上传</td>
										<td style="text-align: center;">
											<a class="layui-btn layui-btn-xs layui-btn-danger demo-del">删除</a>
										</td>
									</tr>
								{/volist}
							{/notempty}
							</tbody>
						</table>
						<div style="margin-top:10px;">
							<input type="hidden" class="layui-input" id="uploadId" name="file_ids" value="{$detail.file_ids}">
							<button type="button" class="layui-btn layui-btn-sm" id="testListAction">开始上传</button>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</table>
	{/if}
	<div class="layui-form-item" style="padding-top:10px;">
		<input type="hidden" value="{$id}" name="id">
		<input type="hidden" value="{$fid}" name="fid">
		<button class="layui-btn" lay-submit="" lay-filter="draftform">存为草稿</button>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即发送</button>
	</div>
</form>
{/block}
<!-- /主体 -->

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

		//监听保存到草稿并发送
		form.on('submit(webform)', function(data){
			$.ajax({
				url:"{:url('home/mail/save')}",
				type:'post',
				data:data.field,
				success:function(e){
					if(e.code==0){
						layer.msg('消息保存成功，正在发送中...');
						$.ajax({
							url:"{:url('home/mail/send')}",
							type:'post',
							data:{'id':e.data},
							success:function(e){
								if(e.code==0){
									layer.confirm('发送成功,返回列表页吗?', {icon: 3, title:'提示'}, function(index){
										parent.location.reload();
									})
								}else{
									layer.msg(e.msg);
								}
							}
						})
					}else{
					  layer.msg(e.msg);
					}
				}
			})
			return false;
		});
		  
		//监听保存到草稿
		form.on('submit(draftform)', function(data){
			$.ajax({
				url:"{:url('home/mail/save')}",
				type:'post',
				data:data.field,
				success:function(e){
					if(e.code==0){
						layer.confirm('保存草稿成功,返回列表页吗?', {icon: 3, title:'提示'}, function(index){
							parent.location.reload();
						});
					}else{
						layer.msg(e.msg);
					}
				}
			})
			return false;
		});


	 	var uploadId =[]; 

		//多文件列表示例
		var demoListView = $('#demoList')
			,uploadListIns = upload.render({
			elem: '#testList'
			,url: "{:url('home/api/upload')}"
			,accept: 'file'
			,multiple: true
			,auto: false
			,bindAction: '#testListAction'
			,data: {use:'file', action: 'project'} 
			,choose: function(obj){   
				var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
				//读取本地文件
				obj.preview(function(index, file, result){
					var tr = $(['<tr id="upload-'+ index +'">'
					  ,'<td>'+ file.name +'</td>'
					  ,'<td align="center">'+ (file.size/(1024*1024)).toFixed(2) +'MB</td>'
					  ,'<td align="center">等待上传</td>'
					  ,'<td align="center">'
					  ,'<span class="layui-btn layui-btn-xs demo-reload layui-hide" data-index="'+index+'">重传</span>'
					  ,'<span class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</span>'
					  ,'</td>'
					,'</tr>'].join(''));
				
					//单个重传
					tr.find('.demo-reload').on('click', function(){
						var idx=$(this).data('index');
						obj.upload(idx, file);
					});
				
					//删除
					tr.find('.demo-delete').on('click', function(){
						delete files[index]; //删除对应的文件
						tr.remove();
						uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
					});
					$('.layui-upload-list').show();
					demoListView.append(tr);

					//上传成功后单个删除
					tr.on('click','.demo-del', function(){
						var index=$(this).parents('tr').index();
						console.log(index);
						uploadId.splice(index, 1);
						$('#uploadId').val(uploadId.join(','));
						tr.remove();
						if(uploadId.length==0){
							$('.layui-upload-list').hide();
						}
					});
				});
			}
			,done: function(res, index, upload){
				if(res.code == 0){ //上传成功
					var tr = demoListView.find('tr#upload-'+ index)
					,tds = tr.children();
					tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
					uploadId.push(res.data.id);
					tds.eq(3).html('<a class="layui-btn layui-btn-xs layui-btn-danger demo-del" data-index="'+(uploadId.length-1)+'">删除</a>');
					$('#uploadId').val(uploadId.join(','));

					return delete this.files[index]; //删除文件队列已经上传成功的文件
				}
				this.error(index, upload);
			},
			progress:function(percent,file,button,index){
				var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();
				tds.eq(2).html('<span style="color: #5FB878;">上传中...</span>');
				console.log(arguments);
			}
			,error: function(index, upload){
				var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();
				tds.eq(2).html('<span style="color: #FF5722;">上传失败,请检查网络,或者文件是否过大?</span>');
				tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
			}
		});

		//选择收件人类型
		form.on('radio(type)', function (data) {
			$('[name="person_name"]').val('');
			$('[name="dids"]').val('');
			$('[name="uids"]').val('');
			$('[name="auids"]').val('');
			if(data.value==3){
				$('#person').val('0').hide();
			}
			else{
				$('#person').val('').show();
			}
		});	

		//选择对应人
		$('[name="person_name"]').on('click',function(){
			type = $("input[name='type']:checked").val();
			if(type == 0){
			   addEmployee();
			}else if(type == 1){
			   selectDepartment();
			}else if(type == 2){
			  selectAuditor();
			}
		});

		//添加人员		
		function addEmployee(){
			var ids=$('[name="uids"]').val(),names=$('[name="person_name"]').val(),idsArray=[],namesArray=[];
			if(ids!=''){
				idsArray=ids.split(',');
				namesArray=names.split(',');
			}
			employeepicker.init({
				department_url:"{:url('/home/api/get_department_tree')}",
				employee_url:"{:url('/home/api/get_employee')}",
				ids:idsArray,
				names:namesArray,
				callback:function(ids,names){
					$('[name="uids"]').val(ids.join(',')),
					$('[name="person_name"]').val(names.join(','));
				}
			});
		}

		//选择部门		
		function selectDepartment(){				
			var tpl='<div style="width:382px; height:338px;overflow-y: auto;">\
						<div id="checkemployeetree" style="padding:10px 0;"></div>\
					</div>';
			layer.open({
				type:1,
				title:'选择部门',
				area:['400px','450px'],
				content:tpl,
				success:function(){
					$.ajax({
						url:"{:url('/home/api/get_department_tree')}",
						type:'post',
						success:function(res){					
							dtree.render({
								elem: "#checkemployeetree",
								data: res.trees,
								icon: "2",  //修改二级图标样式
								checkbarType: "no-all", // 默认就是all，其他的值为： no-all  p-casc   self  only
								checkbar: true  //开启复选框
							});
						}
					});
				},
				btn: ['确定'],
				btnAlign:'c',
				yes: function(){
					var ids=[],names=[];
					var check=dtree.getCheckbarNodesParam("checkemployeetree");
					if(check.length==0){
						layer.msg('请选择部门');
						return;
					}
					for(var m=0; m<check.length; m++){
						ids.push(check[m].nodeId);
						names.push(check[m].context);
					}
					$('[name="person_name"]').val(names.join(','));
					$('[name="dids"]').val(ids.join(','));
					layer.closeAll();
				}
			})	
		}

		//选择角色	
		function selectAuditor(){
			layer.open({
				title:'选择岗位',
				type:1,
				area:['360px','480px'],
				content:'<div style="padding:5px 12px"><div id="vaeservice"></div></div>',
				success:function(){
					tableid=table.render({
						elem: '#vaeservice'
						,url:"{:url('/home/api/get_position')}"
						,page: false //开启分页
						,cols: [[
						   {type:'checkbox',title: '选择'}
						  ,{field:'id', width:80, title: '编号', align:'center'}
						  ,{field:'name',title: '岗位名称'}
						]]
					  });			
				},
				btn: ['确定'],
				btnAlign:'c',
				yes: function(){
					var checkStatus = table.checkStatus(tableid.config.id);
					var data = checkStatus.data,val = [],title=[];
					if(data.length>0){
						for ( var i = 0; i <data.length; i++){
							val.push(data[i].id);
							title.push(data[i].name);
						}
						$('[name="person_name"]').val(title.join(','));
						$('[name="pids"]').val(val.join(','));
						layer.closeAll();
					}else{
						layer.msg('请选择角色');
						return;
					}
				}
			})		
		}
	}
		
	</script>
	{include file="common/layui" base='base' extend="['dtree','employeepicker']" callback="init" /}
{/block}
<!-- /脚本 -->