i<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <style>
        html{background: #FFF}
        .members-container{border: 1px solid #f0f0f0; width: 90%; margin: 10px auto; padding: 10px; display: flex; flex-wrap: wrap;}
        .members-container>div{position: relative; background: #f0f0f0; padding: 3px 10px; margin: 0 15px 10px 0 }
        .members-container>div b.icon-close{color: #ff0000; background: #fff; width: 15px; height: 15px; line-height: 14px; display: inline-block; text-align: center; border: 1px solid #ff0000; border-radius: 50px; position: absolute; top: -8px; right: -8px; cursor: pointer}
        .sd-date{ display: flex }
        .sd-date>div{display: flex; align-items: center; margin-right: 20px}
        .sd-date>div span{white-space: nowrap; margin-right: 10px}
        .laydate-theme-hhmm .laydate-time-list>li {
            width: 50%;
        }
        .laydate-theme-hhmm .laydate-time-list>li:last-child {
            display: none;
        }
    </style>
</head>
<body>
<form class="layui-form mt-20" action="" lay-filter="demo-val-filter">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="mark">*</span>审单组：</label>
        <div class="layui-input-inline">
            <input type="text" name="group" placeholder="请输入" autocomplete="off" class="layui-input" value="${group.name}" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="mark">*</span>组长：</label>
        <div class="layui-input-inline">
            <select name="leader" lay-filter="leader" lay-search id="leader">
                <option value=""></option>
                <c:forEach items="${emps}" var="item">
                    <option value="${item.columns.id}" ${item.columns.id eq group.leaderEmpId? 'selected':''}>${item.columns.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="mark">*</span>组员：</label>
        <div class="layui-input-inline">
            <select name="members" lay-filter="member" lay-search id="member">
                <option value=""></option>
                <c:forEach items="${emps}" var="item">
                    <option value="${item.columns.id}">${item.columns.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="members-container" id="members-container" style="min-height: 50px;">
        <c:forEach items="${members}" var="item">
            <div id="${item.columns.employee_id}" class="emp">
                <span>${item.columns.name}</span>
                <b class="icon-close" onclick="delDiv(this)">x</b>
            </div>
        </c:forEach>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="mark">*</span>审单时间：</label>
        <div class="sd-date">
            <div>
                <span>上午</span>
                <input type="text" class="layui-input" id="ID-laydate-range-time1" placeholder=" - " value="${spt1}">
            </div>
            <div >
                <span>下午</span>
                <input type="text" class="layui-input" id="ID-laydate-range-time2" placeholder=" - " value="${spt2}">
            </div>
        </div>

    </div>
</form>

<div class="layui-form-item text-c operate-footer">
    <button type="button" class="layui-btn" id="save" onclick="save()">提交</button>
    <button class="layui-btn layui-btn-primary" onclick="closeSelf()">关闭</button>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/data.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var $;
    var table;
    var laydate;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form','excel'], function(){
        $ = layui.$
            ,form = layui.form
            ,tableExt = layui.tableExt;
        laydate = layui.laydate;
        table = layui.table;

        laydate.render({
            elem: '#ID-laydate-range-time1',
            type: 'time',
            range: true
            ,theme: 'hhmm'
            ,format: 'HH:mm'
            ,trigger: 'click'
        });

        laydate.render({
            elem: '#ID-laydate-range-time2',
            type: 'time',
            range: true
            ,theme: 'hhmm'
            ,format: 'HH:mm'
            ,trigger: 'click'
        });

        form.on('select(member)', function (data) {
            add();
        });
    });

    function closeSelf() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭当前页
    }

    let saving = false;
    function save() {
        let leaderEmpId = $("#leader").val();
        if (!leaderEmpId) {
            layer.msg('请选择组长！', {icon:2});
            return;
        }
        let emps = $("#members-container .emp");
        let empIds = [];
        emps.each(function(index, value) {
            let empId = $(value).attr('id');
            empIds.push(empId);
        });
        if (!empIds.length) {
            layer.msg('请选择组员！', {icon:2});
            return;
        }
        let tsp1 = $('#ID-laydate-range-time1').val();
        let tsp2 = $('#ID-laydate-range-time2').val();
        if (!tsp1 && !tsp2) {
            layer.msg('至少选择一个时间区段！', {icon:2});
            return;
        }
        let timeValid = checkTimeSpan();
        if (!timeValid) {
            layer.msg('时间区间不正确！', {icon:2});
            return;
        }

        let tsp1arr = parseTsp(tsp1);
        let tsp2arr = parseTsp(tsp2);

        if (saving) {
            return;
        }
        saving = true;
        $.ajax({
            url: "${ctx}/taskdispatch/crmReviewGroup/edit",
            type: "POST",
            contentType : "application/json;charsetset=UTF-8",
            data: JSON.stringify({
                leaderEmployeeId: leaderEmpId,
                groupId: '${groupId}',
                partnerId: '${partnerId}',
                employeeIds: empIds,
                hour1: tsp1arr[0][0],
                hour2: tsp1arr[1][0],
                hour3: tsp2arr[0][0],
                hour4: tsp2arr[1][0],
                minute1: tsp1arr[0][1],
                minute2: tsp1arr[1][1],
                minute3: tsp2arr[0][1],
                minute4: tsp2arr[1][1],
            }),
            success: function (data) {
                if (data.code === "200") {
                    top.layer.msg("提交成功！");
                    parent.searchOrder();
                    closeSelf();
                } else {
                    top.layer.msg(data.errMsg, {icon: 2});
                }
            },
            complete: function() {
                saving = false;
            },
            error: function () {
                top.layer.msg("系统忙，请稍后再试！");
            }
        });
    }

    function delDiv(t) {
        $(t).closest('.emp').remove();
    }

    function add() {
        let name = $("#member option:selected").text();
        let employeeId = $("#member").val();
        if (!employeeId) {
            return;
        }
        let emps = $("#members-container .emp");
        let exists = false;
        emps.each(function(index, value) {
            let empId = $(value).attr('id');
            if (empId === employeeId) {
                exists = true;
                return false;
            }
        });
        if (exists) {
            layer.msg('成员已经在该组中！', {icon:2});
            return;
        }
        let tmpl = '<div id="" class="emp"><span class="emp-name"></span>'+
            '<b class="icon-close" onclick="delDiv(this)">x</b>'+
            '</div>';
        let el = $(tmpl);
        el.attr('id', employeeId);
        el.find('span.emp-name').text(name);
        $('#members-container').append(el);
    }

    function checkTimeSpan() {
        let tsp1 = $('#ID-laydate-range-time1').val();
        let tsp2 = $('#ID-laydate-range-time2').val();
        return checkTsp(tsp1) && checkTsp(tsp2);
    }

    function parseTsp(tsp) {
        if (!tsp) {
            return [['',''],['','']];
        }
        let tsps = tsp.split("-");
        let tsp1 = $.trim(tsps[0]);
        let tsp2 = $.trim(tsps[1]);
        let vs1 = tsp1.split(":");
        let vs2 = tsp2.split(":");
        return [vs1, vs2];
    }

    function checkTsp(tsp) {
        if (tsp) {
            let tsps = tsp.split("-");
            let tsp1 = $.trim(tsps[0]);
            let tsp2 = $.trim(tsps[1]);
            let vs1 = tsp1.split(":");
            let vs2 = tsp2.split(":");
            let v1 = parseInt(vs1[0])*60+parseInt(vs1[1]);
            let v2 = parseInt(vs2[0])*60+parseInt(vs2[1]);
            if (v1 >= v2) {
                return false;
            }
        }
        return true;
    }

</script>
</body>
</html>
