<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('组织架构列表')"/>
    <style>
        #addClassify, #detailPro {
            display: none;
            width: 540px;
            padding-top: 20px;
        }
        #addClassify .selectClassify {
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        #addClassify .selectClassify label {
            display: flex;
            margin-right: 20px;
            align-items: center;
        }
        #addClassify .selectClassify label input {
            margin: 0;
            margin-right: 2px;
        }
        #detailPro .detail_inner {
            margin-bottom: 20px;
        }
        #detailPro .detail_title {
            margin-top: 50px;
            font-weight: bold;
            font-size: 16px;
        }
        .bottomBtn {
            text-align: left;
            padding: 10px 15px 12px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success"  id="button-open-10">
                <i class="fa fa-plus"></i> 创建组
            </a>
        </div>
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table"></table>
        </div>
        <div id="addClassify">
            <div class="selectClassify">
                <div class="ibox-content">
                    <div class="form-group">
                        <div class="file-loading">
                            <input class="groupName" type="text" placeholder="组名称" >
                            <div class="picker">
                                <div class="demo" id="demo-1"></div>
                            </div>
                            <input class="groupMobile" type="text" placeholder="输入手机号选择总代" >
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" class="editCon">
            <div class="bottomBtn">
                <a href="javascript:;" class="layui-layer-btn0" onclick="yes(1)">保存</a>
                <a class="layui-layer-btn1 layui-layer-btn1" onclick="closeModal()">取消</a>
            </div>
        </div>


        <div id="detailPro">
            <div class="selectClassify">
                <div class="ibox-content">
                    <div class="form-group">
                        <div class="file-loading">
                            <p>组合名称</p>
                            <div class="detail_inner detail_name"></div>
                            <p>地区</p>
                            <div class="detail_inner detail_address"></div>
                            <p class="detail_title">总代</p>
                            <p>姓名</p>
                            <div class="detail_inner detail_z_name"></div>
                            <p>手机号</p>
                            <div class="detail_inner detail_z_mobile"></div>
                            <p class="detail_title">普代</p>

                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" class="editCon">
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var createFlag = [[${@permission.hasPermi('smile:organization:create')}]];
    var drawListFlag = [[${@permission.hasPermi('smile:organization:list')}]];
    var updateFlag = [[${@permission.hasPermi('smile:organization:create')}]];
    var orifix = ctx + "smile/organization";
    var adArr = {
        addressStr: [],
        addressIds: []
    }

    function yes() {
        var groupName = $('.groupName').val();
        var groupMobile = $('.groupMobile').val();
        var editStatus = $('.editCon').val();
        var postData = {
            name: groupName,
            // name: groupMobile,
            area: adArr.addressStr[2],
            delTag: 0,
            areaId: adArr.addressIds[2].toString(),
            city: adArr.addressStr[1],
            cityId: adArr.addressIds[1].toString(),
            province: adArr.addressStr[0],
            provinceId: adArr.addressIds[0].toString()
        };
        if (editStatus != '') {
            postData.id = editStatus;
            $.ajax({
                type: 'post',
                url: orifix + '/updateOrg',
                headers:{"Content-Type":"application/json;charset=UTF-8"},
                data: JSON.stringify(postData),
                success:function(e) {
                    $(".layui-layer-close1").click();
                }
            })
        } else {
            // postData.areaId = 0;
            $.ajax({
                type: 'post',
                url: orifix + '/create',
                headers:{"Content-Type":"application/json;charset=UTF-8"},
                data: JSON.stringify(postData),
                success:function(e) {
                    $(".layui-layer-close1").click();
                }
            })
        }
    }


    $("#button-open-10").click(function(){
        $('.editCon').val('');
        layer.open({
            type: 1,
            shade: true,
            title: '创建组', //不显示标题
            content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            success: function () {
                var $pre = $( "pre" );
                var $picker = $( ".picker" );
                $.getJSON( ctx + 'smile/user/getAreaJson' ).done(function ( res ) {
                    $( "#demo-1" ).iPicker({
                        data: JSON.parse(res.msg),
                        // defaultValue: [ "230000", "230800", "230805" ],
                        onSelect: function ( v, t, set ) {
                            adArr.addressIds = v;
                            adArr.addressStr = t;
                        }
                    });
                })
            },
            cancel: function(res){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    })

    function edit(id) {
        layer.open({
            type: 1,
            shade: true,
            title: '编辑组',
            content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            success: function () {
                $.ajax({
                    type: 'post',
                    url: orifix + '/getOrgById',
                    data: {id: id},
                    success:function(e) {
                        $('.editCon').val(id);
                        $('.groupName').val(e.data.name);
                        $('.groupMobile').val(e.data.address);
                        $.getJSON( ctx + 'smile/user/getAreaJson' ).done(function ( res ) {
                            $( "#demo-1" ).iPicker({
                                data: JSON.parse(res.msg),
                                defaultValue: [e.data.provinceId, e.data.areaId, e.data.cityId],
                                onSelect: function ( v, t, set ) {
                                    adArr.addressIds = v;
                                    adArr.addressStr = t;
                                }
                            });
                        })
                    }
                })
            },
            cancel: function(res){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }

    function todetail(id) {
        layer.open({
            type: 1,
            shade: true,
            title: '查看人员',
            content: $('#detailPro'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            success: function () {
                $.ajax({
                    type: 'post',
                    url: orifix + '/getOrgById',
                    data: {id: id},
                    success:function(e) {
                        $('.detail_name').text(e.data.name);
                        $('.detail_address').text(e.data.province + ' ' + e.data.city + ' ' + e.data.area);
                        if (e.data.smileUserVoOrgListTotal) {
                            $('.detail_z_name').text(e.data.smileUserVoOrgListTotal[0].name);
                            $('.detail_z_mobile').text(e.data.smileUserVoOrgListTotal[0].phone);
                        }
                        if (e.data.smileUserVoOrgListOrdinary) {
                            for (var i in e.data.smileUserVoOrgListOrdinary) {
                                console.log(e.data.smileUserVoOrgListOrdinary[i])
                                $('#detailPro .file-loading').append(
                                    '<p>姓名</p><div className="detail_inner detail_p_name">' + e.data.smileUserVoOrgListOrdinary[i].name + '</div>' +
                                    '<p>手机号</p><div className="detail_inner detail_p_mobile">' + e.data.smileUserVoOrgListOrdinary[i].phone + '</div>'
                                )
                            }
                        }
                    }
                })
            },
            cancel: function(res){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }
    $(function () {
        var options = {
            url: orifix + "/list",
            modalName: "组织架构",
            columns: [{
                checkbox: true
            },
                {
                    field: 'name',
                    title: '名称'
                },
                {
                    field: 'province',
                    title: '地区'
                },
                {
                    field: 'agentName',
                    title: '组长'
                },
                // {
                //     field: 'smileUserVoOrgListOrdinary',
                //     title: '组员',
                //     formatter: function (value, row, index) {
                //
                //     }
                // },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return `<a class="btn btn-success btn-xs ' + drawListFlag + '" href="javascript:void(0)" onclick="todetail('${row.id}')"><i class="fa fa-edit"></i>查看人员</a>
                                <a class="btn btn-success btn-xs ' + drawListFlag + '" href="javascript:void(0)" onclick="edit('${row.id}')"></i>编辑</a>`
                    }
                }]
        };

        $.table.init(options);
        
    });
</script>
</body>
</html>