{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
	{if condition="$type eq 1"}
	<h3 class="pb-3">回复消息</h3>
	{else/}
	<h3 class="pb-3">转发消息</h3>
	{/if}
	<table class="layui-table">
		<tr>
			<td class="layui-td-gray-2">接收人类型</td>
			<td>
				<input type="radio" name="type"  lay-filter="type" value="1" title="同事" checked>
				<input type="radio" name="type"  lay-filter="type" value="2" title="部门">
				<input type="radio" name="type"  lay-filter="type" value="3" title="岗位">
				<input type="radio" name="type"  lay-filter="type" value="4" title="全部">
			</td>
		</tr>
		{if condition="$type eq 1"}
		<tr id ="person" {eq name="$detail.type" value="3"}style="display:none;"{/eq}>
			<td class="layui-td-gray">收件人<font>*</font></td>
			<td>
				<input type="text" name="person_name" value="{$detail.person_name}" lay-verify="required" lay-reqText="请选择收件人" placeholder="请选择收件人" readonly class="layui-input">
				<input type="hidden" name="uids" value="{$detail.from_uid}">
				<input type="hidden" name="dids" value="{$detail.from_uid}">
				<input type="hidden" name="pids" value="{$detail.from_uid}">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">主题<font>*</font></td>
			<td>
				<input type="text" name="title" value="回复：{$detail.title}" lay-verify="required" lay-reqText="请输入消息主题" placeholder="请输入消息主题" class="layui-input" lay-verify="required">
			</td>
		</tr>
		{else/}
		<tr id ="person" {eq name="$detail.type" value="3"}style="display:none;"{/eq}>
			<td class="layui-td-gray">收件人<font>*</font></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-gray">主题<font>*</font></td>
			<td>
				<input type="text" name="title" value="转发：{$detail.title}" lay-verify="required" lay-reqText="请输入消息主题" placeholder="请输入消息主题" class="layui-input" lay-verify="required">
			</td>
		</tr>
		{/if}
		<tr>
			<td class="layui-td-gray" style="vertical-align:top;">内容<font>*</font></td>
			<td>
				<textarea name="content" placeholder="请输入消息内容" class="layui-textarea" style="height: 200px;" lay-verify="required" lay-reqText="请输入消息内容"></textarea>
				
				<table class="layui-table" style="margin-top:10px;">
				<tr>
					<td class="layui-td-gray-2">原消息内容</td>
					<td>{$detail.content}
					</td>
				</tr>
				{notempty name="$file_array"}
				<tr>
					<td class="layui-td-gray-2" style="vertical-align:top">原消息附件</td>
					<td>
						<table class="layui-table">
							<thead>
								<tr>
								<th width="80%">文件名</th>
								<th width="20%" style="text-align:center">文件大小</th>
								</tr>
							</thead>
							<tbody>							
								{volist name="file_array" id="vo"}
									<tr>
										<td>{$vo.name}</td>
										<td style="text-align: center;">{$vo.filesize/1048576|round=2}MB</td>
									</tr>
								{/volist}
							</tbody>
						</table>
					</td>
				</tr>
				{/notempty}
				</table>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray" style="vertical-align:top">消息附件</td>
			<td>
				<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;">最大只能上传{:get_system_info('upload_max_filesize')}的文件，超过{:get_system_info('upload_max_filesize')}请压缩成多个文件上传。</span>
					<div class="layui-upload-list" style="display:none;">
						<table class="layui-table">
							<thead>
							  <tr>
								<th width="60%">文件名</th>
								<th width="20%" style="text-align:center">文件大小</th>
								<th width="20%" style="text-align:center">操作</th>
								</tr>
							</thead>
							<tbody id="demoList"></tbody>
						</table>
					</div>
				</div>
			</td>
		</tr>
	</table>
	<div class="py-3">
		<input type="hidden" value="0" 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>
	const moduleInit = ['tool','employeepicker','dtree'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,table=layui.table,laydate = layui.laydate,employeepicker = layui.employeepicker,dtree = layui.dtree,upload = layui.upload;
		//监听保存到草稿并发送
		form.on('submit(webform)', function(data){
			var file_ids = [];
			var item_tr = $('#demoList').find('tr');
			item_tr.each(function(index,item) {
				var item_id = $(item).data('id');
				if (item_id && item_id != '') {
					file_ids.push(item_id);
				}
			});
			console.log(file_ids.join(','));
			data.field.file_ids = file_ids.join(',');
			$.ajax({
				url: "/message/index/save",
				type:'post',
				data:data.field,
				success:function(e){
					if(e.code==0){
						layer.msg('消息保存成功，正在发送中...');
						$.ajax({
							url: "/message/index/send",
							type:'post',
							data:{'id':e.data},
							success: function (e) {
								layer.msg(e.msg);
								if (e.code == 0) {
									parent.layui.tool.close(1000);
								}
							}
						})
					}else{
					  layer.msg(e.msg);
					}
				}
			})
			return false;
		});
		  
		//监听保存到草稿
		form.on('submit(draftform)', function(data){
			var file_ids = [];
			var item_tr = $('#demoList').find('tr');
			item_tr.each(function(index,item) {
				var item_id = $(item).data('id');
				if (item_id && item_id != '') {
					file_ids.push(item_id);
				}
			});
			console.log(file_ids.join(','));
			data.field.file_ids = file_ids.join(',');
			$.ajax({
				url: "/message/index/save",
				type:'post',
				data:data.field,
				success: function (e) {
					layer.msg(e.msg);
					if (e.code == 0) {
						parent.layui.tool.close(1000);
					}
				}
			})
			return false;
		});

		upload.render({ //允许上传的文件后缀
			elem: '#testList'
			,url: '/api/index/upload' //此处配置你自己的上传接口即可
			,accept: 'file' //普通文件
			,exts: 'jpeg|jpg|png|gif|doc|docx|ppt|pptx|xls|xlsx|pdf|zip|rar|7z' //只允许上传文件
			,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
				layer.msg('上传中...',{time: 3600000});
			}
			,done: function(res, index, upload){
			  layer.msg('上传成功');
			  var timestamp=new Date().getTime();
			  var tr = '<tr data-id="'+res.data.id+'" id="tr_'+timestamp+'">\
					  <td>'+ res.data.name +'</td>\
					  <td align="center">'+ (res.data.filesize/(1024*1024)).toFixed(2) +'MB</td>\
					  <td align="center">\
					  <span class="layui-btn layui-btn-xs layui-btn-danger demo-delete" data-id="'+timestamp+'">删除</span>\
					  </td>\
					</tr>';
			  $('.layui-upload-list').show();
				$('#demoList').append(tr);
			}
			,error: function(index, upload){
				layer.msg('上传失败');
			}
		});
		
		$('#demoList').on('click','.demo-delete',function(){
			let id = $(this).data('id');
			layer.confirm('确定要删除该附件吗?', {icon: 3, title:'提示'}, function(index){
				$('#tr_'+id).remove()
				layer.close(index);
			});
		})

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

		//选择对应人
		$('[name="person_name"]').on('click',function(){
			type = $("input[name='type']:checked").val();
			if(type == 1){
			   addEmployee();
			}else if(type == 2){
			   selectDepartment();
			}else if(type == 3){
			  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: "/api/index/get_department_tree",
				employee_url: "/api/index/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: "/api/index/get_department_tree",
						type:'get',
						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: "/api/index/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>
{/block}
<!-- /脚本 -->