{extend name="../../base/view/common/base" /}
<!-- Main -->
{block name="body"}
<form class="layui-form p-4">
	<h3 class="pb-3">Approval Type</h3>
	{eq name="$id" value="0"}
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">Category<font>*</font></td>
			<td>
				<select name="type" lay-verify="required" lay-reqText="Please select category">
				  <option value="">--Select--</option>
				  {volist name="$type" id="vo"}
				  <option value="{$vo.id}">{$vo.title}</option>
				  {/volist}
				</select>
			</td>
			<td class="layui-td-gray">Name<font>*</font></td>
			<td>
				<input type="text" name="title" autocomplete="off" placeholder="Enter approval type name" lay-verify="required" lay-reqText="Please enter approval type name" class="layui-input">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Key<font>*</font></td>
			<td>
				<input type="text" name="name" placeholder="Enter approval type key" value="" autocomplete="off" lay-verify="required" lay-reqText="Please enter approval type key" class="layui-input">
			</td>
			<td class="layui-td-gray">Icon<font>*</font></td>
			<td>
				<input style="width:200px; display:inline" class="layui-input" type="text" name="icon" value="" placeholder="Enter approval type icon" lay-verify="required" lay-reqText="Please enter approval type icon" >			
				Example: icon-jichupeizhi<a href="{__GOUGU__}/icon/index.html" target="_blank" style="margin-left:10px; color:#007AFF">[View icons]</a>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Department</td>
			<td colspan="3">
				<div class="layui-input-inline" style="width:360px;">
					<select id="department_ids" name="department_ids" xm-selected="" xm-select="select1" xm-select-skin="default"></select>
				</div>
				<span style="color: red; font-size: 12px;">(If not selected, defaults to the whole company)</span>
			</td>
		</tr>
		<tr>
			<td colspan="4">
				<span style="color: red; font-size: 12px;">Note: After adding a new approval type, you must add the corresponding template file. The template filename must match the key. It is recommended to copy an existing approval type template and then adjust the form as needed.</span>
			</td>
		</tr>
	</table>
	{else/}
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">Category<font>*</font></td>
			<td>
				<select name="type" lay-verify="required" lay-reqText="Please select category">
				  <option value="">--Select--</option>
				  {volist name="$type" id="vo"}
				  <option value="{$vo.id}" {eq name="$detail.type" value="$vo.id"}selected=""{/eq}>{$vo.title}</option>
				  {/volist}
				</select>
			</td>
			<td class="layui-td-gray">Name<font>*</font></td>
			<td>
				<input type="text" name="title" value="{$detail.title}" placeholder="Enter approval type name" lay-verify="required" lay-reqText="Please enter approval type name" class="layui-input">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Key<font>*</font></td>
			<td>
				<input type="text" name="name" placeholder="Enter approval type key" value="{$detail.name}" autocomplete="off" lay-verify="required" lay-reqText="Please enter approval type key" class="layui-input">
			</td>
			<td class="layui-td-gray">Icon<font>*</font></td>
			<td>
				<input style="width:200px; display:inline" class="layui-input" type="text" name="icon" value="{$detail.icon}" placeholder="Enter approval type icon" lay-verify="required" lay-reqText="Please enter approval type icon" >			
				<strong class="iconfont {$detail.icon}"></strong><a href="{__GOUGU__}/icon/index.html" target="_blank" style="margin-left:10px; color:#007AFF">[View icons]</a>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Department</td>
			<td colspan="3">
				<div class="layui-input-inline" style="width:360px;">
					<select id="department_ids" name="department_ids" xm-selected="{$detail.department_ids}" xm-select="select1" xm-select-skin="default"></select>
				</div>
				<span style="color: red; font-size: 12px;">(If not selected, defaults to the whole company)</span>
			</td>
		</tr>
	</table>
	{/eq}
	<div class="pt-4">
		<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}
<!-- /Main -->

<!-- Script -->
{block name="script"}
<script>
	const moduleInit = ['tool','formSelects'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,formSelects=layui.formSelects;
		// Select department
		var selcted = $('#department_ids').attr('xm-selected');
		formSelects.data('select1', 'server', {
			url: '/api/index/get_department_select',
			keyword: selcted,
		});		
		// 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("/home/cate/flow_type_add", data.field, callback);
			return false;
		});
	}
</script>
{/block}
<!-- /Script -->