let that;
const app = {
    data() {
        return {
            // 定时请求,下发进度
            timer_send:null,
            // 正在发送的MAC
            mac_send:[],
            // 防抖 输入停止后才搜索
            fd: null,
            // datatable 实例
            datatable: null,
            // 每页长度
            page_length: Cookies.get('page_length') || 21,
            // 数据
            rcudata: [],
            // 内容高度
            appheight: "",
            // 房号
            roomnumber: "",
            // 房间状态
            room_type: Cookies.get('room_type') || 0,
            // 下发多选
            moresel: false,
            // tool展开
            tool: false,
            // 多选的rcu
            sel_rcu: [],
            // 下发类型  1 固件  2 配置
            send_type: Cookies.get('send_type') || 1,
            // 全选
            moresel_all: false,
            // 房间在线 -1 全部 1 在线  0 不在线
            room_online_satatus: Cookies.get('room_online_satatus') || -1,
        }
    },
    mounted() {
        that = this;
        that.init();
    },
    methods: {
        //  一些隐藏显示 
        moresel_(type = 1) {
            switch (type) {
                case 1:
                    that.moresel = !that.moresel; 
                    that.show_rcu_chek();
                    break;
                case 2:
                    that.tool = !that.tool;
                    break;
            }
        },
        // 房间前面显示多选按钮
        show_rcu_chek: function () {
            if (that.moresel) {
                $('.rcu_chek').show();
            }
            else {
                $('.rcu_chek').hide();
                // 房间 复选框消失   同时清空之前勾选的数据
                that.sel_rcu = [];
                // 全选标记取消
                that.moresel_all = false;
                $('.rcu_chek').prop('checked', false);//取消勾选
            }
        },
        // 加入或者取消选择    type = 1 表示    单个下发    会直接下发
        sel_rcu_chek: function (elm, type = 0) {
            let data = JSON.parse($(elm).attr('data-text'));
            if (type == 1) {
                let data_ = new Object();
                data_.type = that.send_type;
                data_.MAC = new Array();
                data_.MAC.push(data.MAC);
                that.SendCmd(data_);
                // 开始单个下发
                return;
            }
            if ($(elm).prop('checked')) {
                // 判断是否有
                let ok = false;
                try {
                    that.sel_rcu.forEach(function (val) {
                        if (val.MAC == data.MAC) {
                            ok = true;
                            console.log(val.MAC);
                            console.log(data.MAC);
                        throw "存在跳出...";
                    }
                    });
                }
                catch (err) {
                    console.log(err);
                }
                if (!ok) {
                    that.sel_rcu.push(data);
                }
            } else {
                // 取消全选
                that.moresel_all = false;
                // 移除
                that.sel_rcu = that.sel_rcu.filter(function (val) {
                    return val.MAC != data.MAC;
                })
            }
        },
        // 下发确认弹窗  暂时不做
        Send_ok: function (data = null, back = null) {
            if (back == null || data == null) {
                console.log("Send_ok  参数不对.....");
                return;
            }
        }, 
        // 批量下发
        more_send: function () {
            that.SendCmd();
        },
        // 初始化函数
        init: function () {
            that.loc();
            that.table_init();
        },
        // 请求数据
        getdata: function (data, back = null) {
            MyPost("/Api/GetRCU", { isSwal: that.fd == null, data }, (res) => {
                if (back != null) {
                    back(res);
                }
            }, (err) => {
                toastr.error('网络繁忙~')
                console.log(err);
            })
        },
        // 下发
        SendCmd: function (data = null, back = null) {
            // 单个下发时 会自动传入参数 data
            if (data == null) {
                data = new Object();
                data.type = that.send_type;
                data.MAC = new Array();
                that.sel_rcu.forEach((x) => {
                    data.MAC.push(x.MAC);
                    $('.' + x.MAC).find('div').css('width','0');// 点击下发 进度条为0  无作用
                });
            }
            // 记录勾选的 下发文件类型
            Cookies.set('send_type', that.send_type, { expires: 7, path: window.location.pathname });
            MyPost("/Api/SendCmd", { isSwal: true, title: "下发中...", data }, (res) => {
                if (res == null) {
                    toastr.error('网络繁忙~');
                    return;
                }
                that.sel_rcu = []; // 清空记录
                $('.rcu_chek').prop('checked', false);//取消勾选
                that.moresel_all = false; // 全选标记取消 

                // 正在下发的MAC
                that.mac_send = [];
                for (let i = 0; i < res.length; i++) {
                    let str = data.MAC[i] + '下发' + (data.type == 1 ? '固件命令' :'配置命令')+ (res[i] ? '成功~' : '下发失败~');
                    if (res[i]) {
                        // 添加到正在下发的数据
                        that.mac_send.push(data.MAC[i]);

                        // 下发成功的开始显示进度条 
                        $('.' + data.MAC[i]).show();


                    } else {
                        toastr.error(str);
                    }
                }
            },(err) => {
                toastr.error('网络繁忙~')
                console.log(err);
            })
        },
        // 高度
        loc: function () {
            // 采用的局部 vue 所以这里 有些许 jquery
            let footloc = $('.main-footer').offset().top;
            $('.main-footer').hide();
            this.appheight = "calc(100vh - " + $("#app").offset().top + "px)";
        },
        // 防抖 输入停止后才搜索
        fd_: function () {
            if(that.fd != null) {
                clearTimeout(that.fd);
                that.fd = null;
            }
            that.fd = setTimeout(function () { that.table_init(); },500);
        },
         // 数据初始化
        table_init() {
            try {
                if (that.datatable != null) {
                    that.datatable.destroy();
                }
                $.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
                that.datatable = $('#dataTable').on('draw', function (e, settings, techNote, message) {
                    console.log(e, settings, techNote)
                    console.log('An error has been reported by DataTables: ', message);
                }).on('xhr.dt', function (e, settings, json, xhr) {
                    // 每次请求数据之后根据勾选显示每个房间 的勾选框
                    setTimeout(() => { 
                        that.show_rcu_chek();
                    }, 10);
                    })
                    .DataTable({
                    "data": null,
                    "ordering": true,
                    "paging": true,
                    "serverSide": true,
                    "ajax": function (datas, callback, settings) {
                        datas.roomnumber = that.roomnumber;
                        datas.room_type = that.room_type;
                        datas.room_online_satatus = that.room_online_satatus;
                        that.getdata(datas, res => {
                            Cookies.set('room_online_satatus', that.room_online_satatus, { expires: 7, path: window.location.pathname });
                            Cookies.set('page_length', that.page_length, { expires: 7, path: window.location.pathname });
                            Cookies.set('room_type', that.room_type, { expires: 7, path: window.location.pathname });
                            callback(res)
                        });
                    },
                    'iDisplayLength': that.page_length,
                    "columns": [{
                        'sTitle': '',/* .substring(6) */
                        'render': function (data, type, rcu) { 
                            try {
                                let STR =
                                    `<div class= "` + (rcu.ONLINE_SATATUS == 0 ? 'mb' : '') + `">
                                <input type="checkbox" data-text='`+ JSON.stringify(rcu) +`' onchange="that.sel_rcu_chek(this)" class="rcu_chek" >
                                <button type="button" data-text='`+ JSON.stringify(rcu) +`' onclick="that.sel_rcu_chek(this,1)"  class= " btn btn-xs btn-success ">下发</button>
                                <button type="button" class= "`+ (rcu.ONLINE_SATATUS == 1 ? 'btn btn-xs btn-success' : 'btn btn-xs btn-danger') + `">` + (rcu.ONLINE_SATATUS == 1 ? '在线' : '离线') + `</button>
                                <button type="button" class= " btn btn-xs `+
                                (rcu.RoomStatusID == 16 ? 'btn-info' : (rcu.RoomStatusID == 2 ? 'btn-success' : (rcu.RoomStatusID == 8 ? 'btn-warning' : (rcu.RoomStatusID == 4 ? 'btn-secondary' : 'btn-danger'))))
                                 + `">` +
                                (rcu.RoomStatusID == 16 ? '空房' : (rcu.RoomStatusID == 2 ? '出租中' : (rcu.RoomStatusID == 8 ? '退房中' : (rcu.RoomStatusID == 4 ? '待租' : '未知'))))
                                + `</button> <lable class="">` + (("" + rcu.COMM_TIMEMARK) == 'null' ? " - " : rcu.COMM_TIMEMARK) + ` </lable>
                                ` + rcu.MAC +`  
                                `+ rcu.ROOM_NUMBER + `
                                </div>
                                <div title='已完成0%' class="`+ rcu.MAC +`  progress mt-1 mb-1" style="display:none;">
                                <div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                                </div>
                                <!--  @* style的效果是父元素绝对居中  *@ -->
                                <span class="  text-white" style='position:absolute;line-height:16px;width: 200px;text-align: center;left: calc(50% - 100px);'>完成0%</span></div>`;
                                return STR;
                            } catch (e) {
                                console.log(e);
                            }
                        }
                    }],
                    "fnCreatedRow": function (nRow, aData, iDataIndex) {
                        $(nRow).addClass('p-1').addClass('m-0 row col-md-4 col-12');
                        $(nRow).children("td").addClass('col-12 p-2 bg-white');
                            // .addClass('shadow');
                        return;
                    },
                    "searching": false,
                    "autoWidth": false,
                    "bDeferRender ": true,
                    "bLengthChange": false,
                    "language":
                    {
                        "sProcessing": "处理中...",
                        "sLengthMenu": "显示 _MENU_ 项结果",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                    }
                });
            } catch (e) {
                console.log(e)
            }
        },
        //全选按钮文字 点击事件
        moresel_all_: function () {
            // 没有开启多选无法点击
            if (!that.moresel) { return; }
            that.moresel_all = !that.moresel_all;
            that.moresel_all_sel();
        },
        // 取消全选
        moresel_all_sel: function () {
            // 没有开启多选无法点击
            if (!that.moresel) { return; }
            $('.rcu_chek').prop('checked',that.moresel_all);//房间前面的按钮全勾选、取消勾选
            $('.rcu_chek').change();//调用事件添加、移除到选定的数组中
        },
        // 请求进度
        send_schedule: function () {
            let data = new Object();
            data.mac = that.mac_send;
            data.type = that.send_type;
            MyPost("/Api/send_schedule", { isSwal: false, data }, (res) =>
            {
                    if (res == null) {
                        toastr.error('网络繁忙~');
                        return;
                }
                
                that.mac_send =  that.mac_send.filter(key => {
                    if (res[key] != null) {
                        $('.' + key).find('div').css('width', res[key]);
                        $('.' + key).parent().find('span').html(res[key]);
                    }
                    return res[key] != "100.00%";
                });

            }, (err) => {
                toastr.error('网络繁忙~')
                console.log(err);
            })
        }
    },
    watch: {
        mac_send: function (val) {
            that.mac_send = val;
            if (that.timer_send != null) {
                clearInterval(that.timer_send);
            }
            if (that.mac_send.length>0) {
                that.timer_send = setInterval(() => {
                    // 定时请求 发送进度接口 
                    that.send_schedule();
                }, 500);
            }
        },
    }
}
Vue.createApp(app).mount('#app');
$('#app').show();