@{ ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_form.cshtml";
}
@{
    string isok = ViewBag.isOk == null ? "1" : Convert.ToString(ViewBag.isOk);
}
<style>
    #qiweiTable {
        width: 90%;
        margin: 20px;
    }

    .outuserImg {
        width: 50px;
    }

    .touserli {
        display: flex;
        margin-top: 10px;
    }

    .touserli-p {
        width: 50%;
    }

    .touserli-u {
        width: 100px;
    }

    .touserli-d {
        cursor: pointer;
        color: red;
        font-family: cursive;
        font-size: 20px;
    }

    .fromuser-ul {
        margin-left: 110px;
        width: 40%;
    }

    .touser-ul {
        margin-left: 110px;
        width: 60%;
    }

    .deptli {
        padding: 2px 5px;
        background: #5FB878;
        border-radius: 2px;
        color: #fff;
        display: block;
        margin: 2px 5px 2px 0;
        float: left;
    }

    .dept-p {
        float: left;
    }

    .flexitemCount {
        float: left;
    }

    .dept-p {
        padding: 2px;
    }

    .del-i {
        cursor: pointer;
        color: red;
        font-family: cursive;
        font-size: 20px;
    }

    .layui-form-label {
        text-align: left
    }

    .flexItem {
        display: flex;
    }

    .leftdiv {
        line-height: 40px;
        width: 30%;
        padding-left: 50px;
    }

    .rightdiv {
        width: 50%;
        line-height: 40px;
    }

    .layeditConfirmBtn {
        width: 64px;
        height: 22px;
        background: inherit;
        background-color: rgba(22, 155, 213, 1);
        border: none;
        border-radius: 5px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        margin-left: 110px;
        color: #FFFFFF;
        cursor: pointer;
    }
</style>
<script>
        var isOk = "@Html.Raw(isok)";
</script>
<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<div style="margin-top:40px">
    <div class="layui-form-item">
        <label class="layui-form-label">
            企业微信
        </label>
        <div class="layui-input-block my_form_iterm">
            <div id="CORPIDS" style="width: 50%;"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            人群包
        </label>
        <div class="layui-input-block my_form_iterm">
            <div id="Groupid" style="width: 50%;"></div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:20px;">
        <label class="layui-form-label">
            转移成员
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="ChoosePeople()" style="color: #169BD5">选择人员</a>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:20px;">
        <ul class="fromuser-ul">
        </ul>
    </div>
    <div class="layui-form-item" style="margin-top:20px;">
        <div class="layui-form-label">
            <input onclick="SearchCount()" type="button" class="layeditConfirmBtn" value="查询">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            用户数
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="openOutUser()" style="color: #169BD5;" id="allCount">0</a>
        </div>
        <label class="layui-form-label" style="width: 100px;">
            可转移用户数
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="openuseUser()" style="color: #169BD5;" id="userCount">0</a>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            关系数
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="openrelationUser()" style="color: #169BD5;" id="relationCount">0</a>
        </div>
        <label class="layui-form-label" style="width: 100px;">
            已转移关系数
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="opendoneUser()" style="color: #169BD5;" id="doneCount">0</a>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
        </label>
        <div class="layui-form-label" style="width:50%">
            <div id="u7" class="text" style="visibility: visible;">
                <p><span>在职继承限制：90自然日内在职成员的每位客户仅可被转接2次；离职继承则无此限制</span></p><p><span>接替成功后消耗次数，接替失败则保留在原客服手里</span></p><p><span>如果客户曾经被接替成员转移给其他成员，其他成员再次将此客户转移给此接替成员时，不会触发添加企业客户事件。</span></p><p><span><br></span></p>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="margin-top:20px;">
        <label class="layui-form-label">
            接替成员
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="ChoosePeople(1)" style="color: #169BD5;">选择人员</a>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:20px;">
        <ul class="touser-ul">
        </ul>
    </div>
    <div class="layui-form-item" style="margin-top:20px;">
        <label class="layui-form-label">
            分配数量
        </label>
        <div class="layui-form-label">
            <a href="javascript:void(0);" onclick="setting()" style="color: #169BD5;">设置</a>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block my_form_iterm">
            <button class="layui-btn layui-btn-ok" lay-submit lay-filter="formDemo">开始流转</button>
        </div>
    </div>
</div>
<div id="setting-box" style="display:none">
    <div class="layui-form flexUser">
    </div>
    <div class="layui-form-item" style="padding:15px;">
        <input type="button" class="layui-btn" onclick="SubAvgUser()" value="确定" />
    </div>
</div>
<div id="outuser-box" style="display:none">
    <div class="layui-form">
        <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm" id="qiweiTable">
        </table>
    </div>
</div>
@if (isok == "0")
{
    <div class="layui-form-item">
        <label class="layui-form-label erro_msg">错误提示：</label>
        <div class="layui-input-block my_form_iterm erro_msg">
            @Html.Raw(ViewBag.Msg)
        </div>
    </div>
}
<script>
    var cropOption, groupOption;
    var fromUser = [];
    var toUser = [];
    var outuserList = [];
    var relationList = [];
    var doneList = [];
    var useList = [];
        var flowCount = 0;
        var deptId = 0;
    var apiPath = '@ViewBag.apiPath';
    layui.use('form', function () {
        var form = layui.form;
        var layer = layui.layer;
        var type = "@Html.Raw(ViewBag.type)";
        cropOption = renderSelectChannel([]);
        groupOption = renderSelectGroup([]);
        //监听提交
        form.on('submit(formDemo)', function (data) {
            //todo
            var postdata = {
                appid: getCorp(),
                groupid: getGroup(),
                gname: groupOption.getValue('nameStr'),
                fromUser: JSON.stringify(fromUser),
                toUser: JSON.stringify(toUser),
                total: $('#userCount').text(),
                deptId: deptId
            }
            console.log(JSON.stringify(postdata));

            if (isOk == "1") {
                $.ajax({
                    type: "POST",
                    url: "SubmitResourceTask",
                    data: JSON.stringify(postdata),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (da) {
                        if (da.result == true) {
                            layer.msg('操作成功', { icon: 1 });
                            parent.reloadResourceIndex();
                            //document.getElementById('wxReourceIndex').contentWindow.location.reload(true);

                        } else {
                            layer.msg(da.retmsg, { icon: 2 });
                            return false;
                        }
                    },
                    error: function () {
                        layer.msg('操作失败！', { icon: 2 });
                    }
                });
                return false;
            } else {
                layer.msg('系统错误!请关闭编辑页重试！', { icon: 2 });
                return false;
            }
        });
        //各种基于事件的操作，下面会有进一步介绍
    });
    function renderSelectChannel(check) {
        var allChannel = @Html.Raw(ViewBag.AllChannel);
        var optionsChannel = {
            el: '#CORPIDS',
            name: 'CORPIDS',//表单的name属性
            tips: '请选择企业微信',
            //layVerify: 'required',
            toolbar: {//工具条,全选,清空,反选,自定义
                show: true,
                list: [
                    'CLEAR'
                ]
            },
            data: allChannel,
            initValue: check,
            radio: true,//单选
            on: function (data) {
                $('#allCount').text(0);
                $('#userCount').text(0);
                $('#relationCount').text(0);
                $('#doneCount').html(0);
                outuserList = [];
                relationList = [];
                doneList = [];
                userList = [];
                toUser = [];
                fromUser = [];
                $(".fromuser-ul").empty();
                initToUser();
            },
        };
        var selectChannel = xmSelect.render(optionsChannel);
        return selectChannel;
    }
    function renderSelectGroup(check) {
        var allChannel = @Html.Raw(ViewBag.AllGroup);
        var optionsChannel = {
            el: '#Groupid',
            name: 'Groupid',//表单的name属性
            tips: '请选择人群包',
            toolbar: {//工具条,全选,清空,反选,自定义
                show: true,
                list: [
                    'CLEAR'
                ]
            },
            data: allChannel,
            initValue: check,
            radio: true,//单选
            on: function (data) {
                if (data.arr.length > 0) {
                    deptId = data.arr[0].deptId;
                } else {
                    deptId = 0;
                }

                $('#allCount').text(0);
                $('#userCount').text(0);
                $('#relationCount').text(0);
                $('#doneCount').html(0);
                outuserList = [];
                relationList = [];
                doneList = [];
                useList = [];
                for (var i = 0; i < toUser.length; i++) {
                    toUser[i].flowCount = 0;
                }
                initToUser();
            },
        };
        var selectChannel = xmSelect.render(optionsChannel);

        return selectChannel;
    }
    function getCorp() {
        return cropOption.getValue('valueStr');
    }

    function getGroup() {
        return groupOption.getValue('valueStr');

    }
    function ChoosePeople(type) {
        var corpid = getCorp();
        if (corpid == '') {
            layer.msg('请选择企业微信', { icon: 2 });
            return;
        }
        winindex = layer.open({
            type: 2,
            content: '/MyWork/Choose?corpid=' + corpid +'&type='+type,
            area: ['80%', '800px']
        });
    }

    //删除老师
    function delDept(userid) {

        var index = FindUserIdIndex(userid);
        if (index != -1) {
            fromUser.splice(index, 1);
            $(".fromuser-ul li[userid='" + userid + "']").remove();
        }
        $('#allCount').text(0);
        $("#userCount").text(0);
        $('#relationCount').text(0);
        $('#doneCount').html(0);
    }
    function FindUserIdIndex(userid) {
        for (var i = 0; i < fromUser.length; i++) {
            if (fromUser[i].userid == userid) {
                return i;
            }
        }
        return -1;
    }
    //提交老师选择
    function SubEmpolyee(uidata) {
        for (var i = 0; i < uidata.length; i++) {
            var user = uidata[i];
            var userid = user.userid;
            var index = FindUserIdIndex(userid);
            if (index != -1) {
                continue;
            } else { //新事业部
                fromUser.push({ userid: userid, eid: user.eid, ename: user.ename });
                $(".fromuser-ul").append("<li class='deptli' userid='" + userid + "'><p class='dept-p'>" + user.userid + "(" + user.eid+")"
                    + "</p><i class='del-i' onclick='delDept(\"" + userid
                    + "\")'>x</i></li>");
            }
        }
        layer.close(winindex);
    }
    function delToUser(userid) {
        var index = FindToUserIdIndex(userid);
        if (index != -1) {
            toUser.splice(index, 1);

        }
        initToUser();
        avg(flowCount);
        initSetting();
    }
    function FindToUserIdIndex(userid) {

        for (var i = 0; i < toUser.length; i++) {
            if (toUser[i].userid == userid) {
                return i;
            }
        }
        return -1;
    }
    function SubToEmpolyee(uidata) {
        var oldCount = toUser.length;
        var useridList = [];
        for (var i = 0; i < toUser.length; i++)
        {
            if (useridList.indexOf(toUser[i].userid) < 0) {
                useridList.push(toUser[i].userid);
            }
        }
        for (var i = 0; i < uidata.length; i++) {
            var user = uidata[i];
            if (useridList.indexOf(user.userid) < 0) {
                useridList.push(user.userid);
            }
        }
        if ($('#userCount').text() < useridList.length) {
            layer.msg('选择转移成员不能大于总分配数', { icon: 2 });
            return;
        }
        for (var i = 0; i < uidata.length; i++) {
            var user = uidata[i];
            var userid = user.userid;
            var index = FindToUserIdIndex(userid)
            if (index != -1) {
                continue;
            } else { //新事业部
                toUser.push({ userid: userid, eid: user.eid, ename: user.ename, flowCount:0 });
            }
        }
        initToUser();
        layer.close(winindex);
    }
    function SearchCount() {
        $('#iframe').attr('src', $('#iframe').attr('src'));
            var corpid = getCorp();
            if (corpid == '') {
                layer.msg('请选择企业微信', { icon: 2 });
                return;
            }
            var subUser = "";
            for (var i = 0; i < fromUser.length; i++) {
                subUser += fromUser[i].userid+","
            }
            subUser = subUser.substring(0, subUser.length - 1);
            if (subUser == "") {
                layer.msg('请选择要转移的对象', { icon: 2 });
                return;
            }
            var group = getGroup();
           @* if (group == '') {
                layer.msg('请选择人群包', { icon: 2 });
                return;
            }*@
            $.ajax({
                type: "Get",
                url: apiPath + '/Api/WeWorkResource/KFResourceCountByCrm?groupids=' + group + '&userids=' + subUser + '&appid=' + corpid,
                dataType: "json",
                contentType: "application/json",

                success: function (da) {

                    if (da.code == 0) {
                        $('#allCount').text(da.data.total);
                        $('#userCount').html(da.data.useCount);
                        $('#relationCount').html(da.data.relationCount);
                        $('#doneCount').html(da.data.doneCount);
                        outuserList = da.data.data;
                        relationList = da.data.resRelationModel;
                        doneList = da.data.doneModel;
                        useList = da.data.useData;
                        initToUser();
                        layer.alert("操作成功！");
                    }
                    else if (da.code == 10001) {
                        //退出登录
                        layer.alert("获取资源数失败！");
                    }
                },
                error: function () {
                    layer.msg('失败！', { icon: 2 });
                }
            });
    }
    function setting() {
        if (toUser.length == 0) {
            layer.msg('请先选择分配人员', { icon: 2 });
            return;
        }
        var userCount = $('#userCount').text();
        if (userCount <= 0) {
            layer.msg('没有可分配的数量', { icon: 2 });
            return;
        }
        initSetting();
        winindex = layer.open({
            title: '资源分配数量',
            type: 1
            , content: $('#setting-box')
            , area: ['600px', '450px']
        });
    }
    function avg(value) {
        var count = toUser.length;
        var avgCount = Math.floor(value / toUser.length);
        var leaveCount = value - (avgCount * count);
        for (var i = 0; i < toUser.length; i++) {
            var user = toUser[i];
            if (i < leaveCount) {
                user.flowCount = avgCount + 1;
                $('#to_' + user.userid).val(avgCount + 1);
            } else {
                $('#to_' + user.userid).val(avgCount);
                user.flowCount = avgCount;
            }
        }
        GetSumFlexUserCount();
    }
    function initToUser() {
        $(".touser-ul").empty();
        var value = $("#userCount").text();
        var count = toUser.length;
        var avgCount = Math.floor(value / toUser.length);
        var leaveCount = value - (avgCount * count);
        for (var i = 0; i < toUser.length; i++) {
            var user = toUser[i];
            if (i < leaveCount) {
                user.flowCount = avgCount + 1;
                $('#to_' + user.userid).val(avgCount + 1);
            } else {
                $('#to_' + user.userid).val(avgCount);
                user.flowCount = avgCount;
            }
            $(".touser-ul").append("<li class='deptli' userid='to_" + user.userid + "'><p class='dept-p'>" + user.userid + "(" + user.eid + ")<p class='dept-p flexitemCount'>(" + user.flowCount +")"
                + "</p><i class='del-i' onclick='delToUser(\"" + user.userid
                + "\")'>x</i></li>");
        }
    }
    function RefreshToUser() {
        $(".touser-ul").empty();
        for (var i = 0; i < toUser.length; i++) {
            var user = toUser[i];
            $(".touser-ul").append("<li class='deptli' userid='to_" + user.userid + "'><p class='dept-p'>" + user.userid + "(" + user.eid + ")<p class='dept-p flexitemCount'>(" + user.flowCount + ")"
                + "</p><i class='del-i' onclick='delToUser(\"" + user.userid
                + "\")'>x</i></li>");
        }
    }
    function SubAvgUser() {
        debugger
        var sum = 0;
        var userCount = $('#userCount').text();
        if (flowCount > userCount) {
            layer.msg('总数不能大于可分配资源数', { icon: 2 });
            return;
        }
        RefreshToUser();
        layer.close(winindex);
    }
    function FindOutUserIdIndex(userid) {
        for (var i = 0; i < outuserList.length; i++) {
            if (outuserList[i]._appuserid == userid) {
                return i;
            }
        }
        return -1;
    }
    function openrelationUser() {
        $("#qiweiTable tbody").empty();
        $("#qiweiTable").append("<tr><th>头像</th ><th>昵称</th><th>企微账号</th><th>客服</th><th>线索</th></tr >");
        for (var i = 0; i < relationList.length; i++) {
            var outuser = relationList[i];
            $("#qiweiTable tbody").append("<tr><td><img class='outuserImg' src='" + outuser._headimgurl + "'</td><td>" + outuser._nickname + "</td><td>"
                + outuser._appuserid + "<td>" + outuser._fromuserid + "</td><td><a href='javascript: showSaleLine(\"" + outuser._appid + "\",\"" + outuser._appuserid + "\")' style='color: #169BD5'>查看</a></td></tr>");
        }
        winindex = layer.open({
            title: '好友关系',
            type: 1
            , content: $('#outuser-box')
            , area: ['700px', '550px']
        });
    }
    function openuseUser() {
        $("#qiweiTable tbody").empty();
        $("#qiweiTable").append("<tr><th>头像</th ><th>昵称</th><th>企微账号</th><th>线索</th></tr >");
        for (var i = 0; i < useList.length; i++) {
            var outuser = useList[i];
            $("#qiweiTable tbody").append("<tr><td><img class='outuserImg' src='" + outuser._headimgurl + "'</td><td>" + outuser._nickname + "</td><td>"
                + outuser._appuserid +"</td><td><a href='javascript: showSaleLine(\"" + outuser._appid + "\",\"" + outuser._appuserid + "\")' style='color: #169BD5'>查看</a></td></tr>");
        }
        winindex = layer.open({
            title: '好友关系',
            type: 1
            , content: $('#outuser-box')
            , area: ['700px', '550px']
        });
    }
    function opendoneUser() {
        $("#qiweiTable tbody").empty();
        $("#qiweiTable").append("<tr><th>头像</th ><th>昵称</th><th>企微账号</th><th>客服</th><th>线索</th></tr >");
        for (var i = 0; i < doneList.length; i++) {
            var outuser = doneList[i];
            $("#qiweiTable tbody").append("<tr><td><img class='outuserImg' src='" + outuser._headimgurl + "'</td><td>" + outuser._nickname + "</td><td>"
                + outuser._appuserid + "<td>" + outuser._fromuserid + "</td><td><a href='javascript: showSaleLine(\"" + outuser._appid + "\",\"" + outuser._appuserid + "\")' style='color: #169BD5'>查看</a></td></tr>");
        }
        winindex = layer.open({
            title: '已转移好友关系',
            type: 1
            , content: $('#outuser-box')
            , area: ['700px', '550px']
        });
    }
    function openOutUser() {
        $("#qiweiTable tbody").empty();
        $("#qiweiTable").append("<tr><th>头像</th ><th>昵称</th><th>企微账号</th><th>线索</th></tr >");
        for (var i = 0; i < outuserList.length; i++) {
            var outuser = outuserList[i];
            $("#qiweiTable tbody").append("<tr><td><img class='outuserImg' src='" + outuser._headimgurl + "'</td><td>" + outuser._nickname + "</td><td>"
                + outuser._appuserid + "<td><a href='javascript: showSaleLine(\"" + outuser._appid + "\",\"" + outuser._appuserid + "\")' style='color: #169BD5'>查看</a></td></tr>");
        }
        winindex = layer.open({
            title: '资源分配数量',
            type: 1
            , content: $('#outuser-box')
            , area: ['700px', '550px']
        });
    }
    function initSetting() {
        $(".flexUser").empty();

        $(".flexUser").append("<div class='flexItem avgItem'><div class='leftdiv'>计划分配</div><div class='rightdiv'><input id='sumCount' oninput='avg(this.value)' /></div></div>");
        for (var i = 0; i < toUser.length; i++) {
            var user = toUser[i];
            var userid = toUser[i].userid;
            $(".flexUser").append(
                " <div class='flexItem' userid = '" + userid + "'><div class= 'leftdiv' userid = '" + userid + "'>" + user.userid + "(" + user.eid + ")</div>"
                + "<div class= 'rightdiv'><input id='to_" + userid + "' class='flexUserCount'oninput='densityInput(event)'value='" + user.flowCount + "' /></div>"
            );
        }
        GetSumFlexUserCount();
    }
    function densityInput(e) {
        var id = e.target.getAttribute("id");
        debugger
        for (var i = 0; i < toUser.length; i++) {
            var user = toUser[i];
            if ("to_"+user.userid == id) {
                user.flowCount = $('#' + id).val()
            }
        }
        GetSumFlexUserCount();
    }
    function GetSumFlexUserCount() {

        var sumCount = 0;
        for (var i = 0; i < toUser.length; i++) {
            var user = toUser[i];
            sumCount += parseInt(user.flowCount);
        }
        flowCount = sumCount;
        $("#sumCount").val(flowCount);
    }
    function showSaleLine(appid, appuserid) {
        $.ajax({
            url: "/Csvr/CustomerUC/GetSalesLeadUrl",
            type: "Post",
            data: { appid: appid, appuserid: appuserid },
            dataType: "json",
            loading: true,
            success: function (rep) {
                if (rep.result) {
                    if (rep.retmsg != null && rep.retmsg.length > 0) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                title: '销售线索',
                                type: 2,
                                content: rep.retmsg,
                                area: ['450px', '80%']
                            });
                        });
                    }
                }
                else {
                    alert("失败了！");
                }
            }
        });
    }
</script>