<!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 {
            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;
        }
        #addClassify .selectClassify .ibox-content {
            width: 100%;
        }
        /* 新建学校 modal 校名 */
        #addClassify .selectClassify .ibox-content .schoolName {
            width: 100%;
            height: 34px;
            border: 1px solid #dfdfdf;
            margin-bottom: 20px;
        }
        /* 详细地址 */
        #addClassify .selectClassify .ibox-content .schoolAdress {
            width: 100%;
            height: 34px;
            border: 1px solid #dfdfdf;
        }
        /* 低部按钮 */
        #addClassify .bottomBtn {
            padding: 0 0 20px 42px;
        }
        .layui-layer-shade{
            opacity: 30%;
        }
        .picker {
            height: 34px;
            position: relative;
        }
        .picker .require-item {
            color: red;
            position: absolute;
            top: 6px;
            left: -12px;
            font-size: 20px;
        }
        .show-require-text {
            color: red;
            height: 18px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>学校名称：</label>
                            <input id="schoolName" type="text" name="name"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <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>
        <!-- 添加学校 modal -->
        <div id="addClassify">
            <div class="selectClassify">
                <div class="ibox-content">
                    <div class="form-group">
                        <div class="file-loading">
                            <input class="schoolName" type="text" placeholder="学校名称" >
                            <div class="picker">
                                <div class="require-item">*</div>
                                <div class="demo" id="demo-1"></div>
                            </div>
                            <p class="show-require-text" id="requireProvinceText"></p>
                            <input class="schoolAdress" 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>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var drawListFlag = [[${@permission.hasPermi('smile:school:list')}]];
    var prefix = ctx + "smile/school";
    var adArr = {
        addressStr: [],
        addressIds: []
    }
    function yes() {
        var schoolName = $('.schoolName').val();
        var schoolAdress = $('.schoolAdress').val();
        var editStatus = $('.editCon').val();
        var postData = {
            address: schoolAdress,
            name: schoolName,
            area: adArr.addressStr[2],
            areaId: adArr.addressIds[2] + '',
            city: adArr.addressStr[1],
            cityId: adArr.addressIds[1] + '',
            province: adArr.addressStr[0],
            provinceId: adArr.addressIds[0] + ''
        };
        if (adArr.addressStr[0]) {
            $('#requireProvinceText').val('');
            if (editStatus != '') {
                postData.id = editStatus;
                $.ajax({
                    type: 'post',
                    url: prefix + '/updateById',
                    headers:{"Content-Type":"application/json;charset=UTF-8"},
                    data: JSON.stringify(postData),
                    success:function(e) {
                        $("pull-right button[type=refresh]").click();
                        refreshItem();
                        $(".layui-layer-close1").click();
                    }
                })
            } else {
                postData.id = 0;
                $.ajax({
                    type: 'post',
                    url: prefix + '/create',
                    headers:{"Content-Type":"application/json;charset=UTF-8"},
                    data: JSON.stringify(postData),
                    success:function(e) {
                        $("pull-right button[type=refresh]").click();
                        refreshItem();
                        $(".layui-layer-close1").click();
                    }
                })
            }
        } else {
            $('#requireProvinceText').text('省为必填项！');
        }

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

    // 新建学校 click
    $("#button-open-10").click(function(){
        $(".schoolName").val('');
        $(".schoolAdress").val('');
        $('.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({
                        width: 146,
                        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 () {
        var options = {
            url: prefix + "/list",
            modalName: "学校列表",
            columns: [{
                checkbox: true
            },
                {
                    field: 'name',
                    title: '学校名称'
                },
                {
                    field: 'province',
                    title: '地区'
                },
                {
                    field: 'address',
                    title: '详细地址'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return `<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="edit('${row.id}')">编辑</a>
                            <a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="del('${row.id}', '确认删除学校吗？')">删除</a>`
                    }
                }]
        };

        $.table.init(options);
        
    });
    function del(id, notice) {
        $.modal.confirm(notice, function() {
            $.ajax({
                type: 'post',
                url: prefix + '/del',
                data: { id: id},
                success:function(e) {
                    refreshItem();
                    layer.msg("操作成功！");
                }
            })
        });
    }

    // 编辑学校
    function edit(id) {
        layer.open({
            type: 1,
            shade: true,
            title: '编辑学校',
            content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            success: function () {
                $.ajax({
                    type: 'get',
                    url: prefix + '/getSchoolById',
                    data: {id: id},
                    success:function(e) {
                        $('.editCon').val(id);
                        $('.schoolName').val(e.data.name);
                        $('.schoolAdress').val(e.data.address);
                        $.getJSON( ctx + 'smile/user/getAreaJson' ).done(function ( res ) {

                            $( "#demo-1" ).iPicker({
                                width: 146,
                                data: JSON.parse(res.msg),
                                defaultValue: [e.data.provinceId, e.data.cityId, e.data.areaId],
                                onSelect: function ( v, t, set ) {
                                    adArr.addressIds = v;
                                    adArr.addressStr = t;
                                }
                            });
                        })
                    }
                })
            },
            cancel: function(res){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }

    function openModal(id, data) {
        console.log(id, data, 'dhsa')

        $.modal.confirm(`确定要${title}此活动吗`, function() {
            $.ajax({
                type: 'put',
                url: '/sweet/integralActivity/isOnline',
                data: {integralActivityId: id, isOnline: lineId},
                success:function(e) {
                    console.log(e)
                    $("button[name=refresh]").click();
                }
            })
        });
    }
</script>
</body>
</html>