<!-- 模态框 -->
<div class="model">
    <div class="title">
        教室录入和修改
    </div>
    <div class="box">
        教室编号:<input type="text" id="num" placeholder="教室编号" v-model="roomNum"><br>
        教室容量:<input type="number" min="1" max="99999" step="1" id="" placeholder="教室容量" v-model="roomContain"><br>
        是否有多媒体设备：
        <select name="media" id="" v-model="hasMedia">
            <option value="1">是</option>
            <option value="0">否</option>
        </select>
    </div>
    <div class="bt">
        <!-- 判定是添加还是修改的标志-->
        <input type="button" @click="changetoinput" value="切换录入" v-bind:style="show">
        <input type="button" @click="ConfirmInput" v-model="text">
        <input type="button" value="取消" @click="closeModel">

    </div>
</div>
<!-- 背景遮罩 -->
<div class="shadow">
    <div class="title">
        已录入教室
    </div>
    <div class="tab">
        <div class="btpanel">
            <input type="button" class="btn btn-danger" value="删除" @click="deleteRooms()">
        </div>
        <table class="table table-striped" id="classroom">
            <!-- //bootstraptable动态赋值 -->
        </table>
    </div>
</div>
<!-- 设置baseurl -->
<script src="js/baseUrl.js"></script>
<script>
    $(function () {
        findData();
    })
    var obj = new Vue({
        el: '.contain',
        data: {
            roomNum: '',
            roomContain: '',
            hasMedia: '1',
            text: '确认录入',
            show: 'display:none',
        },
        methods: {
            // 关闭模态框方法
            closeModel: function () {
                $(".model")[0].style.display = "none"
                $(".shadow")[0].style.filter = "none"
            },
            //添加修改教室；通过button绑定的text判断是修改还是添加
            ConfirmInput: function () {
                if (this.roomNum == "" || this.roomContain == "" || this.hasMedia == "") {
                    return false;
                } else {
                    var data = {
                        roomNum: this.roomNum,
                        roomContain: this.roomContain.toString(),
                        hasMedia: this.hasMedia
                    }

                    if (this.text == "确认录入") {
                        //这时是录入状态，访问录入的url
                        Ajaxrequest('ad', BaseUrl+'/roomInput', 'post', JSON.stringify(
                                data),
                            function (data) {
                                if (data.code === 0) {
                                    findData();
                                    toastr.success(data.msg);
                                } else {
                                    toastr.warning(data.msg);
                                }
                            },
                            function () {
                                toastr.error("操作失败")
                            })
                    } else if (this.text == "确认修改") {
                        //这时是修改状态，访问修改的url
                        Ajaxrequest('ad', BaseUrl+'/roomInfoModify', 'post', JSON
                            .stringify(
                                data),
                            function (data) {
                                if (data.code === 0) {
                                    findData();
                                    toastr.success(data.msg);
                                } else {
                                    toastr.warning(data.msg);
                                }
                            },
                            function () {
                                toastr.error("操作失败")
                            })
                    }
                    // 关闭模态框方法
                    $(".model")[0].style.display="none"
                    $(".shadow")[0].style.filter="none"
                }
            },
            //删除教室
            deleteRooms: function () {
                var rows = $('#classroom').bootstrapTable('getAllSelections');
                var ids = []; //用来存储id
                for (var i = 0; i < rows.length; i++) {
                    ids.push(rows[i].roomID);
                }
                var data = {
                    roomID: ids
                }
                if (rows.length != 0 && confirm("将会连带删除课程信息，确认继续？")) {
                    Ajaxrequest('ad', BaseUrl+'/roomDelete', 'post', JSON.stringify(data),
                        function (data) {
                            findData();
                            toastr.success(data.msg);
                        },
                        function () {
                            toastr.error(data.msg)
                        })
                } else {
                    return false;
                }
            },
            //修改模式
            changetoinput: function () {
                this.text = "确认录入";
                this.roomNum = '';
                this.roomContain = '';
                this.hasMedia = '1';
                this.show = 'display:none';
                $('#num').removeAttr("disabled");
            }

        }
    })
    //取出返回数据中的data（表格部分）
    function findData() {
        Ajaxrequest('ad', BaseUrl+'/roomCanChoose', 'post', null, function (data) {
                if (data.code === 0) {
                    //装载数据
                    $("#classroom").bootstrapTable('load', data.data);
                } else {
                    toastr.error(data.msg);
                }
            },
            function () {
                toastr.error("拉取数据失败")
            })
    }

    function addFunctionAlty(value, row, index) {
        return [
            '<button id="modify" type="button" class="btn btn-primary">修改</button>',
        ].join('');
    }
    window.operateEvents = {
        'click #modify': function (e, value, row, index) {
            // 显示模态框
            // 模糊背景
            $(".model")[0].style.display = "block"
            $(".shadow")[0].style.filter = "blur(3px)"
            obj.roomNum = row.roomID;
            obj.roomContain = row.roomContain;
            obj.hasMedia = row.hasMedia;
            obj.text = "确认修改";
            obj.show = "display:";
            $('#num').attr("disabled", "true")
        }
    }
    //bootstrap-table渲染函数
    $("#classroom").bootstrapTable({
        formatNoMatches: function () {
            return '未查询到数据';
        },
        onLoadError: function () {
            return '加载失败'
        },
        ajaxOptions: {
            async: true,
            timeout: 5000
        },
        sidePagination: "client", //分页
        showRefresh: true, //刷新功能
        clickToSelect: false, //选择行即选择checkbox
        cache: false,
        pagination: true, //启用分页
        pageCount: 10, //每页行数
        pageIndex: 0, //起始页
        pageList: [10, 25, 50, 100], //可供选择的每页的行数
        escape: true, //过滤危险字符
        showToggle: true,
        singleSelect: false,

        columns: [{
                checkbox: true
            },
            {
                title: '教室号',
                field: 'roomID',
                align: 'center',
                valign: 'middle',
            },
            {
                title: '教室容量',
                field: 'roomContain',
                align: 'center',
                valign: 'middle',
            },
            {
                title: '是否拥有多媒体',
                field: 'hasMedia',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    if (value === 1) {
                        return "<h5 style='color:blue;font-weight:bold'>有</h5>"
                    } else {
                        return "<h5 style='color:red;font-weight:bold'>无</h5>";
                    }
                }
            },
            {
                title: '操作',
                field: 'OP',
                align: 'center',
                valign: 'middle',
                events: operateEvents, //给按钮注册事件
                formatter: addFunctionAlty //表格中增加按钮
            },
        ],

    });
</script>