var exhibitionId = getUrlParam("exhibition_id");
var exhibitId = getUrlParam("exhibit_id");
var number = getUrlParam("number");
$(function () {
    if (exhibitId == null) {
        // 标题
        let content = 
        `<h1 class="title" id="title">编辑#${number}展位</h1>
        <input class="back-btn" type="button" value="返回" onclick="back()">`
        $('#top-panel').html(content)

        // 上传展品
        if (number == "2") {
            content = `<div class="cover-frame">
                <img class="cover-img" id="cover-img">
                <video class="cover-video" id="cover-video" controls hidden></video>
            </div>
            <div class="cover-input-panel">
                <h3>上传展品(格式png/jpg/jpeg/mp4)</h3>
                <input type="file" id="upload-cover-btn" accept="image/jpeg,image/png,video/mp4" onchange="_uploadExhibit(this)">
                <p>图片、视频分辨率比例必须为16:9</p>
            </div>`
        } else {
            content = `<div class="cover-frame">
                <img class="cover-img" id="cover-img">
                <video class="cover-video" id="cover-video" controls hidden></video>
            </div>
            <div class="cover-input-panel">
                <h3>上传展品(格式png/jpg/jpeg)</h3>
                <input type="file" id="upload-cover-btn" accept="image/jpeg,image/png" onchange="_uploadExhibit(this)">
                <p>图片分辨率比例必须为16:9</p>
            </div>`
        }
        $('#cover-panel').html(content)
        return
    }
    $.ajax({
        type: "POST",
        url: "/manage_exhibits/edit",
        data: JSON.stringify({
            id: Number(exhibitId)
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // 标题
            let content = 
            `<h1 class="title" id="title">编辑#${number}展位</h1>
            <input class="back-btn" type="button" value="返回" onclick="back()">`
            $('#top-panel').html(content)

            // 上传展品
            if (number == "2") {
                content = 
                `<div class="cover-frame">
                    <img class="cover-img" id="cover-img" src="${data.Url}" ${checkVisibleState(isImage(data.Url))}>
                    <video class="cover-video" id="cover-video" src="${data.Url}" controls ${checkVisibleState(isVideo(data.Url))}></video>
                </div>
                <div class="cover-input-panel">
                    <h3>上传展品(格式png/jpg/jpeg/mp4)</h3>
                    <input type="file" id="upload-cover-btn" accept="image/jpeg,image/png,video/mp4" onchange="_uploadExhibit(this)">
                    <p>图片、视频分辨率比例必须为16:9</p>
                </div>`
            } else {
                content = 
                `<div class="cover-frame">
                    <img class="cover-img" id="cover-img" src="${data.Url}" ${checkVisibleState(isImage(data.Url))}>
                    <video class="cover-video" id="cover-video" src="${data.Url}" controls ${checkVisibleState(isVideo(data.Url))}></video>
                </div>
                <div class="cover-input-panel">
                    <h3>上传展品(格式png/jpg/jpeg)</h3>
                    <input type="file" id="upload-cover-btn" accept="image/jpeg,image/png" onchange="_uploadExhibit(this)">
                    <p>图片分辨率比例必须为16:9</p>
                </div>`
            }
            
            $('#cover-panel').html(content)
        },
        error: function (xhr, textStatus, error) {
            var msg = JSON.parse(xhr.responseText);
            alert(msg.error);
        }
    });
})

function back() {
    history.back();
}

function update() {
    // 展品
    var exhibit = document.getElementById("cover-img");
    if (exhibit.src.length == 0 || !isImage(exhibit.src)) {
        exhibit = document.getElementById("cover-video");
        if (exhibit.src.length == 0 || !isVideo(exhibit.src)) {
            alert("展品不可为空！");
            return;
        }
    }
    $.ajax({
        type: "POST",
        url: "/manage_exhibits/update",
        data: JSON.stringify({
            exhibition_id: Number(exhibitionId),
            room_index: 1, // 1表示类型为开幕式
            number: Number(number),
            url: exhibit.src
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert("更新展位成功")
        },
        error: function (xhr, textStatus, error) {
            var msg = JSON.parse(xhr.responseText);
            alert(msg.error);
        }
    });
}

function deleteExhibit() {
    if (exhibitId == null) {
        alert("该展品尚未保存，无法删除!")
        return
    }
    if (confirm("展品删除后不可恢复，确认删除吗？")) {
        $.ajax({
            type: "POST",
            url: "/manage_exhibits/delete",
            data: JSON.stringify({
                id: Number(exhibitId)
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                alert("删除展品成功")
                back();
            },
            error: function (xhr, textStatus, error) {
                var msg = JSON.parse(xhr.responseText);
                alert(msg.error);
            }
        });
    }
}

// upload
function _uploadExhibit(file) {
    uploadExhibit(file, function (url) {
        var imgExhibit = document.getElementById("cover-img");
        var videoExhibit = document.getElementById("cover-video");
        if (isImage(url)) {
            imgExhibit.hidden = false
            videoExhibit.hidden = true
            imgExhibit.src = url
            videoExhibit.src = ""
        } else if (isVideo(url)) {
            imgExhibit.hidden = true
            videoExhibit.hidden = false
            videoExhibit.src = url
            imgExhibit.src = ""
        }
    })
}

function _uploadExhibitAudioDetail(file) {
    uploadExhibitAudioDetail(file, function (url) {
        var audio = document.getElementById("detail-audio");
        audio.src = url;
    })
}

function _uploadExhibitDetail(file) {
    uploadExhibitDetail(file, function (url) {
        var imgExhibit = null
        var videoExhibit = null
        file.parentNode.children.forEach(element => {
            if (element.className == "detail-media-img") {
                imgExhibit = element
            } else if (element.className == "detail-media-video") {
                videoExhibit = element
            }
        })
        if (isImage(url)) {
            imgExhibit.hidden = false
            videoExhibit.hidden = true
            imgExhibit.src = url
            videoExhibit.src = ""
        } else if (isVideo(url)) {
            imgExhibit.hidden = true
            videoExhibit.hidden = false
            videoExhibit.src = url
            imgExhibit.src = ""
        }
    })
}