<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑字段 - {{ $table }}</title>
    <link rel="stylesheet" href="{{ asset('CmsProUi/component/pear/css/pear.css') }}">
    <link rel="stylesheet" href="{{ asset('CmsProUi/font-awesome/4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/admin.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/variables.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/reset.css') }}">
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body" style="padding:20px;">
            <form class="layui-form" lay-filter="editFieldForm">
                <input type="hidden" id="OldName" name="old_name" value="">
                <div class="layui-form-item">
                    <label class="layui-form-label">字段名</label>
                    <div class="layui-input-block">
                        <input type="text" id="Name" name="name" lay-verify="required" placeholder="请输入字段名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline" style="width:150px;">
                        <select id="Type" name="type" lay-filter="FieldType" lay-verify="required">
                            <option value="int">INT</option>
                            <option value="varchar">VARCHAR</option>
                            <option value="text">TEXT</option>
                            <option value="longtext">LONGTEXT</option>
                            <option value="date">DATE</option>
                            <option value="datetime">DATETIME</option>
                            <option value="timestamp">TIMESTAMP</option>
                            <option value="decimal">DECIMAL</option>
                            <option value="json">JSON</option>
                            <option value="bigint">BIGINT</option>
                            <option value="tinyint">TINYINT</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" id="Length" name="length" placeholder="长度" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">默认值</label>
                    <div class="layui-input-inline" style="width:150px;">
                        <select id="Default" name="default" lay-filter="DefaultValue">
                            <option value="NONE">无</option>
                            <option value="USER_DEFINED">自定义</option>
                            <option value="NULL">NULL</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" id="DefaultValBox" style="width:150px;display:none;">
                        <input type="text" id="DefaultVal" name="default_val" placeholder="默认值" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" id="Remark" name="remark" placeholder="请输入备注" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">位置</label>
                    <div class="layui-input-block">
                        <select name="after_field">
                            <option value="">不移动</option>
                            @foreach($columns as $col)
                            <option value="{{ $col['Field'] }}">{{ $col['Field'] }} 之后</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:center;margin-top:20px;">
                    <button class="layui-btn" lay-submit lay-filter="submitEdit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
    </div>

    <script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
    <script src="{{ asset('CmsProUi/component/pear/pear.js') }}"></script>
    <script>
        layui.use(['form', 'jquery'], function() {
            var form = layui.form;
            var $ = layui.jquery;

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                statusCode: {
                    401: function() {
                        layer.msg('登录已过期，请重新登录', {icon: 2, time: 1500}, function() {
                            window.location.href = '/admin/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                        });
                    }
                }
            });

            var tableName = '{{ $table }}';
            var API = '/api/admin/database/' + tableName;

            form.on('select(DefaultValue)', function(data) {
                if (data.value === 'USER_DEFINED') {
                    $('#DefaultValBox').show();
                } else {
                    $('#DefaultValBox').hide();
                }
            });

            form.on('submit(submitEdit)', function(data) {
                $.post(API + '/edit-field', data.field, function(res) {
                    if (res.code === 0) {
                        layer.msg(res.message, {icon:1});
                        setTimeout(function() {
                            var idx = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(idx);
                        }, 500);
                    } else {
                        layer.msg(res.message, {icon:2});
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>
