{include file="app/manage/view/index/emlog_nav"}

<!-- 页面标题 -->
<h1 class="page-title">
    <i class="fas fa-folder"></i>
    {$pagetext['1']}
    <a href="index.php?r=manage/find/type" class="btn btn-sm btn-outline-secondary float-right">
        <i class="fas fa-arrow-left mr-1"></i>返回列表
    </a>
</h1>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-edit"></i> {$pagetext['1']}</h5>
            </div>
            <div class="card-body">
                <form class="layui-form" id="form" action="" method="post">
                    <div class="form-group">
                        <label class="font-weight-bold">分类名称 <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="如：好物推荐" value="{$ret['name']}">
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">图标 <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" name="pic" id="tupian" class="form-control" placeholder="分类图标地址" value="{$ret['pic']}">
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-secondary" onclick="upthis()">
                                    <i class="fas fa-upload"></i> 上传
                                </button>
                            </div>
                        </div>
                        <input type="file" name="file" id="up_tupian" onChange="Uploadthis('tupian','up_tupian')" class="d-none">
                        {if $ret['pic']}
                        <div class="mt-2">
                            <img src="{$ret['pic']}" class="img-thumbnail mw-96" style="max-height:96px">
                        </div>
                        {/if}
                        <small class="form-text text-muted">建议尺寸 200×200，支持 JPG/PNG</small>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">关键字 <span class="text-danger">*</span></label>
                        <input type="text" name="keywords" class="form-control" placeholder="用于 SEO，多个用逗号分隔" value="{$ret['keywords']}">
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">描述 <span class="text-danger">*</span></label>
                        <textarea name="dec" class="form-control" rows="3" placeholder="分类描述信息">{$ret['dec']}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">排序</label>
                        <input type="number" name="px" class="form-control mw-160" min="0" placeholder="越小越靠前" value="{$ret['px']}">
                        <small class="form-text text-muted">数字越小排序越靠前</small>
                    </div>

                    {$html}

                    <div class="form-group border-top pt-3 mt-4">
                        <button type="submit" class="btn btn-primary btn-lg px-5" id="save">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <a href="index.php?r=manage/find/type" class="btn btn-outline-secondary btn-lg ml-2">
                            <i class="fas fa-times"></i> 取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{include file="app/manage/view/index/emlog_footer"}

<script>
jQuery(function($){
    $('#form').on('submit', function(e){
        e.preventDefault();
        var btn = $('#save'), text = btn.html();
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 保存中...');
        $.ajax({
            url: $(this).attr('action') || window.location.href,
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(res){
                if(res && res.need_login){
                    showToast(res.info || '登录已过期，请重新登录', 'danger');
                    setTimeout(function(){ window.location.href = 'index.php?r=manage/login/index'; }, 1200);
                    return;
                }
                if(res && res.status == 'y'){
                    showToast(res.info, 'success');
                    setTimeout(function(){ window.location.href = 'index.php?r=manage/find/type'; }, 1500);
                } else {
                    showToast((res && res.info) || '保存失败', 'danger');
                    btn.prop('disabled', false).html(text);
                }
            },
            error: function(xhr){
                // 后端统一返回 JSON；若收到非 JSON（如网络/会话异常）也尽量给出可读提示
                var msg = '请求异常，请稍后重试';
                try {
                    var r = JSON.parse(xhr.responseText);
                    if (r && r.info) msg = r.info;
                } catch(e) {}
                showToast(msg, 'danger');
                btn.prop('disabled', false).html(text);
            }
        });
    });
});

function showToast(message, type) {
  type = type || 'success';
  var toast = document.createElement('div');
  toast.className = 'toast align-items-center text-white bg-' + type + ' border-0 position-fixed show';
  toast.setAttribute('role', 'alert');
  toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 250px; opacity: 1; transition: opacity .3s ease;';
  var icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
  toast.innerHTML = '<div class="d-flex"><div class="toast-body"><i class="fas fa-' + icon + ' mr-2"></i>' + message + '</div><button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="this.parentElement.parentElement.remove()"></button></div>';
  document.body.appendChild(toast);
  setTimeout(function() {
    toast.style.opacity = '0';
    setTimeout(function() {
      if(toast.parentNode) toast.parentNode.removeChild(toast);
    }, 350);
  }, 3000);
}

// 指定上传类型为 nav
window.ZhiCmsUploadType = 'nav';

function upthis(){
    document.getElementById("up_tupian").click();
}
</script>