{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .manage-select {
        position: absolute;
        top: 135px;
    }
    .layui-unselect.layui-form-radio.layui-form-radioed i:after{
        width: 0px;
        height: 0px;
    }
    .layui-btn-primary{height: 32px; line-height: 32px; position: absolute; right: 1px; top: 1px; border-width: 0; border-left-width: 1px;}
</style>
{/block}
{block name="main"}
<div class="layui-form">

    {include file="app/shop/view/member/select_member.html" /}
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <span class="card-title">添加经理</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>登录用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" autocomplete="off" lay-verify="required"  class="layui-input len-mid">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>登录密码：</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" autocomplete="off"  class="layui-input len-mid">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="real_name" value="{$reg_info.real_name??''}" lay-verify="required" autocomplete="off" class="layui-input len-long">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>联系电话：</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" value="{$reg_info.mobile??''}" lay-verify="required|phone" autocomplete="off" class="layui-input len-long">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>等级：</label>
            <div class="layui-input-inline len-mid">
                <select name="level_id" lay-verify="required">
                    <option value="">请选择</option>
                    {volist name="$level_list" id="level"}
                    <option value="{$level.level_id}">{$level.level_name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="word-aux">员工获得奖励收益根据此等级佣金比例决定</div>
        <div class="layui-form-item">
            <label class="layui-form-label">主管领导：</label>
            <div class="layui-input-inline">
                <input type="hidden" name="manage_id">
                <input type="text" name="manage_name" disabled class="layui-input len-mid">
            </div>
            <button class="layui-btn layui-btn1" onclick="addManage()">主管</button>
        </div>
    </div>
    <div class="form-row">
        <button class="layui-btn bg-color" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="addManage">
    <div class="layui-form">
        <div class="layui-input-inline inline">
            <input type="text"  name="keyword_search" placeholder="请输入主管名称" autocomplete="off" class="layui-input ">
            <button type="button" class="layui-btn layui-btn-primary manage-select"  lay-filter="search" lay-submit>
                <i class="layui-icon"></i>
            </button>
        </div>
        <table id="manage_list" lay-filter="manage_list"></table>
    </div>
</script>
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script>

    layui.use(['form', 'laytpl','table','laypage'], function () {
        laytpl = layui.laytpl;
        form = layui.form;
        laypage = layui.laypage;
        table = layui.table;
        repeat_flag = false;
        form.render();
        /**
         * 监听提交
         */
        form.on('submit(save)', function (data) {
            if (repeat_flag) return;
            repeat_flag = true;
            data.field.level_name = $("select[name=level_id] option:selected").text();
            $.ajax({
                dataType: 'JSON',
                type: 'POST',
                url: ns.url("saas://shop/manage/adduser"),
                data: data.field,
                success: function (res) {
                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title: '操作提示',
                            btn: ['确定'],
                            yes: function () {
                                location.href = ns.url("saas://shop/manage/lists")
                            }
                        })
                    } else {
                        repeat_flag = false;
                        layer.msg(res.message);
                    }
                }
            });
        });
    });
    function datePick(date_num,event_obj){
        $(".date-picker-btn").removeClass("selected");
        $(event_obj).addClass('selected');
        $("input[name=expire_time]").val(date_num);
    }
    function back() {
        location.href = ns.url("saas://shop/manage/lists")
    }
    var add_attr_radioState = 0;
    var add_attr_radioState2 = 0;
    function addManage() {
        var add_attr = $("#addManage").html();
        let _this = this;
        form.on('radio(layfenxiaoid)', function(obj){
            new_fenxiao_id = obj.value;
            _this.add_attr_radioState = obj.value;
            var _title = ($(this).data('index'));
            $("input[name=manage_id]").val(obj.value);
            $("input[name=manage_name]").val(_title);
        });
        laytpl(add_attr).render({}, function(html) {
            add_attr_index = layer.open({
                title: '选择主管',
                skin: 'layer-tips-class',
                type: 1,
                area: ['1000px', '650px'],
                content: html,
                btn:["保存","返回"],
                yes: function(){
                    layer.close(add_attr_index);
                }
            });
        });
        //展示已知数据
        table = new Table({
            elem: '#manage_list',
            url: ns.url("saas://shop/manage/lists"),
            cols: [
                [{
                    width: "20%",
                    title: '主管选择',
                    unresize: 'false',
                    templet: function(data) {
                        var html = '';
                        if(data.id == Number(add_attr_radioState)){
                            html += `
								<div>
								<input type="radio"  name="layTableRadioc" checked = true  value="${data.id}"  data-index="${data.real_name}" lay-type="layTableRadio" lay-filter="layfenxiaoid">
								</div>
							`;
                        }else{
                            html += `
								<div>
								<input type="radio" name="layTableRadioc" value="${data.id}"  data-index="${data.real_name}" lay-type="layTableRadio" lay-filter="layfenxiaoid">
								</div>
							`;
                        }
                        return html;
                    }
                }, {
                    title: '主管姓名',
                    width: '50%',
                    unresize: 'false',
                    field: 'real_name',
                }, {
                    field: 'level_name',
                    title: '等级',
                    unresize: 'false',
                    width: '30%',
                },
                ]
            ],
        });
        /**
         * 搜索功能
         */
        form.on('submit(search)', function (data) {
            table.reload({
                page: {
                    curr: 1
                },
                where: data.field
            });
        });
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $(".manage-search").trigger("click");
            }
        });
    }
</script>
{/block}