<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/html/admin/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/html/admin/js/lay-module/lay_cascader/cascader.css" media="all">
    <link rel="stylesheet" href="/html/admin/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    {% for item in item_list %}
    <div class="layui-form-item">
        {% if item.type not in [ 'hidden'] %}
        <label class="layui-form-label {%if item.required%}required{%endif%}">{{item.title}}{% if item.type =='array'%}<span style="color:red;">数组</span>{% endif %}</label>
        {% endif %}
        <div class="layui-input-block">
            {% if item.type in ['array', 'text','number','email','hidden'] %}
                <input type="{{item.type}}" {% if item.readonly %}readonly{% endif %} name="{{item.name}}" {%if item.required%}lay-verify="required" lay-reqtext="{{item.required_text}}"{%endif%}  {%if item.placeholder%}placeholder="{{item.placeholder}}"{%endif%} {%if item.default%}value="{{item.default|safe}}"{%endif%} {%if item.autocomplete%}autocomplete="{{item.autocomplete}}"{%endif%} class="layui-input">
            {% elif item.type =='password' %}
                <input type="password" {% if item.readonly %}readonly{% endif %} name="{{item.name}}" {%if item.required%}lay-verify="required" lay-reqtext="{{item.required_text}}"{%endif%} {%if item.autocomplete%}autocomplete="{{item.autocomplete}}"{%endif%} class="layui-input" {%if item.default%}value="{{item.default|safe}}"{%endif%}>
            {% elif item.type == 'radio' %}
                {% for radio_item in item.radio_list %}
                <input type="radio" {% if item.readonly %}readonly{% endif %} name="{{item.name}}" value="{{radio_item[0]}}" title="{{radio_item[1]}}" {% if radio_item[2] %}checked{% endif %}>
                {% endfor %}
            {% elif item.type == 'cascader' %}
                <input id="cascader-{{loop.index}}" data-type="lay-cascader"  name="{{item.name}}" {%if item.default%}value="{{item.default|safe}}"{%endif%}  {%if item.required%}lay-verify="required" lay-reqtext="{{item.required_text}}"{%endif%}  {%if item.default%}value="{{item.default|safe}}"{%endif%}/>
            {% elif item.type == 'checkbox' %}
                {% for checkbox_item in item.checkbox_list %}
                <input type="checkbox" {% if item.readonly %}readonly{% endif %} lay-skin="primary" name="{{item.name}}" value="{{checkbox_item[0]}}" title="{{checkbox_item[1]}}" {% if checkbox_item[2]%}checked{%endif%} {% if checkbox_item[3]%}disabled{% endif %}>
                {% endfor %}
            {% elif item.type == 'switch' %}
                {% if item.switch_item %}
                <input type="hidden" name="{{item.name}}" value="0">
                <input type="checkbox" {% if item.readonly %}readonly{% endif %} lay-skin="switch" name="{{item.name}}" value="{{item.switch_item[0]}}" lay-text="{{item.switch_item[1]}}" {% if item.switch_item[2]%}checked{%endif%} {% if item.switch_item[3]%}disabled{% endif %}>
                {% endif %}
            {% elif item.type == 'select' %}
                <select name="{{item.name}}" {% if item.readonly %}readonly{% endif %} {%if item.required%}lay-verify="required" lay-reqtext="{{item.required_text}}"{%endif%}  lay-search>
                    <option value=""></option>
                    {% for select_item in item.select_list %}
                    <option value="{{select_item[0]}}" {% if select_item[2]%}selected{% endif %} {% if select_item[3]%}disabled{% endif %}>{{select_item[1]}}</option>
                    {% endfor %}
                </select>
            {% elif item.type == 'textarea' %}
                <textarea name="{{item.name}}" id="textarea-{{loop.index}}" {% if item.readonly %}readonly{% endif %} class="layui-textarea" {%if item.required%}required lay-verify="required" lay-reqtext="{{item.required_text}}"{%endif%} {%if item.placeholder%}placeholder="{{item.placeholder}}"{%endif%}>{%if item.default%}{{item.default|safe}}{%endif%}</textarea>
            {% elif item.type == 'file' %}
               <input type="hidden" name="{{item.name}}" {%if item.default%}value="{{item.default}}"{%endif%} class="layui-input">
                <button type="button" class="layui-btn" id="upload-{{item.name}}">
                  <i class="layui-icon">&#xe67c;</i>{{item.file_upload_title}}
                </button>
            {% endif %}


            {% if item.tip %}
            <tip>{{item.tip}}</tip>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="/html/admin/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/html/admin/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
                var form_array_field = []
        {% for item in item_list %}
            {% if item.type == 'array' %}
            form_array_field.push('{{item.name}}');
            {% endif %}
        {% endfor %}
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            if (form_array_field.length>0){
                for(var tmp_i=0;tmp_i<form_array_field.length;tmp_i++){
                    var tmp_value = data.field[form_array_field[tmp_i]]
                    if (tmp_value.includes(',')) {
                        data.field[form_array_field[tmp_i]] = tmp_value.split(',');
                    } else{
                         data.field[form_array_field[tmp_i]] = [tmp_value]
                    }
                }
            }
            $.post("{{edit_url}}", data.field, function(result){
                if (result.error_no == 0){
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }else{
                    layer.alert(result.message, {
                        title: '提交失败提醒',
                        icon: 5
                    });
                }
            });
            return false;
        });
    });

layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    {% for item in item_list %}
        {% if item.type == 'cascader' %}
        layCascader({
            elem: '#cascader-{{loop.index}}',
            clearable: true,
            filterable: true,
            {% if item.default is not none %}value:'{{item.default}}',{%endif%}
            options: {{item.cascader_list}}
        });
        {% endif %}
    {% endfor %}
});


layui.use('upload', function(){
  var upload = layui.upload;
  var $ = layui.$;
  {% for item in item_list %}
    {% if item.type == 'file' %}
      //执行实例
      var uploadInst = upload.render({
        elem: '#upload-{{item.name}}' //绑定元素
        ,url: '{{item.file_upload_url}}' //上传接口
        ,data: {
          {% for param_item in item.file_upload_params %}
              {% if loop.first%}
              {{param_item}}:function(){
                return $('input[name="{{param_item}}"]').val();
              }
              {% else %}
              ,{{param_item}}:function(){
                return $('input[name="{{param_item}}"]').val();
              }
              {% endif %}
          {% endfor %}
        }
        ,done: function(result){
            if(result.error_no==0){
                //上传完毕回调
              {% if item.file_upload_after_handle_js %}
                {{item.file_upload_after_handle_js|safe}}
              {% endif %}
            }else{
                //请求异常回调
              layer.alert(result.message, {
                   title: '{{item.file_upload_title}}[{{item.name}}]失败',
                   icon: 5
              });
            }
        }
        ,error: function(result){
          //请求异常回调
          layer.alert(result, {
               title: '{{item.file_upload_title}}[{{item.name}}]失败',
               icon: 5
          });
        }
      });
    {% endif %}
  {% endfor %}
});
</script>
<script src="/static/lib/tinymce_5.10.0/tinymce.min.js"></script>
<script>
// 富文本
{% for item in item_list %}
{% if item.type == 'textarea' %}
tinymce.init({
    selector: '#textarea-{{loop.index}}',
    language:'zh_CN',
    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize',
    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor link | alignleft aligncenter alignright alignjustify outdent indent | \
    formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat hr pagebreak insertdatetime |  lineheight | \
    table image media charmap emoticons  print preview | fullscreen ',
    height: 650, //编辑器高度
    setup: function(editor){
        editor.on('change',function(){ editor.save(); });
    },
    // 为图像属性编辑窗口添加高级属性，可以自定义图片的css样式（内置style）、边距（margin）和边框（border）。
    image_advtab: true,
    // 关闭上传按钮, 使用自定义上传
    image_uploadtab:false,
    //自定义文件选择器的回调内容
    file_picker_callback: function (callback, value, meta) {
        //文件分类
        var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
        var group_path = 'file_resource';
        var resource_format = 'file';
        //为不同插件指定文件类型及后端地址
        switch(meta.filetype){
            case 'image':
                filetype='.jpg, .jpeg, .png, .gif';
                group_path = 'image_resource';
                resource_format = 'image';
                break;
            case 'media':
                filetype='.mp3, .mp4';
                group_path = 'media_resource';
                resource_format = 'media';
                break;
            case 'file':
            default:
        }
        //模拟出一个input用于添加本地文件
        var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);

         input.click();
        input.onchange = function() {
             var file = this.files[0];
             var formData = new FormData();
            formData.append('file', file, file.name);
            formData.append('group_path', group_path);
            formData.append('resource_format', resource_format);
            formData.append('save_resource', 1);
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', '{{file_upload_url}}');
            xhr.onload = function() {
                if (xhr.status != 200) {
                    layer.alert('服务器响应 HTTP Error:'+ xhr.status, {
                       title: '上传失败失败',
                       icon: 5
                    });
                    return;
                }
                var resp_json = JSON.parse(xhr.responseText);
                if (!resp_json) {
                    layer.alert('服务器响应 Invalid JSON: ' + xhr.responseText, {
                       title: '上传失败',
                       icon: 5
                    });
                    return;
                }else{
                    if(resp_json.error_no==0){
                        if (meta.filetype === 'file') {
                            // 返回建议选择项
                          callback(resp_json.data.url, { text: resp_json.data.file_name });
                        } else if (meta.filetype === 'image') {
                          // 返回建议选择项
                          callback(resp_json.data.url, { alt: resp_json.data.file_name });
                        } else if (meta.filetype === 'media') {
                            // 返回建议选择项
                          callback(resp_json.data.url, { poster: '/static/image/default/cover.png' });
                        }
                    }else{
                        //请求异常回调
                      layer.alert(result.message, {
                           title: '上传失败',
                           icon: 5
                      });
                    }
                }
            };
            xhr.send(formData);
        }
    },
    toolbar_sticky: true,
    autosave_ask_before_unload: false,
 });
 {% endif %}
{% endfor %}
</script>
</body>
</html>