<!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;
        }
        .picker{
            margin-top: 10px;
            display: flex;
            justify-content: flex-start;
        }
        #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;
        }
        .layui-layer-shade{
            opacity: 30%;
        }
        .item {
            margin-bottom: 20px;
        }
        .item div {
            display: flex;
        }
        .item div a{
            margin-left: 12px;
        }
        .item div p, .item div div {
            margin: 0px;
        }
        /* 星星 */
        .required-group-name {
            color: red;
            font-size: 20px;
            position: relative;
            top: 6px;
        }
        .groupName {
            border: 1px solid #dfdfdf;
        }
        .Name {
            border: 1px solid #dfdfdf;
        }
        .required-province {
            color: red;
            display: inline-block;
            margin-right: 3px;
            position: relative;
            top: 6px;
            font-size: 20px;
        }
        /* 必填红色文字 */
        .required-group-text {
            height: 20px;
            color: red;
        }
        .required-province-text {
            color: red;
            height: 20px;
        }
    </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">
                            <span class="required-group-name">*</span>
                            <input class="groupName" type="text" placeholder="组名称" >
                            <p class="required-group-text"></p>
                            <span class="required-group-name">*</span>
                            <input class="Phone" placeholder="输入手机号选择总代">
                            <div class="picker">
                                <span class="required-province">*</span>
                                <div class="demo" id="demo-1">
                                    <select onchange="sele()"></select>
                                </div>
                            </div>
                            <p class="required-province-text"></p>
<!--                            <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>
                            <div id="smileUserVoOrgListTotal">
                                <!-- <div class="item">
                                    <div>
                                        <p>姓名：</p>
                                        <div class="detail_inner detail_z_name">范德萨发</div>
                                        <a href="javascript:;">查看详情</a>
                                    </div>
                                    <div>
                                        手机号：<span>123456</span>
                                    </div>
                                </div> -->
                            </div>
                            <p class="detail_title">普代</p>
                            <div id="smileUserVoOrgListOrdinary">
                                <!-- <div class="item">
                                    <div>
                                        <p>姓名: </p>
                                        <div class="detail_inner detail_z_mobile">范德萨发</div>
                                        <a href="javascript:;">查看详情</a>
                                    </div>
                                    <div>
                                        手机号： <span>215545</span>
                                    </div>
                                </div> -->
                            </div>
                        </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: []
    }
    let uid = ''

    function yes() {
        var groupName = $('.groupName').val();
        var phone = $('.Phone').val()
        // var groupMobile = $('.groupMobile').val();
        var editStatus = $('.editCon').val();
        var postData = {
            name: groupName,
            // name: groupMobile,
            // area: adArr.addressStr[2],
            delTag: 0,
            agentId: uid,
            // city: adArr.addressStr[1],
            // cityId: adArr.addressIds[1].toString(),
            // province: adArr.addressStr[0],
            // provinceId: adArr.addressIds[0] + ''
        };
        if (!groupName) {
            $('.required-group-text').text('组名称为必填项！');
        } else {
            $('.required-group-text').text('');
        }
        if (!phone) {
            $('.required-province-text').text('选择总代为必填项！');
        } else {
            $('.required-province-text').text('');
        }
        if (groupName && phone) {
            if (editStatus != '') { // edit
                postData.id = editStatus;
                $.ajax({
                    type: 'post',
                    url: orifix + '/updateOrg',
                    headers:{"Content-Type":"application/json;charset=UTF-8"},
                    data: JSON.stringify(postData),
                    success:function(e) {
                        console.log(e)
                        if(e.code === 301){
                            $.modal.msg(e.msg)
                        }else{
                            $(".layui-layer-close1").click();
                            refreshItem();
                            $('.required-group-text').val('');
                            $('.required-province-text').val('');
                        }
                    }
                })
            } else { // create
                // postData.areaId = 0;
                $.ajax({
                    type: 'post',
                    url: orifix + '/create',
                    headers:{"Content-Type":"application/json;charset=UTF-8"},
                    data: JSON.stringify(postData),
                    success:function(e) {
                        if(e.code === 301){
                            $.modal.msg(e.msg)
                        }else{
                            $(".layui-layer-close1").click();
                            refreshItem();
                        }
                    }
                })
            }
        }
    }

    function closeModal(){
        $(".layui-layer-close1").click();
    }

    // 新建组
    $("#button-open-10").click(function(){
        $('select').empty()
        $('.Phone').val('');
        $('.groupName').val('');
        // let data = {
        //     phone:$('.Phone').val()
        // }
        layer.open({
            type: 1,
            shade: true,
            title: '创建组', //不显示标题
            content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            // success: function () {
            //     var $pre = $( "pre" );
            //     var $picker = $( ".picker" );
                // $.getJSON('/smile/user/getList',data).done(function ( res ) {
                //     $( "#demo-1" ).iPicker({
                //         level:1,
                //         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);
                        $('.Phone').val(e.data.smileUserVoOrgListTotal.name);
                        // $('.groupMobile').val(e.data.address);
                        // adArr.addressStr[0] = e.data.province
                        // $.getJSON( ctx + 'smile/user/getAreaJson' ).done(function ( res ) {
                        //     $( "#demo-1" ).iPicker({
                        //         level:1,
                        //         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 goDetail (uid) {
        var url = ctx+'local/smileDetail?id=' + uid;
        $.modal.openTab("用户详情", url);
    }
    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) {
                        let { data } = e;
                        console.log(data)
                        $('.detail_name').text(data.name);
                        $('.detail_address').text(data.province||'' + ' ' + data.city||'' + ' ' + data.area||'');
                        if (data.smileUserVoOrgListTotal) {
                            let str = '';
                            str += `<div class="item">
                                        <div>
                                            <p>姓名：</p>
                                            <div class="detail_inner detail_z_name">${data.smileUserVoOrgListTotal.name}</div>
                                            <a href="javascript:;" onclick="goDetail('${data.smileUserVoOrgListTotal.uid}')">查看详情</a>
                                        </div>
                                        <div>
                                            手机号：<span>${data.smileUserVoOrgListTotal.phone}</span>
                                        </div>
                                    </div>`
                            $("#smileUserVoOrgListTotal").html(str);
                        }
                        if (data.smileUserVoOrgListOrdinary && data.smileUserVoOrgListOrdinary.length > 0) {
                            let str = '';
                            data.smileUserVoOrgListOrdinary.forEach(item => {
                                str += `<div class="item">
                                            <div>
                                                <p>姓名：</p>
                                                <div class="detail_inner detail_z_name">${item.name}</div>
                                                <a href="javascript:;" onclick="goDetail('${item.uid}')">查看详情</a>
                                            </div>
                                            <div>
                                                手机号：<span>${item.phone}</span>
                                            </div>
                                        </div>`
                            })
                            $("#smileUserVoOrgListOrdinary").html(str);
                        }else{
                            $("#smileUserVoOrgListOrdinary").empty()
                        }
                    }
                })
            },
            cancel: function(res){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }

    // function searchUser(){
        // $('.Name').on('input',function(){
        //     console.log($(this).val())
        // })
    // }

    $(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);
        $('.Phone').on('input',function(){
            let data = {
                phone:$(this).val()
            }
            if(data.phone.length >= 6){
                $.getJSON('/smile/user/getList',data,function ( res ) {
                    let arr = []
                    $('select').empty()
                    res.data.forEach(item =>{
                        arr.push(`<option value="${item.uid}" disabled selected>请选择</option>`)
                        arr.push(`<option value="${item.uid}">${item.name}</option>`)
                    })
                    $('select').append(arr)
                })
            }
            // let data = {
            //     phone:$(this).val()
            // }
            // $.ajax({
            //     url:'/smile/user/getList',
            //     type:'get',
            //     data,
            //     success:function(res){
            //         console.log(res)
            //     }
            // })
        })
    });
    function sele(){
        uid = $('select').val()
        $('.Phone').val($('select').find('option:selected').text())
    }
</script>
</body>
</html>