{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}

<section class="content">
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">

                <!-- 表单头部 -->
                <div class="box-header with-border">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fa fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>

                <form id="dataForm" class="form-horizontal dataForm" action="formField" method="post"
                      enctype="multipart/form-data">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="form_name" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10 col-md-4">
                                <input maxlength="50" id="form_name" autocomplete="off" name="form_name"
                                       class="form-control" placeholder="请输入名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="field_name" class="col-sm-2 control-label">字段</label>
                            <div class="col-sm-10 col-md-4">
                                <input maxlength="50" id="field_name" autocomplete="off" name="field_name"
                                       class="form-control" placeholder="请输入字段">
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="form_type" class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-list"></i></span>
                                    <select class="form-control select2 form-type-select" id="form_type"
                                            name="form_type">
                                        <option value="text">文本[text]</option>
                                        <option value="number">数字[number]</option>
                                        <option value="password">密码[password]</option>
                                        <option value="mobile">手机号[mobile]</option>
                                        <option value="email">邮箱[email]</option>
                                        <option value="id_card">身份证号[id_card]</option>
                                        <option value="url">网址[url]</option>
                                        <option value="ip">IP地址[ip]</option>
                                        <option value="textarea">文本域[textarea]</option>
                                        <option value="checkbox">复选[checkbox]</option>
                                        <option value="switch">开关[switch]</option>
                                        <option value="radio">单选[radio]</option>
                                        <option value="select">选择列表[select]</option>
                                        <option value="multi_select">多项选择列表[multi-select]</option>
                                        <option value="image">图片上传[image]</option>
                                        <option value="multi_image">多图上传[multi-image]</option>
                                        <option value="file">文件上传[file]</option>
                                        <option value="multi_file">多文件上传[multi-file]</option>
                                        <option value="date">日期[date]</option>
                                        <option value="date_range">日期范围[date-range]</option>
                                        <option value="datetime">日期时间[datetime]</option>
                                        <option value="datetime_range">日期时间范围[datetime-range]</option>
                                        <option value="year">年[year]</option>
                                        <option value="year_range">年范围[year-range]</option>
                                        <option value="year_month">年月[year-month]</option>
                                        <option value="year_month_range">年月范围[year-month-range]</option>
                                        <option value="map">地图选点[map]</option>
                                        <option value="color">颜色选择[color]</option>
                                        <option value="icon">图标选择[icon]</option>
                                        <option value="editor">富文本编辑器[editor]</option>
                                        <option value="province_city_district">省市区[三级联动]</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <script>
                            $('#form_type').select2();
                        </script>

                    </div>
                    <div class="box-footer">
                        {:token()}
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10 col-md-4">
                            <div class="btn-group">
                                <button type="submit" class="btn flat btn-info dataFormSubmit">
                                    生成
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>

        <div class="col-md-6">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">生成结果</h3>

                </div>
                <div class="box-body">
                    <textarea id="code" style="width: 100%" placeholder="生成结果" rows="6"></textarea>
                </div>
                <div class="box-footer">
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-10 col-md-4">
                        <div class="btn-group">
                            <button class="clipboard-btn btn flat btn-info" data-clipboard-target="#code">
                                复制到剪切板
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

</section>

<script>
    // button的class的值
    var clipboardDemos = new ClipboardJS('.clipboard-btn');
    clipboardDemos.on('success', function (e) {
        e.clearSelection();
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        layer.msg('复制成功');
    });
    clipboardDemos.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        console.log('复制失败');
    });
</script>

<script>
    $(function () {

        /**
         * ajax表单提交
         */
        $(".dataForm").submit(function (e) {
                e.preventDefault();
                var loadT = layer.msg('正在提交，请稍候…', {icon: 16, time: 0, shade: [0.3, "#000"]});
                var form_action = $(this).attr('action');
                var form_method = $(this).attr('method');
                var form_data = new FormData($(this)[0]);
                console.log('%cajax submit start!', ';color:#333333');
                console.log('action:' + form_action);
                console.log('method:' + form_method);
                console.log('data:' + form_data);
                $.ajax({
                        url: form_action,
                        dataType: 'json',
                        type: form_method,
                        data: form_data,
                        contentType: false,
                        processData: false,
                        success: function (result) {
                            layer.close(loadT);
                            layer.msg(result.msg, {
                                icon: result.code ? 1 : 2
                            });
                            console.log('submit success!');
                            if (result.code === 1) {
                                addCode(result.data);
                                console.log('%cresult success', ';color:#00a65a');
                            } else {
                                addCode('');
                                console.log('%cresult fail', ';color:#f39c12');
                            }

                        },
                        error: function (xhr, type, errorThrown) {
                            //异常处理；
                            console.log('%csubmit fail!', ';color:#dd4b39');
                            console.log();
                            console.log("type:" + type + ",readyState:" + xhr.readyState + ",status:" + xhr.status);
                            console.log("url:" + form_action);
                            console.log("data:" + form_data);
                            layer.close(loadT);
                            layer.msg('访问错误,代码' + xhr.status, {icon: 2});
                        }
                    }
                );
                return false;
            }
        );
    });

    function addCode(code) {
        //$('#code').html(code);
        $('#code').val(code);
    }


</script>

{/block}