package department

import (
    "context"
    "time"

    "management/internal/erpserver/templ/base"
	"management/internal/pkg/mid"
	"management/internal/erpserver/templ/component"
	"management/internal/erpserver/model/system"
)

templ Edit(ctx context.Context, item *system.Department) {
    @base.Base(ctx, editCss(), editJs(ctx, item)) {
        {{ meuns := mid.GetCurMenus(ctx) }}
        {{ ht := mid.GetHtmlCsrfToken(ctx) }}
        <div class="layui-body layui-bg-gray">
            <div class="layui-card">
                <form class="layui-form">
                    @ht
                    <input type="hidden" id="id" name="id" value= { item.ID } />

                    <div class="layui-tab layui-tab-card">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基础信息</li>
                            <li>其它</li>
                        </ul>

                        <div class="layui-tab-content">
                            <!-- 基础信息 -->
                            <div class="layui-tab-item layui-show">
                                if item.ID > 0 {
                                <div class="layui-form-item">
                                    <div class="layui-form-label">ID</div>
                                    <div class="layui-form-label" style="width:400px;text-align:left;">
                                        { item.ID }
                                    </div>
                                </div>
                                }

                                <div class="layui-form-item">
                                    <label class="layui-form-label">上级</label>
                                    <div class="layui-input-inline" style="width:300px;">
                                        <ul id="departTree" class="dtree organizationTree"></ul>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">名称</label>
                                    <div class="layui-input-inline" style="width:300px;">
                                        <input type="text" id="name" name="name" value={ item.Name } lay-verify="required"
                                            autocomplete="off" placeholder="请输入名称" class="layui-input" />
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label for="status" class="layui-form-label">状态标识</label>
                                    <div class="layui-input-inline">
                                        <select id="status" name="status">
                                            if item.Status == 0 {
                                                <option value="0" selected>正常</option>
                                                <option value="-1">删除</option>
                                            } else if item.Status == -1 {
                                                <option value="0">正常</option>
                                                <option value="-1" selected>删除</option>
                                            }
                                        </select>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label for="sort" class="layui-form-label">排序</label>
                                    <div class="layui-input-inline">
                                        <input type="number" id="sort" name="sort" value={ item.Sort } lay-affix="number"
                                            min="1" class="layui-input" />
                                    </div>
                                </div>
                            </div>

                            <!-- 其它 -->
                            <div class="layui-tab-item">
                                if item.ID > 0 {
                                <div class="layui-form-item">
                                    <div class="layui-form-label">创建时间</div>
                                    <div class="layui-form-label" style="width:400px;text-align:left;">
                                        { item.CreatedAt.Format(time.DateTime) }
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-form-label">更新时间</div>
                                    <div class="layui-form-label" style="width:400px;text-align:left;">
                                        { item.UpdatedAt.Format(time.DateTime) }
                                    </div>
                                </div>
                                }
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item layui-fixbar btn-fixbar-box">
                        <div class="layui-input-block">
                            @component.SubmitBtn(meuns, "save")
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-on="close">
                                <i class="layui-icon layui-icon-close"></i>关闭
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    }
}

templ editCss() {
    <style>
        .layui-body {
            padding: 15px;
            left: 0;
        }
    </style>
}

templ editJs(ctx context.Context, item *system.Department) {
    {{ token := mid.GetCsrfToken(ctx) }}
    <script>
        layui.use(['jquery', 'form', 'xmSelect', 'util'], function () {
            let $ = layui.jquery;
            let form = layui.form;
            let xmSelect = layui.xmSelect;
            let util = layui.util;

            getDepartmentTree();

            // 表单提交
            form.on('submit(save)', function (data) {
                $.ajax({
                    url: '/system/department/save',
                    type: 'post',
                    dataType: 'json',
                    data: data.field,
                    success: function (result) {
                        if (result.success) {
                            layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前页
                                parent.layui.table.reload("tablelist", {
                                    page: { curr: 1 },
                                });
                            });
                        } else {
                            parent.layer.msg(result.msg, { icon: 2 })
                        }
                    }
                });

                return false;
            });

            // 事件绑定
            util.on("lay-on", {
                "close": function () {
                    window.parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            });

            function getDepartmentTree() {
                $.ajax({
                    url: "/system/department/data?type=xm_select_tree",
                    type: 'post',
                    dataType: 'json',
                    headers: { 'X-CSRF-Token': '{{ token }}' },
                    success: function (res) {
                        xmSelect.render({
                            el: '#departTree',
                            // 工具栏
                            toolbar: {
                                show: true
                            },
                            radio: true,
                            clickClose: true,
                            tips: '请选择父级',
                            filterable: true,
                            data: res,
                            name: 'parent_id',
                            initValue: ['{{ item.ParentID }}'],
                            tree: {
                                show: true,
                                //非严格模式
                                strict: false,
                                //默认展开节点的数组, 为 true 时, 展开所有节点
                                expandedKeys: [1],
                            },
                            on: function (data) { },
                        });
                    },
                    error: function (err) {
                        // 处理请求错误
                        console.log('请求出错：', err);
                    }
                });
            }
        });
    </script>
}