{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
.layui-form-item{margin-bottom:0}
</style>
{/block}
<!-- Body -->
{block name="body"}
<form class="layui-form p-page">
	<h3 class="pb-1">Approval conditions	<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add approval level</span></h3>
	{eq name="$id" value="0"}
	<table class="layui-table">
		<tr>
			<td class="layui-td-gray-2">
				Level 1
				<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add condition branch</span>
			</td>
			<td>
				Condition branch (priority 1)
				<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add condition group</span>
				<div>
					Condition group 1<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add condition field</span>
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
						  <label class="layui-form-label" style="width:40px">When</label>
						  <div class="layui-input-inline" style="width:132px">
							<select name="columns[]" lay-filter="columns" lay-verify="required" lay-reqText="Please select field">
								<option value="">Select condition field</option>
								{volist name="$columns" id="vo"}
								<option value="{$vo.Field}">{$vo.Comment|default=$vo.Field}</option>
								{/volist}
							</select>						
						  </div>
						  <div class="layui-input-inline" style="width:100px">
								<select name="flow_cate" lay-filter="flowcate" lay-verify="required" lay-reqText="Please select operator">
									<option value="1">Equals</option>
									<option value="2">Less than</option>
									<option value="3">Less than or equal</option>
									<option value="4">Greater than</option>
									<option value="5">Greater than or equal</option>
								</select>
						  </div>
						  <label class="layui-form-label" style="width:90px">Approver(s)</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="unames[]" value="" autocomplete="off" placeholder="Please select approver(s)" readonly class="layui-input picker-admin">
							<input type="hidden" name="uids[]" value="">
						  </div>
						</div>
					</div>
					AND
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
						  <label class="layui-form-label" style="width:40px">When</label>
						  <div class="layui-input-inline" style="width:132px">
							<select name="columns[]" lay-filter="columns" lay-verify="required" lay-reqText="Please select field">
								<option value="">Select condition field</option>
								{volist name="$columns" id="vo"}
								<option value="{$vo.Field}">{$vo.Comment|default=$vo.Field}</option>
								{/volist}
							</select>						
						  </div>
						  <div class="layui-input-inline" style="width:100px">
								<select name="flow_cate" lay-filter="flowcate" lay-verify="required" lay-reqText="Please select operator">
									<option value="1">Equals</option>
									<option value="2">Less than</option>
									<option value="3">Less than or equal</option>
									<option value="4">Greater than</option>
									<option value="5">Greater than or equal</option>
								</select>
						  </div>
						  <label class="layui-form-label" style="width:90px">Approver(s)</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="unames[]" value="" autocomplete="off" placeholder="Please select approver(s)" readonly class="layui-input picker-admin">
							<input type="hidden" name="uids[]" value="">
						  </div>
						</div>
					</div>
				</div>
				Condition branch (priority 2)
				<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add condition group</span>
				<div>
					Condition group 1<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add condition field</span>
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
						  <label class="layui-form-label" style="width:40px">When</label>
						  <div class="layui-input-inline" style="width:132px">
							<select name="columns[]" lay-filter="columns" lay-verify="required" lay-reqText="Please select field">
								<option value="">Select condition field</option>
								{volist name="$columns" id="vo"}
								<option value="{$vo.Field}">{$vo.Comment|default=$vo.Field}</option>
								{/volist}
							</select>						
						  </div>
						  <div class="layui-input-inline" style="width:100px">
								<select name="flow_cate" lay-filter="flowcate" lay-verify="required" lay-reqText="Please select operator">
									<option value="1">Equals</option>
									<option value="2">Less than</option>
									<option value="3">Less than or equal</option>
									<option value="4">Greater than</option>
									<option value="5">Greater than or equal</option>
								</select>
						  </div>
						  <label class="layui-form-label" style="width:90px">Approver(s)</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="unames[]" value="" autocomplete="off" placeholder="Please select approver(s)" readonly class="layui-input picker-admin">
							<input type="hidden" name="uids[]" value="">
						  </div>
						</div>
					</div>
					AND
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
						  <label class="layui-form-label" style="width:40px">When</label>
						  <div class="layui-input-inline" style="width:132px">
							<select name="columns[]" lay-filter="columns" lay-verify="required" lay-reqText="Please select field">
								<option value="">Select condition field</option>
								{volist name="$columns" id="vo"}
								<option value="{$vo.Field}">{$vo.Comment|default=$vo.Field}</option>
								{/volist}
							</select>						
						  </div>
						  <div class="layui-input-inline" style="width:100px">
								<select name="flow_cate" lay-filter="flowcate" lay-verify="required" lay-reqText="Please select operator">
									<option value="1">Equals</option>
									<option value="2">Less than</option>
									<option value="3">Less than or equal</option>
									<option value="4">Greater than</option>
									<option value="5">Greater than or equal</option>
								</select>
						  </div>
						  <label class="layui-form-label" style="width:90px">Approver(s)</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="unames[]" value="" autocomplete="off" placeholder="Please select approver(s)" readonly class="layui-input picker-admin">
							<input type="hidden" name="uids[]" value="">
						  </div>
						</div>
					</div>
				</div>				
				Default branch (priority 3)
				<div class="layui-form-item layui-form-pane" style="margin-bottom:0">
					<div class="layui-input-inline" style="width:160px;">
						<select name="types[]" lay-filter="flowtype">
							<option value="1">Current department manager</option>
							<option value="2">Parent department manager</option>
							<option value="3">Specific members (Any-approve)</option>
							<option value="4">Specific members (Joint approval)</option>
						</select>
					</div>
					<label class="layui-form-label" style="width:90px">Approver(s)</label>
					<div class="layui-input-inline" style="width:360px;">
						<input type="text" name="unames[]" value="" autocomplete="off" placeholder="Please select approver(s)" readonly class="layui-input picker-admin">
						<input type="hidden" name="uids[]" value="">
					</div>
					<span class="layui-label-inline">
						If none of the other branch conditions match, this branch will be used.
					</span>				
				</div>
			</td>	
		</tr>
		<tr>
			<td class="layui-td-gray-2">
				Level 2
				<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add condition branch</span>
			</td>
			<td>
				
			</td>
		</tr>
	</table>
	{else/}
	<table class="layui-table">
		<tr>
			<td class="layui-td-gray">Workflow name<font>*</font></td>
			<td>
				<input type="text" name="title" value="{$detail.title}" autocomplete="off" placeholder="Please enter workflow name" lay-verify="required" lay-reqText="Please enter workflow name" class="layui-input">
			</td>
			<td class="layui-td-gray">Workflow identifier<font>*</font></td>
			<td><input type="text" name="name" value="{$detail.name}" autocomplete="off" placeholder="Please enter workflow identifier" lay-verify="required" lay-reqText="Please enter workflow identifier" class="layui-input">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Approval module<font>*</font></td>
			<td>
				<select name="flow_cate" lay-filter="flowcate" lay-verify="required" lay-reqText="Please select approval module">
					<option value="">Select approval module</option>
					{volist name=":get_base_data('flow_cate')" id="vo"}
						<option value="{$vo.id}" {eq name="$vo.id" value="$detail.flow_cate"}selected{/eq}>{$vo.title}</option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray">Approval type<font>*</font></td>
			<td>
				<select name="flow_item" lay-filter="flowitem" lay-verify="required" lay-reqText="Please select approval type">
				  <option value="">-- Select --</option>
				  {volist name="$detail.flow_item_list" id="vo"}
				  <option value="{$vo.id}" {eq name="$detail.flow_item" value="$vo.id"}selected=""{/eq}>{$vo.title}</option>
				  {/volist}
				</select>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Applicable departments</td>
			<td colspan="3">
				<div class="layui-input-inline" style="width:80%;">
					<select id="department_ids" name="department_ids" xm-selected="{$detail.department_ids}" xm-select="select1" xm-select-skin="default"></select>
				</div>
				<span class="red" style="font-size:12px;">(If empty, defaults to the whole company)</span>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Description</td>
			<td colspan="3">
				<textarea name="remark" placeholder="Please enter description" class="layui-textarea">{$detail.remark}</textarea>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Workflow type<font>*</font></td>
			<td colspan="3">
				<input type="radio" name="check_type" lay-filter="checktype" value="1" title="Free workflow" {eq name="$detail.check_type" value="1"}checked{/eq}>
				<input type="radio" name="check_type" lay-filter="checktype" value="2" title="Fixed workflow" {eq name="$detail.check_type" value="2"}checked{/eq}>
				<input type="radio" name="check_type" lay-filter="checktype" value="3" title="Revertible workflow" {eq name="$detail.check_type" value="3"}checked{/eq}>
				<input type="radio" name="check_type" lay-filter="checktype" value="4" title="Conditional workflow" {eq name="$detail.check_type" value="4"}checked{/eq}>
			</td>
		</tr>
		<tr id="flowTr1" {neq name="$detail.check_type" value="1"}style="display:none"{/neq}>
			<td class="layui-td-gray">Approval workflow<font>*</font></td>
			<td colspan="3">
				<div style="padding:10px; font-size:12px; background-color:#fffcf0">
					<p><strong>Tip</strong></p>
					<p>No pre-defined approvers are required. The requester can select approvers at submission time (maximum flexibility).</p>
				</div>
			</td>
		</tr>
		<tr id="flowTr2" {neq name="$detail.check_type" value="2"}style="display:none"{/neq}>
			<td class="layui-td-gray">Approval workflow<font>*</font></td>
			<td colspan="3">
				<div id="flowList2">
					{eq name="$detail.check_type" value="2"}
					{volist name="detail.flow_list" id="vo"}
					<div class="layui-form-item layui-form-pane">
							<div class="layui-inline">
							  <label class="layui-form-label">Level {$key+1}</label>
						  <div class="layui-input-inline">
							<select name="flowType[]" lay-filter="flowtype">
									<option value="1" {eq name="$vo.flow_type" value="1"}selected=""{/eq}>Current department manager</option>
									<option value="2" {eq name="$vo.flow_type" value="2"}selected=""{/eq}>Parent department manager</option>
									<option value="3" {eq name="$vo.flow_type" value="3"}selected=""{/eq}>Specific members (Any-approve)</option>
									<option value="4" {eq name="$vo.flow_type" value="4"}selected=""{/eq}>Specific members (Joint approval)</option>
							</select>
						  </div>
						</div>
						<div class="layui-inline select-{$vo.flow_type}">
							  <label class="layui-form-label">Specific members</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="flowNamesA[]" value="{$vo.flow_unames}" autocomplete="off" readonly class="layui-input picker-more">
							<input type="hidden" name="flowUidsA[]" value="{$vo.flow_uids}">
						  </div>
						</div>
						{gt name="$key" value="0"}
							<span class="layui-btn layui-btn-danger layui-btn-sm">Delete</span>
						{/gt}
					</div>
					{/volist}
					{else/}
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
						  <label class="layui-form-label">Level 1</label>
						  <div class="layui-input-inline">
							<select name="flowType[]" lay-filter="flowtype">
								<option value="1">Current department manager</option>
								<option value="2">Parent department manager</option>
								<option value="3">Specific members (Any-approve)</option>
								<option value="4">Specific members (Joint approval)</option>
							</select>
						  </div>
						</div>
						<div class="layui-inline select-1">
						  <label class="layui-form-label">Specific members</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="flowNamesA[]" value="" autocomplete="off" readonly class="layui-input picker-more">
							<input type="hidden" name="flowUidsA[]" value="">
						  </div>
						</div>
					</div>
					{/eq}
				</div>
				<span id="addFlow2" class="layui-btn layui-btn-xs layui-btn-normal">+ Add approval level</span>
				<div style="padding:10px; margin-top:10px; font-size:12px; background-color:#fffcf0">
					<p><strong>Tip</strong></p>
					<p>1) For “Current department manager”, the system notifies only the current department's manager.</p>
					<p>2) For “Parent department manager”, the system notifies only the parent department's manager.</p>
					<p>3) “Specific members (Any-approve)” means any one of the selected members can approve (single or multiple selection).</p>
					<p>4) “Specific members (Joint approval)” means all selected members must approve (single or multiple selection).</p>
					<p>5) If an approver does not have permission to view the approval module, the system can notify them, but they may be unable to view the approval data.</p>
				</div>
			</td>
		</tr>
		<tr id="flowTr3" {neq name="$detail.check_type" value="3"}style="display:none"{/neq}>
			<td class="layui-td-gray">Approval workflow<font>*</font></td>
			<td colspan="3">
				<div id="flowList3">
					{eq name="$detail.check_type" value="3"}
					{volist name="detail.flow_list" id="vo"}
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
							<label class="layui-form-label">Level {$key+1}</label>
						  <div class="layui-input-inline">
								<input type="text" name="flowName[]" value="{$vo.flow_name}" autocomplete="off" placeholder="Please enter step name" class="layui-input">
						  </div>
						</div>
						<div class="layui-inline select-3">
								<label class="layui-form-label">Specific member</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="flowNamesB[]" value="{$vo.flow_unames}" autocomplete="off" readonly class="layui-input picker-one">
							<input type="hidden" name="flowUidsB[]" value="{$vo.flow_uids}">
						  </div>
						</div>
						{gt name="$key" value="0"}
							<span class="layui-btn layui-btn-danger layui-btn-sm">Delete</span>
						{/gt}
					</div>
					{/volist}
					{else/}
					<div class="layui-form-item layui-form-pane">
						<div class="layui-inline">
							<label class="layui-form-label">Level 1</label>
						  <div class="layui-input-inline">
								<input type="text" name="flowName[]" value="" autocomplete="off" placeholder="Please enter step name" class="layui-input">
						  </div>
						</div>
						<div class="layui-inline select-3">
								<label class="layui-form-label">Specific member</label>
						  <div class="layui-input-inline" style="width:360px;">
							<input type="text" name="flowNamesB[]" value="" autocomplete="off" readonly class="layui-input picker-one">
							<input type="hidden" name="flowUidsB[]" value="">
						  </div>
						</div>
					</div>
					{/eq}
				</div>
				<span id="addFlow3" class="layui-btn layui-btn-xs layui-btn-normal">+ Add approval level</span>
				<div style="padding:10px; margin-top:10px; font-size:12px; background-color:#fffcf0">
					<p><strong>Tip</strong></p>
					<p>1) <strong>Specific member</strong> is single-select. During approval, only that member can approve.</p>
					<p>2) This workflow is <strong>revertible</strong>: when a request is rejected, it automatically rolls back to the previous approver step.</p>
				</div>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">CC recipients</td>
			<td colspan="3">
				<input type="text" name="copy_unames" value="{$detail.copy_unames}" autocomplete="off" readonly class="layui-input picker-admin" data-type="2">
				<input type="hidden" name="copy_uids" value="{$detail.copy_uids}">
			</td>
		</tr>
	</table>
	{/eq}
	<div class="py-3">
		<input type="hidden" name="id" value="{$id}">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">Submit</button>
		<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
    </div>
</form>
{/block}
<!-- /Body -->

<!-- Script -->
{block name="script"}
<script>
	const moduleInit = ['tool','formSelects','oaPicker'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,formSelects = layui.formSelects;		  
		// Select approval module
		form.on('select(flowcate)', function(data){
			let callback = function (e) {
				if (e.code == 0) {
					if(e.data.length>0){
						let ops='<option value="">-- Select --</option>';
						for(var i=0;i<e.data.length;i++){
							ops+='<option value="'+e.data[i].id+'">'+e.data[i].title+'</option>';
						}
						$('[name="flow_item"]').html(ops);
						form.render();
					}
					else{
						$('[name="flow_item"]').html('');
						form.render();
					}
				}
			}
			tool.get("/adm/api/get_flow_item", {cate:data.value}, callback);
		})
		
		// Select applicable departments
		var selcted = $('#department_ids').attr('xm-selected');
		formSelects.data('select1', 'server', {
			url: '/api/index/get_department_select',
			keyword: selcted,
		});
		
		
		form.on('radio(checktype)', function(data){
		  if(data.value==1){
			$('#flowTr1').show();
			$('#flowTr2').hide();
			$('#flowTr3').hide();
		  }
		  else if(data.value==2){
			$('#flowTr1').hide();
			$('#flowTr2').show();
			$('#flowTr3').hide();
		  }
		  else{
			$('#flowTr1').hide();
			$('#flowTr2').hide();
			$('#flowTr3').show();
		  }
		});
		
		form.on('select(flowtype)', function(data){
		  $(data.elem).parents('.layui-form-item').find('.layui-inline').eq(1).attr('class','layui-inline select-'+data.value);
		});

		// Submit handler
		form.on('submit(webform)', function(data){
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					tool.sideClose(1000);					
				}
			}
			tool.post("/adm/flow/add", data.field, callback);
			return false;
		});
    
		
		$('#addFlow2').on('click',function(){
			var len = $('#flowList2').find('.layui-form-item').length;
			var index = len+1;
			var timestamp=new Date().getTime();
			var tem='<div class="layui-form-item  layui-form-pane">\
						<div class="layui-inline">\
						  <label class="layui-form-label label-index">Level '+index+'</label>\
						  <div class="layui-input-inline">\
							<select name="flowType[]" lay-filter="flowtype">\
								<option value="1">Current department manager</option>\
								<option value="2">Parent department manager</option>\
								<option value="3">Specific members (Any-approve)</option>\
								<option value="4">Specific members (Joint approval)</option>\
							</select>\
						  </div>\
						</div>\
						<div class="layui-inline select-1">\
						  <label class="layui-form-label">Specific members</label>\
						  <div class="layui-input-inline" style="width:360px;">\
							<input type="text" name="flowNamesA[]" value="" autocomplete="off" readonly class="layui-input picker-admin" data-type="2">\
							<input type="hidden" name="flowUidsA[]" value="">\
						  </div>\
						</div>\
						<span class="layui-btn layui-btn-danger layui-btn-sm">Delete</span>\
					</div>';
			$('#flowList2').append(tem);
			form.render();
		});
		
		$('#flowList2').on('click','.layui-btn-danger',function(){
			$(this).parents('.layui-form-item').remove();
			var items = $('.label-index').length;
			if(items>0){
				$('.label-index').each(function(index,item){
					$(this).html('Level '+(index+2));
				})
			}
		});			
		
		//================================
		$('#addFlow3').on('click',function(){
			var len = $('#flowList3').find('.layui-form-item').length;
			var index = len+1;
			var timestamp=new Date().getTime();
			var tem='<div class="layui-form-item  layui-form-pane">\
						<div class="layui-inline">\
						  <label class="layui-form-label label-index">Level '+index+'</label>\
						  <div class="layui-input-inline">\
							<input type="text" name="flowName[]" value="" autocomplete="off" placeholder="Please enter step name" class="layui-input">\
						  </div>\
						</div>\
						<div class="layui-inline select-3">\
						  <label class="layui-form-label">Specific member</label>\
						  <div class="layui-input-inline" style="width:360px;">\
							<input type="text" name="flowNamesB[]" value="" autocomplete="off" readonly class="layui-input picker-one">\
							<input type="hidden" name="flowUidsB[]" value="">\
						  </div>\
						</div>\
						<span class="layui-btn layui-btn-danger layui-btn-sm">Delete</span>\
					</div>';
			$('#flowList3').append(tem);
			form.render();
		});
		
		$('#flowList3').on('click','.layui-btn-danger',function(){
			$(this).parents('.layui-form-item').remove();
			var items = $('.label-index').length;
			if(items>0){
				$('.label-index').each(function(index,item){
					$(this).html('Level '+(index+2));
				})
			}
		});
	}
</script>
{/block}
<!-- /Script -->