@using WX.CRM.WebHelper
@{
    ViewBag.Title = "EmployeeEmpowerment";
    Layout = "~/Views/Shared/_content.cshtml";
}
<div class="mvctool">
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="Other4">
        <span class="csicon2 icon-details"></span>
        <span class="csicontitle">获取软件用户</span>
    </button>
    @Html.Action("ToolBar", "Control", ViewBag.ToolBar as ToolBar)
</div>
<div class="bas_datagrid" style="padding:20px">
    <form class="layui-form selftopwhere" id="mytoolbar" style="display:flex">
        <div class="form-item w30" style=" display: flex;">
            @Html.Action("UserSSOComBox", "Control", new { currentRight = WX.CRM.WebHelper.InitRights.CONST_员工权限管理 })
        </div>
        <div class="form-item">
            工号：
            <div class="layui-inline">
                <input type="text" name="eid" style="width:120px" />
            </div>
        </div>
        <div class="form-item">
            姓名：
            <div class="layui-inline">
                <input type="text" name="name" style="width:120px" />
            </div>
        </div>
        <input class="layui-btn layui-btn-sm layui-btn-ok" style="margin-left:10px" id="search" type="button" value="查询" />
    </form>
    <div id="curEmpower" style="display: none;padding:30px;justify-content:center">
        <div id="curDetail"></div>
    </div>
    <div id="bindPage" style="display: none;padding:30px;justify-content:center">
        <form class="layui-form" action="form.html">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机号</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="tel" name="phone" id="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                    </div>
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <button id="get_vercode" name="get_vercode" type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" id="vercode" name="vercode" autocomplete="off" lay-affix="clear" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
    <div id="bacthAddPage" style="display: none;padding:20px">
        <div id="showEmployee"></div>
        <div style="margin-top:20px">
            时长：
            <div class="layui-inline">
                <select id="duration" name="duration" style="height:35px;">
                    <option value="180">180天</option>
                    <option value="30">30天</option>
                    <option value="60">60天</option>
                    <option value="90">90天</option>
                    <option value="120">120天</option>
                    <option value="150">150天</option>
                </select>
            </div>
        </div>
        <table class="layui-hide" id="tabl2" lay-filter="tabl2"></table>
        <input class="layui-btn layui-btn-sm layui-btn-ok" id="SetEmpowerment" type="button" value="开通产品" />
    </div>
</div>
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>
<script type="text/javascript">

    layui.use(['table', 'form', 'util'], function () {
        var table = layui.table;
        var form = layui.form;
        var util = layui.util;
        var where = $("#mytoolbar").serializeFormJSON();



        // 校验手机
        $("#get_vercode").on('click', function (othis) {
            var phone = $('#phone').val();
            var regex = /^1[3456789]\d{9}$/; // 11位数字

            if (!regex.test(phone)) {
                layer.msg('请输入正确的电话号码！');
                return;
            }
            // 验证通过
            sendCode(phone);
        });
        // 提交绑定
        form.on('submit(sub)', function (data) {
            var field = data.field; // 获取表单字段值

            var datas = table.checkStatus("testReload").data;
            var curEmpolyee = datas[0];
            $.r_ajax({
                url: "/EmployeeEmpowerment/SoftEmployeeBindAdd",
                type: "Post",
                data: { to_by_eid: curEmpolyee.employee_id, resid: curEmpolyee.resid, phone: field.phone, verify_code: field.vercode },
                dataType: "JSON",
                loading: true,
                success: function (data) {
                    if (data.code == 0) {
                        layer.alert(data.message, function (index) {
                            $('#phone').val("");
                            $('#vercode').val("");
                            $("#bindPage").css("display", "none")
                            ReloadEmployeeTable();
                            if (bindPageIndex != null) layer.close(bindPageIndex);
                            bindPageIndex = null;
                            layer.close(index);
                        });
                    } else {
                        layer.alert(data.message);
                    }

                }
            });

            return false; // 阻止默认 form 跳转
        });
        var bindPageIndex = null;
        // 定义一个变量，用于存储验证码发送状态
        let isCodeSent = false;

        // 点击发送验证码按钮的事件处理函数
        function sendCode(phone) {
            // 如果验证码已发送，则不执行后续逻辑
            if (isCodeSent) {
                return;
            }
            // 发送验证码的逻辑
            $.r_ajax({
                url: "/EmployeeEmpowerment/SendVerificationCode",
                type: "Post",
                data: { phoneNumber: phone },
                dataType: "JSON",
                loading: true,
                success: function (data) {
                    if (data.code == 0) {
                        layer.alert('发送成功');
                        // todo: 保存发送时候的手机号码，

                    } else {
                        layer.alert(data.message);
                    }
                }
            });

            // 设置验证码已发送状态为 true
            isCodeSent = true;

            // 禁用发送验证码按钮
            disableSendButton();

            // 倒计时60秒
            let countDown = 60;
            const countDownTimer = setInterval(() => {
                // 更新倒计时文本
                updateCountDownText(countDown);

                // 倒计时结束，清除定时器，并恢复发送验证码按钮状态
                if (countDown === 0) {
                    clearInterval(countDownTimer);
                    enableSendButton();
                    isCodeSent = false;
                }

                countDown--;
            }, 1000);
        }

        // 禁用发送验证码按钮
        function disableSendButton() {
            const sendButton = document.getElementById('get_vercode');

            sendButton.disabled = true;
        }

        // 启用发送验证码按钮
        function enableSendButton() {
            const sendButton = document.getElementById('get_vercode');

            sendButton.disabled = false;
            sendButton.innerText = '发送验证码';
        }

        // 更新倒计时文本
        function updateCountDownText(countDown) {
            const sendButton = document.getElementById('get_vercode');
            sendButton.innerText = `重新发送(${countDown}s)`;
        }

        table.render({
            id: 'testReload',//列表别名ID
            elem: '#tabl1',//表ID
            method: 'GET',
            url: "/EmployeeEmpowerment/empowerList",
            cols: [[
                { type: 'checkbox', width: 150 },
                { field: 'sort', title: '序号', width: 150 }
                , { field: 'employee_id', title: '工号', width: 150 }
                , { field: 'employee_name', title: '姓名', width: 150 }
                , { field: 'showPhone', title: '手机号', width: 150 }
                , { field: 'appusername', title: '用户名', width: 160 }
                , {
                    field: 'is_main', title: '账号类型', width: 100, templet: function (b) {
                        return b.is_main == 1 ? '主账号' : '子账号';
                    }
                }
                , { field: 'last_empower_time', title: '最新开通时间', width: 180 }
                , { field: 'operate', title: '操作', templet: '#operateTpl' }

                //, { field: 'productString', title: '产品权限', width: 550 }
            ]],
            //data: [{
            //    sort: 0, eid: 4001, employeeName: '路人甲', phone: '1582****860', appusername:'dn11', productEmpower: '产品名称：擒龙版 权限到期时间：2024/4/20 13:14:13<br/>产品名称：擒龙版 权限到期时间：2024/4/20 13:14:13'
            //}]
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , limits: [10,50]
                //, groups: 5 //只显示 1 个连续页码
            },
            parseData: function (res) { // res 即为原始返回的数据
                if (!res.data) {
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": 0, //解析数据长度
                        "data": [] //解析数据列表
                    };
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.Total, //解析数据长度
                    "data": res.data.Data //解析数据列表
                };
            },
            where: where
        });
        function ReloadEmployeeTable() {
            var where = $("#mytoolbar").serializeFormJSON();
            table.reload('testReload', {
                page: {
                    //curr: 1 //重新从第 1 页开始
                },
                where: where
            });
        }
        $('#mytoolbar #search').on('click', function (data) {
            ReloadEmployeeTable();
        });

        $("#SetEmpowerment").on("click", function () {
            var productList = table.checkStatus("testReload2").data;
            var employeeList = table.checkStatus("testReload").data;
            var formatEmployeeList = [];
            var formatProductList = [];
            if (productList.length == 0) {
                layer.alert("请先选择授权产品！");
                return;
            }
            var productIdString = "";
            var duration = $("#duration").val();

            $.each(employeeList, function (idx, item) {
                formatEmployeeList.push({ employee_id: item.employee_id, resid: item.resid, softusername: item.appusername });
            });
            $.each(productList, function (idx, item) {
                formatProductList.push({ subproductid: item.subproductid, subproductname: item.subproductname, productcode: item.productcode, price: item.price, isEmpower: item.isEmpower, producttype: item.producttype });
            });
            var EmployeeString = JSON.stringify(formatEmployeeList);
            var productString = JSON.stringify(formatProductList);
            var data = { EmployeeString: EmployeeString, productString: productString, duration: duration };
            $.r_ajax({
                url: "/EmployeeEmpowerment/SetEmpowerment",
                type: "Post",
                data: data,
                dataType: "JSON",
                loading: true,
                success: function (data) {
                    if (data.code == 0) {
                        layer.alert('添加成功');
                        table.reload('testReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where: where
                        });
                        table.reload('testReload2', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where: where
                        });
                    } else {
                        layer.alert(data.message);
                    }
                }
            });
        });
        //绑定账号
        $("#Other2").on("click", function () {
            var datas = table.checkStatus("testReload").data;
            if (datas.length == 0) {
                layer.alert('请先选择需要绑定的员工！');
                return;
            } else if (datas.length > 1) {
                layer.alert('只能选择一名员工进行绑定！');
                return;
            }
            var showEmployee = "员工：";
            $.each(datas, function (idx, item) {
                showEmployee += item.employee_id + " " + item.employee_name + ",";
            });
            $("#bindShowEmployee").text(showEmployee);
            layer.open({
                type: 1,
                shade: 0.3,
                area: ['50%', '50%'],
                title: "绑定账号",
                content: $('#bindPage'), // 捕获的元素
                end: function () {
                    $("#phone").val("");
                    $("#vercode").val("");
                },
                success: function (layero, index) {
                    bindPageIndex = index;
                    $("#bindPage").css("display", "flex")
                }
            });


        });

        // 获取软件用户
        $("#Other4").on("click", function () {
            var datas = table.checkStatus("testReload").data;
            if (datas.length == 0) {
                layer.alert('请先选择需要获取的账号！');
                return;
            }
            var UpdateAppusernameList = [];
            for (let index in datas) {
                UpdateAppusernameList.push({ eid: datas[index].employee_id, resid: datas[index].resid });
            }
            var data = { UpdateAppusernameList: JSON.stringify(UpdateAppusernameList) };
            debugger;
            $.r_ajax({
                url: "/EmployeeEmpowerment/UpdateAppusername",
                type: "Post",
                data: data,
                dataType: "JSON",
                loading: true,
                success: function (data) {
                    if (data.code == 0) {
                        layer.alert(data.message);
                        ReloadEmployeeTable();
                    } else {
                        layer.alert(data.message);
                    }
                }

            });


        });


        //解绑
        $("#Other3").on("click", function () {
            var datas = table.checkStatus("testReload").data;
            if (datas.length == 0) {
                layer.alert('请先选择需要解绑的账号！');
                return;
            } else if (datas.length > 1) {
                layer.alert('只能选择一个账号进行解绑！');
                return;
            }
            if (datas[0].is_main == 1) {
                layer.alert('主账号不能解绑！');
                return;
            }
            layer.confirm('确定要解绑该电话及相关软件账号吗？', {
                btn: ['确定', '关闭'] //按钮
            }, function () {
                var curEmpolyee = datas[0];
                var data = { to_by_eid: curEmpolyee.employee_id, resid: curEmpolyee.resid, show_phone: curEmpolyee.showPhone, username: curEmpolyee.appusername };
                $.r_ajax({
                    url: "/EmployeeEmpowerment/SoftEmployeeBindDelete",
                    type: "Post",
                    data: data,
                    dataType: "JSON",
                    loading: true,
                    success: function (data) {
                        if (data.data.json != "") {
                            var result = $.parseJSON(data.data.json);
                            if (result.ret == 0) {
                                var needClose = [];
                                Object.keys(result.moduelData).forEach(item => {
                                    result.moduelData[item].forEach(item2 => {
                                        needClose.push(item2.orderid)
                                    })
                                })
                                needClose = [...new Set(needClose)];
                                var errorMsg = "", each_count = 0, orderids_length = needClose.length;
                                var len = needClose.length;
                                var cur = 0;
                                callApi(cur, len, needClose, curEmpolyee)
                            }
                        }

                        if (data.code == 0) {
                            layer.alert(data.message, function (index) {
                                ReloadEmployeeTable();
                                layer.close(index);
                            });
                        } else {
                            layer.alert(data.message);
                        }
                    }

                });
            }, function () {
                // 点击关闭事件
            });


        });
        function callApi(cur, len, list, curEmpolyee) {
            $.r_post("/Level2/Leve2Order/CloseFreeOrderByEmpower?orderId=" + list[cur] + "&username=" + curEmpolyee.appusername, function (closeRes) {
                cur++;
                if (cur < len) {
                    callApi(cur, len, list, curEmpolyee);
                }
                if (closeRes.type == 1) {
                    if (closeRes.type != 1) {
                        errorMsg += "订单号：" + list[cur] + "，" + closeRes.message + "</br>";
                    }
                }
            }, "json");


        }
        function messageBox5s(title, msg) {
            $.messager.show({
                title: title, msg: msg, timeout: 15000, showType: 'slide', style: {
                    left: '',
                    right: 5,
                    top: '',
                    bottom: -document.body.scrollTop - document.documentElement.scrollTop + 5
                }
            });
        }
        //批量开通产品
        $("#Other1").on("click", function () {
            var datas = table.checkStatus("testReload").data;
            if (datas.length == 0) {
                layer.alert('请先选择需要授权的账号！');
                return;
            }
            var showEmployee = "员工：";
            var errorEmployee = "";
            $.each(datas, function (idx, item) {
                if (!item.appusername) errorEmployee += item.employee_name + " ";
                showEmployee += item.employee_id + " " + item.employee_name + ",";
            });
            if (errorEmployee != "") {
                layer.alert(errorEmployee + '员工未完成软件注册，不可开通权限！');
                return;
            }
            $("#showEmployee").text(showEmployee);

            layer.open({
                type: 1,
                shade: 0.3,
                area: ['90%', '90%'],
                title: "批量开通产品详情",
                content: $('#bacthAddPage'), // 捕获的元素
                end: function () {
                    // layer.msg('关闭后的回调', {icon:6});
                },
                success: function (layero, index) {
                    table.render({
                        id: 'testReload2',//列表别名ID
                        elem: '#tabl2',//表ID
                        url: '/EmployeeEmpowerment/productOfEmpower',
                        method: 'GET',
                        cols: [[
                            { field: 'checked', type: 'checkbox', width: "15%" }
                            , { field: 'subproductname', title: '产品名称', width: "15%" }
                            , { field: 'productcode', title: '产品编码', width: "70%" }
                        ]]
                        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                            , curr: 1 //设定初始在第 5 页
                            //, groups: 5 //只显示 1 个连续页码
                        },
                        parseData: function (res) { // res 即为原始返回的数据
                            return {
                                "code": res.code, // 解析接口状态
                                "msg": res.message, // 解析提示文本
                                "count": res.data.Total, // 解析数据长度
                                "data": res.data.Data, // 解析数据列表
                            };
                        }
                    });
                }
            });


        });
    });
    // 打开当前权限
    function OpenCurEmpower(appusername, resid) {
        layer.open({
            type: 1,
            shade: 0.3,
            area: ['30%', '50%'],
            title: "账号权限",
            content: $('#curEmpower'), // 捕获的元素
            success: function (layero, index) {
                $('#curDetail').html('');
                $.r_ajax({
                    url: "/EmployeeEmpowerment/GetEmpowerByAppuser?username=" + appusername + "&resid=" + resid,
                    type: "Get",
                    data: {},
                    loading: true,
                    success: function (data) {
                        try {
                            if (data == "") $('#curDetail').html('该用户没有任何权限');
                            $(data).appendTo($('#curDetail'))
                        } catch (err){ }
                    }
                });
                $("#curEmpower").css("display", "flex")
            }
        });
    }
</script>
<script type="text/html" id="operateTpl">
    {{# if(d.appusername != null && d.appusername != ""){ }}
    <a href="javascript:OpenCurEmpower('{{d.appusername}}','{{d.resid}}')" class="layui-table-link">查看权限</a>
    {{# } }}
</script>
<style>
    /*    .layui-table-cell {
        height: auto;
        line-height: 28px;
        padding: 0 15px;
        position: relative;
        box-sizing: border-box;
    }*/
</style>