layui.use(['tree', 'layer', 'form', 'element'], function() {
    var tree = layui.tree;
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var element = layui.element;

    var currentDay = null;

    function buildMonthTree(data) {
        var monthMap = {};
        (data || []).forEach(function (y) {
            (y.children || []).forEach(function (m) {
                var month = m.title;
                var arr = monthMap[month] || (monthMap[month] = []);
                (m.children || []).forEach(function (d) {
                    arr.push({ title: d.title, id: d.id });
                });
            });
        });
        var result = [];
        Object.keys(monthMap).sort().forEach(function (month) {
            result.push({ title: month + '月', id: month, children: monthMap[month] });
        });
        return result;
    }

    function loadDateTree() {
        $.ajax({
            url: baseUrl + "/deviceLog/dates/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            beforeSend: function () {
                layer.load(1, {shade: [0.1,'#fff']});
            },
            success: function (res) {
                layer.closeAll('loading');
                if (res.code === 200) {
                    var monthTree = buildMonthTree(res.data);
                    tree.render({
                        elem: '#date-tree',
                        id: 'dateTree',
                        data: monthTree,
                        click: function(obj){
                            var node = obj.data;
                            if (node.id && node.id.length === 8) {
                                currentDay = node.id;
                                $('#selected-day').val(currentDay);
                                loadDevices(currentDay);
                            }
                        }
                    });
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/";
                } else {
                    layer.msg(res.msg || '加载日期失败', {icon: 2});
                }
            }
        });
    }

    function loadDevices(day) {
        $('#device-list').html('');
        $.ajax({
            url: baseUrl + "/deviceLog/day/" + day + "/devices/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            beforeSend: function () {
                layer.load(1, {shade: [0.1,'#fff']});
            },
            success: function (res) {
                layer.closeAll('loading');
                if (res.code === 200) {
                    if (!res.data || res.data.length === 0) {
                        $('#device-list').html('<div class="layui-text">当日未找到设备日志</div>');
                        return;
                    }
                    var html = '';
                    res.data.forEach(function(item){
                        var types = item.types || [];
                        var typeBtns = '';
                        types.forEach(function(t){
                            typeBtns += '<button class="layui-btn layui-btn-xs" data-type="' + t + '" data-device-no="' + item.deviceNo + '">下载(' + t + ')</button>';
                        });
                        html += '<div class="layui-col-xs12" style="margin-bottom:8px;">' +
                            '<div class="layui-card">' +
                            '<div class="layui-card-body">' +
                            '<span>设备编号：<b>' + item.deviceNo + '</b></span>' +
                            '<span style="margin-left:20px;">类型：' + types.join(',') + '</span>' +
                            '<span style="margin-left:20px;">文件数：' + item.fileCount + '</span>' +
                            '<span style="margin-left:20px;">' + typeBtns + '</span>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    });
                    $('#device-list').html(html);
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/";
                } else {
                    layer.msg(res.msg || '加载设备失败', {icon: 2});
                }
            }
        });
    }

    function downloadDeviceLog(day, type, deviceNo) {
        if (!day) {
            layer.msg('请先选择日期', {icon: 2});
            return;
        }
        if (!type) {
            layer.msg('请选择设备类型', {icon: 2});
            return;
        }
        if (!deviceNo) {
            layer.msg('请输入设备编号', {icon: 2});
            return;
        }
        var offsetVal = parseInt($('#file-offset').val());
        var limitVal = parseInt($('#file-limit').val());
        var offset = isNaN(offsetVal) || offsetVal < 0 ? 0 : offsetVal;
        var limit = isNaN(limitVal) || limitVal <= 0 ? 200 : limitVal;
        $.ajax({
            url: baseUrl + "/deviceLog/download/init/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            data: JSON.stringify({ day: day, type: type, deviceNo: deviceNo, offset: offset, limit: limit }),
            dataType:'json',
            contentType:'application/json;charset=UTF-8',
            success: function (res) {
                if (res.code !== 200) {
                    layer.msg(res.msg || '初始化失败', {icon: 2});
                    return;
                }
                var pid = res.data.progressId;
                var progressIndex = layer.open({
                    type: 1,
                    title: '下载中',
                    area: ['520px', '200px'],
                    content: '<div style="padding:16px;">' +
                        '<div class="layui-text" style="margin-bottom:15px;">压缩生成进度</div>' +
                        '<div class="layui-progress" lay-showPercent="true" lay-filter="buildProgress">' +
                        '<div class="layui-progress-bar" style="width:0%"><span class="layui-progress-text">0%</span></div>' +
                        '</div>' +
                        '<div class="layui-text" style="margin:12px 0 15px;">下载接收进度</div>' +
                        '<div class="layui-progress" lay-showPercent="true" lay-filter="receiveProgress">' +
                        '<div class="layui-progress-bar" style="width:0%"><span class="layui-progress-text">0%</span></div>' +
                        '</div>' +
                        '</div>'
                });
                var timer = setInterval(function(){
                    $.ajax({
                        url: baseUrl + '/deviceLog/download/progress/auth',
                        headers: {'token': localStorage.getItem('token')},
                        method: 'GET',
                        data: { id: pid },
                        success: function (p) {
                            if (p.code === 200) {
                                var percent = p.data.percent || 0;
                                element.progress('buildProgress', percent + '%');
                                // 隐藏实时大小，不更新文字
                            }
                        }
                    });
                }, 500);

                $.ajax({
                    url: baseUrl + "/deviceLog/day/" + day + "/download/auth?type=" + encodeURIComponent(type) + "&deviceNo=" + encodeURIComponent(deviceNo) + "&offset=" + offset + "&limit=" + limit + "&progressId=" + encodeURIComponent(pid),
                    headers: {'token': localStorage.getItem('token')},
                    method: 'GET',
                    xhrFields: { responseType: 'blob' },
                    xhr: function(){
                        var xhr = new window.XMLHttpRequest();
                        xhr.onprogress = function(e){
                            var percent = 0;
                            if (e.lengthComputable && e.total > 0) {
                                percent = Math.floor(e.loaded / e.total * 100);
                                element.progress('receiveProgress', percent + '%');
                            }
                            // 隐藏实时大小，不更新文字
                        };
                        return xhr;
                    },
                    success: function (data, status, xhr) {
                        var disposition = xhr.getResponseHeader('Content-Disposition') || '';
                        var filename = type + '_' + deviceNo + '_' + day + '.zip';
                        var match = /filename=(.+)/.exec(disposition);
                        if (match && match[1]) {
                            filename = decodeURIComponent(match[1]);
                        }
                        element.progress('buildProgress', '100%');
                        element.progress('receiveProgress', '100%');
                        var blob = new Blob([data], {type: 'application/zip'});
                        var link = document.createElement('a');
                        var url = window.URL.createObjectURL(blob);
                        link.href = url;
                        link.download = filename;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(url);
                        clearInterval(timer);
                        setTimeout(function(){ layer.close(progressIndex); }, 300);
                    },
                    error: function () {
                        clearInterval(timer);
                        layer.close(progressIndex);
                        layer.msg('下载失败或未找到日志', {icon: 2});
                    }
                });
            }
        });
    }

    $(document).on('click', '#download-btn', function () {
        downloadDeviceLog(currentDay, $('#device-type-input').val(), $('#device-no-input').val());
    });

    $(document).on('click', '#device-list .layui-btn', function () {
        var deviceNo = $(this).attr('data-device-no');
        var type = $(this).attr('data-type');
        downloadDeviceLog(currentDay, type, deviceNo);
    });

    loadDateTree();
    limit();
});