const uploadUrl = '/api-common/v1/upload?folder=' + 'gk/cmptLogo' + '&cmptId=' + getCId()

$(function () {

    $('#cmptBgColorInput').bind('keyup', function () {
        $('#cmptBgColorInput').val(this.value);
        $('#hdcmptBgColorInput').val(this.value);
        cmptBgColorChange();
    });

    // by ggb 2025-05-30 为图片添加点击事件监听器
    $("#style-select img").click(function () {
        // 获取当前点击图片的样式值
        var selectedStyle = $(this).data('style');
        // 移除所有图片的 active-style 样式
        $("#style-select img").removeClass('active-style');
        // 为当前点击的图片添加 active-style 样式
        $(this).addClass('active-style');
        // 将选中的样式值存储到隐藏的 input 中
        $("#detailStyle").val(selectedStyle ?? '1');
    });
    // by ggb 2025-05-30 是否显示 底部的tab
    $('#isShowTabSwitch').change(function () {
        // 根据 checkbox 状态更新隐藏 input 的值
        $('#isShowInput').val(this.checked ? 1 : 0);
    });


    $('.savebtn').click(function () {
        let bg = $('#cmptBgColorInput').val();
        let logo = $('#hdcmptLogo').val();
        let detailStyle = $('#detailStyle').val()?.trim();
        let isShowTab = $('#isShowInput').val();
        let cmptId = getCId();
        if (bg.length != 6) {
            layer.msg('请输入6位合法字符!');
            return;
        }
        const param = {
            detailStyle: detailStyle == null || detailStyle.length === 0 ? '1' : detailStyle,
            cmptId,
            logo,
            cmptbgColor: "#" + bg,
            isShowTab
        };
        $.ajax({
            url: '/gk/cmpt/saveCmpt',
            data: JSON.stringify(param),
            contentType: "application/json",
            type: 'post',
            success: function (data) {
                if (data.status) {
                    window.location.reload();
                    layer.msg('保存成功', { icon: 1, time: 1500 });
                } else {
                    layer.msg('保存失败', { icon: 5, time: 1500 });
                }
            }
        })
    });

    $('#download').click(function () {
        $.ajax({
            url: "/gk/cmpt/getCmpt",
            data: { 'cmptId': getCmptId() },
            success: function (data) {
                if (data.content && data.content.logo) {
                    window.open(window.location.origin + "/img/download/" + getCmptId())
                } else {
                    alert("上传图片保存后，再请点击下载图片！")
                }
            }
        })
    });
    // 小程序路径
    const path = "pages/race/raceHome?raceId=" + getCmptId()
    $('.path').text("小程序路径：" + path)
    // 获取短链接
    getShortLink()
})


//<!cdata[
function g(o) {
    return document.getElementById(o);
}

function hoverli(n) {
    for (var i = 1; i <= 2; i++) {
        g('tb_' + i).className = 'aa';
        g('tbc_0' + i).className = 'undis';
    }
    g('tbc_0' + n).className = 'list2';
    g('tb_' + n).className = 'bb';
}

function fun() {
    hoverli(1);
}

function hoverli2(n) {
    for (var i = 1; i <= 11; i++) {
        g('js_' + i).className = 'aa';
        g('jsc_0' + i).className = 'undis';
    }
    g('jsc_0' + n).className = 'list2';
    g('js_' + n).className = 'bb';
}

function fun2() {
    hoverli2(1);
}

function hoverli3(n) {
    for (var i = 1; i <= 11; i++) {
        g('be_' + i).className = 'aa';
        g('bec_0' + i).className = 'undis';
    }
    g('bec_0' + n).className = 'list2';
    g('be_' + n).className = 'bb';
}

function fun3() {
    hoverli2(1);
}

function cmptBgColorChange() {
    let cmptBgColorInput = $("#cmptBgColorInput").val();
    $("#cmptBgColor").css('background-color', cmptBgColorInput);
    $('#color_c').css('background-color', cmptBgColorInput);
}

//文件上传处理
function changeLogoImg(imgDomNName, inputDomName, top, left, width, height) {
    var reads = new FileReader();
    logoFile = document.getElementById(inputDomName).files[0];
    if (logoFile.size / 1000 > 500) {
        layer.alert('上传的图片文件不能超过500KB。', { icon: 5, offset: ['100px', '50%'] });
        return;
    }
    reads.readAsDataURL(logoFile);
    reads.onload = function (e) {

        /*document.getElementById(imgDomNName).src = this.result;*/

        //将处理完的图片文件上传到阿里云服务器
        //上传LOGO图片
        var formData = new FormData();
        formData.append("file", logoFile);
        $.ajax({
            url: uploadUrl, /*接口域名地址*/
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.code == 200) { // 获取返回URL
                    document.getElementById(imgDomNName).src = res.content;
                    $('.logo-div').css('background', 'none');
                    $("[name='hdcmptLogo']").val(res.content);
                    $("#cmptLogoSpan").html("已上传");
                    $('#cmptLogo').addClass('cmpt-logo');
                    $('#cmptLogo').removeClass("logo");
                } else {
                    layer.msg(res.msg, { icon: 2 });
                }
            },
            beforeSend: () => {
                layer.load()
            },
            error: function (jqXHR) {
                // jqXHR.responseJSON 里通常是后端返回的 JSON
                let msg = '上传失败';
                if (jqXHR.responseJSON && jqXHR.responseJSON.msg) {
                    msg = jqXHR.responseJSON.msg;
                } else if (jqXHR.responseText) {
                    try {
                        let json = JSON.parse(jqXHR.responseText);
                        msg = json.msg || msg;
                    } catch (e) {
                        msg = jqXHR.responseText || msg;
                    }
                }
                layer.msg(msg, { icon: 2 });
            },
            complete: () => {
                setTimeout(() => {
                    layer.closeAll()
                }, 1500);
            },
        })
    };
}

function exportToPic() {

    var dom = document.getElementById("wx-logo");
    console.log(dom.clientHeight + "px");
    console.log(dom.clientHeight + "px");
    html2canvas(dom, {
        scale: 1.5,
        allowTaint: false,
        useCORS: true,
        height: 330,
        width: 330,
        x: 460,
        y: 560
    }).then(canvas => {
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        saveFile(pageData.replace("image/jpeg", "image/octet-stream"), new Date().getTime() + ".jpeg");
    });
}

/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
var saveFile = function (data, filename) {
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
// 获取短链接
function getShortLink() {
    let data = { 'cmptId': getCmptId(), page: 'pages/race/raceHome', query: 'raceId=' + getCmptId() }
    fetch("/gk/wechatMini/wxUrlLink", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then(res => res.json()).then(data => {
        if (data.content) {
            $('#shortLink').text(data.content)
        }
    })
}