{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>新建客户
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="/service/customer/list"> 客户列表</a></li>
            <li><a href="#"> 新建客户</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="tab-content">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs edit-step">
                    <li class="active" data-mode="guide"><a href="#tab_1" data-toggle="tab" aria-expanded="true">客户信息</a></li>
                    <button class="btn btn-primary btn-sm" style="float: right;margin-top: 7px;margin-right: 10px" onclick="saveCuser()"><i class="fa fa-fw fa-file-text fa-lg"></i>保存客户</button>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                        <form class="form-horizontal">
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <i class="fa fa-tag"></i>
                                    <h3 class="box-title">基本信息</h3>
                                </div>
                                <div class="box-body">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color:red;">* </span>客户名称</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="customername" placeholder="公司名称" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color:red;">* </span>销售人员</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="seller" placeholder="销售人员名称" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">客户联系人</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="contract" placeholder="客户联系人名称">
                                        </div>
                                    </div>
                                    <div class="box-header with-border">
                                        <i class="fa fa-tag"></i>
                                        <h3 class="box-title">部门信息</h3>
                                    </div>
                                    <table id="departTable" class="table table-bordered">
                                        <thead>
                                        <div style="margin: 10px 10px 0px;">
                                            <a class="btn btn-default" onclick="showDepart()">新增</a>
                                            <a class="btn btn-default" onclick="modify_Depart()">修改</a>
                                            <a class="btn btn-default" onclick="del_Depart()">删除</a>
                                        </div>
                                        <tr>
                                            <th></th>
                                            <th>编号</th>
                                            <th>部门名称</th>
                                            <th>部门联系人</th>
                                            <th>是否启用</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- 新增部门 -->
<div class="modal fade" id="modal-add-depart" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 30%">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="edit-form">
                        <div class="edit-info">
                            <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
                            <span>新增部门</span>
                        </div>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span style="color:red;">* </span>部门名称</label>
                                <div class="col-sm-6">
                                    <input class="form-control" placeholder="销售部、销售部-xx子部门" id="depart_name"/></div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">联系人</label>
                                <div class="col-sm-6">
                                    <input class="form-control" placeholder="输入联系人名称" id="depart_contract"/></div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">是否启用</label>
                                <div class="col-sm-6">
                                    <select class="form-control selectpicker" id="isuseSelect">
                                        <option value = 1 selected>是</option>
                                        <option value = 0>否</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" onclick="saveDepart()" class="btn btn-primary saveBtn" value="保存">
                    <input type="button" onclick="cancelModel()" class="btn btn-default" style="margin-left: 24px"
                           value="取消">
                </div>
            </div>
        </div>
    </div><!-- /.modal -->
</div>
{{include "com/footer.html"}}
<script>
    menuActive("/customer/list");

    var keyTableChecked = false;        //关键词表格数据是否有选中
    var keyTableAllChecked = true;      //表单数据是否被全选中
    var selectIndex = [];               //选中的编号

    //表单数据
    var dataMap = {
        "_id": "",
        "s_name": "",
        "s_customername": "",
        "s_salesperson": "",
        "i_state": 0,
        "s_appid": "",
    };
    var departArr = []

    $(document).ready(function () {
        $('#departTable').DataTable({
            "paging": false,
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": false,
            "autoWidth": true,
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "fnDrawCallback": function () {
                this.api().column(1).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            },
            "columns": [
                {"data": function() {
                        return `<input type="checkbox" name="ckb-keyid" onclick="singleSelect(this)" style="text-align: center">`
                    }, width: "3%"},
                {"data": null, width: "5%"},
                {"data": "s_name", width: "20%"},
                {"data": "s_contract", width: "40%"},
                {"data": "i_isuse", render: function (val, a, row) {
                        tmp = ""
                        if(val == 1){
                            tmp="<a href='#' title='停用' onclick='setup(\""+row._id+"\",false)'><i class='fa fa-fw fa-circle text-green'></i></a>已启用"
                        }else{
                            tmp="<a href='#' title='启用' onclick='setup(\""+row._id+"\",true)'><i class='fa fa-fw fa-circle text-red'></i></a>未启用"
                        }
                        return tmp
                    }, width: "20%" },
            ],
        });
    })
    function cancelModel() {
        $('#modal-add-depart').modal("hide");
    }
    function singleSelect(obj) {
        var tag = true;
        selectIndex.length = 0;
        $('input[name="ckb-keyid"]').each(function () {
            if (this.checked) {
                keyTableChecked = true;
                selectIndex.push($(this).parents("tr").index() + 1);
            }else {
                tag = false
            }
        });
        if (tag) {
            keyTableAllChecked = true;
            $('#allCheckbox').prop("checked", true);
        }else {
            keyTableAllChecked = false;
            $('#allCheckbox').prop("checked", false);
        }
    }
    function saveCuser() {
        var name = $('#customername').val();
        var contract = $('#contract').val();
        var saleperson = $('#seller').val();
        if (name == "" || saleperson == "") {
            showTip("请填写必填字段！", 1000)
            return
        }
        dataMap.s_name = name
        dataMap.s_customername = contract
        dataMap.s_salesperson = saleperson
        dataMap["depart"] = JSON.stringify(departArr);
        $.ajax({
            url: "/service/customer/save",
            type: 'POST',
            data: dataMap,
            success: function (r) {
                if (r.rep) {
                    // showTip("保存成功", 500);
                    window.location.href="/service/customer/list"
                } else {
                    showTip("保存失败", 500);
                }
            }
        })
    }

    var depart_flag = -1;      // 0：新增，1：修改
    function showDepart() {
        depart_flag = 0
        $('#depart_name').val("");
        $('#depart_contract').val("");
        $('#modal-add-depart').modal("show")
    }
    //修改部门
    function modify_Depart() {
        depart_flag = 1
        var index = selectIndex[0] - 1;
        $('#depart_name').val(departArr[index].s_name);
        $('#depart_contract').val(departArr[index].s_contract);
        $('#s_depart_name').val(departArr[index].s_subname)
        $("#isuseSelect").val(departArr[index].i_isuse)
        $('#modal-add-depart').modal("show");
    }
    function del_Depart() {
        if (keyTableChecked && selectIndex.length > 0) {
            showConfirm("确定删除？", function() {
                var tmp = []
                for (var i in selectIndex) {
                    var j = selectIndex[i] - 1;
                    tmp.push(j)
                }
                departArr = deleteArrayVal(departArr, tmp)

                keyTableChecked = false;
                if (departArr.length == 0) {
                    $('#allCheckbox').prop("checked", false);
                    $('#departTable').dataTable().fnClearTable();
                }else {
                    $('#departTable').dataTable().fnClearTable();
                    $('#departTable').dataTable().fnAddData(departArr);
                }
            })
        }else {
            showTip("请选中需要删除的关键词", 500)
        }
    }
    function saveDepart() {
        var name = $('#depart_name').val();
        var contract = $('#depart_contract').val();
        if (name != "") {
            var depart = {};
            depart["s_name"] = name;
            depart["s_contract"] = contract;
            depart["s_subname"] = $('#s_depart_name').val()
            depart["i_isuse"] = $('#isuseSelect').val()
            if (depart_flag == 1) {
                var index = selectIndex[0] - 1;
                departArr.splice(index, 1, depart)
            }else {
                departArr.push(depart)
            }
            $('#departTable').dataTable().fnClearTable();
            $('#departTable').dataTable().fnAddData(departArr);
            $('#modal-add-depart').modal('hide');
        }else {
            showTip("部门名称不能为空", 500)
        }
    }
    function setup(val, bol) {
        if (dataMap._id == "") {
            showTip("请先保存客户信息再操作", 1000)
            return
        }
        var msg = ""
        var i_isuse = 0
        if (bol) {
            msg = "确定启用？"
            i_isuse = 1
        }else {
            msg = "确定停用？"
            i_isuse = 0
        }
        showConfirm(msg, function() {
            $.ajax({
                url:"/service/customer/setup",
                type:"post",
                data:{"_id": val, "i_isuse": i_isuse},
                success:function(r){
                    if(r.rep){
                        window.location.reload()
                    }else{
                        showTip("启用失败", 1000);
                    }
                }
            })
        });
    }
</script>