{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
.layui-tab-title .layui-this{background-color:#fff;}
.layui-tab-card,.layui-card{box-shadow:0 0 0 0 rgb(0 0 0 / 10%); border-radius:0; border-top:none;}
.layui-card-tips {color: #969696;}
.layui-card-value {padding: 4px 0 16px;font-size: 18px;color: #1E9FFF;}

.content-content{line-height:1.6;}
.content-content p{margin-bottom:6px;}
.content-content img{max-width:100%; padding:8px; box-sizing: border-box;}

.log-item i{font-weight:800; color:#323232}
.log-content strong{margin:0 4px; color:#323232}
.layui-unselect dl {max-height:188px;}
.layui-table td.table-content img{max-width:100%; height:auto;}
</style>
{/block}
{block name="body"}
<div class="p-page">
	<h3 class="pb-3">Task details</h3>
	<table class="layui-table layui-table-form" id="task">
		<tr>
			<td class="layui-td-gray">Task subject</td>
			<td colspan="3" class="click-edit" data-types="text" data-field="title">{$detail.title|default=''}</td>
			<td class="layui-td-gray">Work type</td>
			<td class="click-edit" data-types="picker" data-field="work_id" data-type="1" data-picker="workcate">{$detail.cate_name|default='-'}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Owner</td>
			<td class="click-edit" data-types="adminpicker" data-field="director_uid" data-type="1" data-ids="{$detail.director_uid}" data-names="{$detail.director_name|default=''}">{$detail.director_name|default=''}</td>
			<td class="layui-td-gray">Collaborators</td>
			<td colspan="3" class="click-edit" data-types="adminpicker" data-field="assist_admin_ids" data-type="2" data-ids="{$detail.assist_admin_ids}" data-names="{$detail.assist_admin_names|default=''}">{$detail.assist_admin_names|default=''}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Priority</td>
			<td class="click-edit" data-types="dropdown" data-field="priority" data-array="priority" data-text="{$detail.priority}">{$detail.priority_name}</td>
			<td class="layui-td-gray">Related project</td>
			<td colspan="3" class="click-edit" data-types="picker" data-field="project_id" data-type="1" data-picker="project">{$detail.project_name|default='-'}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Completion</td>
			<td class="click-edit" data-types="num" data-field="done_ratio" data-text="{$detail.done_ratio}" data-min="0" data-max="100">{$detail.done_ratio|default='0'}%</td>
			<td class="layui-td-gray">Estimated due date</td>
			<td class="click-edit" data-types="oadate" data-field="end_time">{$detail.end_time|date='Y-m-d'}</span>{gt name="$detail.delay" value="0"}<span class="red">[Overdue {$detail.delay} days]</span>{/gt}</td>
			<td class="layui-td-gray-3">Estimated workload (hours)</td>
			<td class="click-edit" data-types="num" data-field="plan_hours">{$detail.plan_hours|default=''}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Task status</td>
			<td class="click-edit" data-types="dropdown" data-field="status" data-array="status" data-text="{$detail.status}">{$detail.status_name}</td>
			<td class="layui-td-gray-2">Actual completion date</td>
			<td>{eq name="$detail.over_time" value="0"}-{else/}{$detail.over_time|date='Y-m-d'}{/eq}</td>
			<td class="layui-td-gray">Actual hours</td>
			<td>{eq name="$detail.work_hours" value="0"}-{else/}{$detail.work_hours}{/eq}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Related attachments <button type="button" class="layui-btn layui-btn-xs" id="uploadBtn">Upload attachment</button></td>
			<td colspan="5">
				<div class="layui-row" id="uploadBox">
					<input type="hidden" data-type="file" name="file_ids" value="{$detail.file_ids|default=''}">
					{notempty name="$file_array"}
					{volist name="$file_array" id="vo"}
					<div class="layui-col-md4" id="uploadFile{$vo.id}">{:file_card($vo)}</div>
					{/volist}
					{/notempty}
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="6" class="click-edit" data-types="editor" data-field="content" data-target="content" style="background-color:#FAFAFA;"><strong>Task description</strong></td>
		</tr>
		<tr>
			<td colspan="6" id="content" class="table-content">{$detail.content|raw}</td>
		</tr>
	</table>
	

	<div class="layui-tab layui-tab-card" style="margin:0;" lay-filter="docDemoTabBrief">
		<ul class="layui-tab-title">
			<li class="layui-this">Work logs ({$detail.schedules})</li>
			<li>Comments (<span id="commentTotal">0</span>)</li>
			<li>Activity log (<span id="logListTotal">0</span>)</li>
		</ul>
		<div class="layui-tab-content py-1 px-3" style="background-color:#fff;">
			<div class="layui-tab-item layui-show py-2">
				<table class="layui-hide" id="table_work" lay-filter="table_work"></table>
			</div>
			<div class="layui-tab-item comment-list">
				<div class="comment-input my-2">
					<input type="text" id="commentInput" readonly placeholder="Share your thoughts" class="layui-input" value="">
				</div>
				<div id="commentBox"></div>
			</div>
			<div class="layui-tab-item logs-list">
				<div id="logList" class="log-timeline p-3"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
  <div>
	  	<div class="layui-input-inline" style="margin-right:12px;"><strong>Work log</strong></div><div class="layui-input-inline"><button class="layui-btn layui-btn-xs" type="button" lay-event="add">+ Add work log</button></div>
  </div>
</script>
{/block}
<!-- /Body -->

<!-- Script -->
{block name="script"}
<script>
	const admin_id = '{$detail.admin_id}';
	const detail_id = '{$detail.id}';
	const status_array = {:json_encode(get_task_status(1),JSON_UNESCAPED_UNICODE)};
	const priority_array = {:json_encode(get_priority(1),JSON_UNESCAPED_UNICODE)};
	const moduleInit = ['tool','oaPicker','oaEdit','oaSchedule','oaComment','uploadPlus'];
	function gouguInit() {
		const oaEdit = layui.oaEdit,work = layui.oaSchedule,comment = layui.oaComment, uploadPlus = layui.uploadPlus, tool = layui.tool, table = layui.table;
		
		oaEdit.log('logList','Task',detail_id);
		
		comment.init({
			"box":'commentBox',// Container id
			"input": 'commentInput',
			"topic_id":detail_id,
			"module": 'task',
		});
	
		let edit_callback = function(e){
			layer.msg(e.msg);
			if(e.code==0){
				setTimeout(function(){
					location.reload();
				},1000)
			}			
		}
		// Attachment upload
		var attachment = new uploadPlus({
			"target":'uploadBtn',
			"targetBox":'uploadBox',
			"attachment":{
				"type":1,// 0 = ajax multi-file mode, 1 = ajax single-file single-record mode
				"uidDelete":true,// Enable "only uploader can delete their own attachments"
				"ajaxSave":function(res){
					tool.post('/project/api/add_file',{'topic_id':detail_id,'file_id':res.data.id,'file_name': res.data.name, 'module': 'task'},edit_callback);
				},
				"ajaxDelete":function(file_id){
					tool.delete('/project/api/delete_file', {id: file_id}, edit_callback);	
				}
			}
		});
	
		// Quick edit
		oaEdit.init({
			box:'task',
			id:detail_id,
			url: "/project/task/add",
			dropdown:{
				status:status_array,
				priority:priority_array
			}
		});
		
		// Work log related
		layui.scheduleTable = table.render({
			elem: "#table_work"
			, toolbar: "#toolbarDemo"
			,url: "/oa/api/get_schedule"
			,page: true
			,limit: 20
			,where:{task_id:detail_id}
			,cellMinWidth: 80
			,cols: [[
				{field:'id',width:80, title: 'ID', align:'center'}
				,{field:'title',title: 'Work content',minWidth:240}
				,{field: 'name', title: 'Owner', align:'center',width:80}
				,{field: 'start_time', title: 'Work time range', align:'center',width:260,templet:function(d){
					var html=d.start_time+' to '+d.end_time;
					return html;
				}}
				,{field: 'labor_type_string', title: 'Work type', align:'center',width:80}
				,{field: 'labor_time', title: 'Hours', align:'center',width:80}
				,{field:'create_time', title: 'Created at',width:150,align:'center'}
				,{width:90,fixed:'right',title: 'Actions', align:'center',ignoreExport:true,templet: function(d){
					var html='';
					var btn1='<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">View</a>';
					if(d.admin_id !== login_admin){
						return btn1;
					}
					else{
						var btn2='<a class="layui-btn layui-btn-xs" lay-event="edit">Edit</a>';
						html = '<div class="layui-btn-group">'+btn1+btn2+'</div>';
						return html;
					}
				}}
			]]
		});
		
		table.on('toolbar(table_work)',function (obj) {
			if (obj.event === 'add') {
				work.add(detail_id,{'id':0});
			}
		});	 
		table.on('tool(table_work)',function (obj) {
			var checkStatus = table.checkStatus(obj.config.id); // Get selected row status
			var data = obj.data;
			if (obj.event === 'view') {
				work.view(data);
				return;
			}
			if (obj.event === 'edit') {
				work.add(data.task_id,data);
				return;
			}
			if (obj.event === 'del') {
				layer.confirm('Are you sure you want to delete this item?', { icon: 3, title: 'Notice' }, function (index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/project/task/del", { id: data.id }, callback);
					layer.close(index);
				});
				return;
			}
		});
		
		// Work log related
		$('.add-schedule').on('click', function () {
			work.add(detail_id,{'id':0});	
		})
		// Reply
		$('#comment_task_' + detail_id).on('click', '[data-event="replay"]', function () {
			let pid = $(this).data('id');
			let to_uid = $(this).data('uid');
			let to_unames = $(this).data('unames');
			comment.textarea(0,detail_id,'task','',pid,to_uid,to_unames);
		})
		// Edit
		$('#comment_task_' + detail_id).on('click', '[data-event="edit"]', function () {
			let id = $(this).data('id');
			let content = $('#comment_' + id).data('content');
			comment.textarea(id, detail_id, 'task', content,0,0,'');
		})

		// Delete
		$('#comment_task_' + detail_id).on('click', '[data-event="del"]', function () {
			let id = $(this).data('id');
			comment.del(id, detail_id, 'task');
		})
	}
</script>
{/block}