package user

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.User) {
    @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 for="email" class="layui-form-label">邮箱</label>
                                    <div class="layui-input-inline">
                                        if item.ID > 0 {
                                        <input type="text" id="email" name="email" value={ item.Email } lay-verify="required"
                                            autocomplete="off" readonly placeholder="请输入邮箱" class="layui-input" />
                                        } else {
                                        <input type="text" id="email" name="email" value={ item.Email } lay-verify="required"
                                            autocomplete="off" placeholder="请输入邮箱" class="layui-input" />
                                        }
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-form-label">部门</div>
                                    <div class="layui-input-inline" style="width:300px;">
                                        <ul id="departTree" class="dtree organizationTree"></ul>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-form-label">角色</div>
                                    <div class="layui-input-inline" style="width:300px;">
                                        <ul id="roleTree" class="dtree organizationTree"></ul>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="username" class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="username" name="username" value={ item.Username }
                                            lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="password" class="layui-form-label">密码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="password" name="password" lay-verify="required"
                                            value="" autocomplete="off" placeholder="请输入密码"
                                            class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">修改密码</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" name="change_password" lay-skin="switch" lay-text="是|否"
                                            title="是|否">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">头像</label>
                                    <div class="layui-input-inline">
                                        @component.Upload(item.Avatar)
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="gender" class="layui-form-label">性别</label>
                                    <div class="layui-input-inline">
                                        <select id="gender" name="gender">
                                            if item.Gender == 0 {
                                                <option value="0" selected>未知</option>
                                                <option value="1">男</option>
                                                <option value="2">女</option>
                                            } else if item.Gender == 1 {
                                                <option value="0">未知</option>
                                                <option value="1" selected>男</option>
                                                <option value="2">女</option>
                                            } else if item.Gender == 2 {
                                                <option value="0">未知</option>
                                                <option value="1">男</option>
                                                <option value="2" selected>女</option>
                                            }
                                        </select>
                                    </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>

                            <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.User) {
    {{ 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();
            getRoleTree();

            // 表单提交
            form.on('submit(save)', function (data) {
                $.ajax({
                    url: '/system/user/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: 'department_id',
                            initValue: ['{{ item.DepartmentID }}'],
                            tree: {
                                show: true,
                                //非严格模式
                                strict: false,
                                //默认展开节点的数组, 为 true 时, 展开所有节点
                                expandedKeys: [1],
                            },
                            on: function (data) { },
                        });
                    },
                    error: function (err) {
                        // 处理请求错误
                        console.log('请求出错：', err);
                    }
                });
            }

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