const loading = {
    _loadItem:null,
    _anItem:null,
    _tipItem:null,
    _tipLabel:null,
    _showTip:true,
    _type:1,
    showLoading(config){
        if(this._loadItem){
            this._loadItem.remove();
            this._loadItem = null;
            this._anItem = null;
            this._tipItem = null;
            this._showTip = true;
            this._type = 1;
        }
        if(typeof config == "string"){
            this._tipLabel = config;
            this._type = 1;
        }else if(typeof config == "object"){
            this._tipLabel = typeof config.tip == "string" ? config.tip : "loading...";
            this._type = typeof config.type == "number" ? config.type : 1;
            this._showTip = typeof config.showTip == "boolean" ? config.showTip : true;
        }else{
            this._tipLabel = "loading...";
            this._type = 1;
        }
        this.createEle();
    },
    createEle(){
        this._loadItem = $(`<div class="load-view" id="load"><div class="uni-mask"></div></div>`);
        this._anItem = $(`<div class="load-an-view"></div>`);
        this._tipItem =  $(` <div class="load-tip">${this._tipLabel}</div>`);
        switch(this._type) {
            case 1:
               let load1 = $(`<div class="load-circle">
                    <div class="load-container load-container1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="load-container load-container2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="load-container load-container3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>`)
                load1.appendTo(this._anItem);
                break;
            case 2:
               let load2 = $(`<div class="fading-circle">
                    <div class="sk-circle1 sk-circle"></div>
                    <div class="sk-circle2 sk-circle"></div>
                    <div class="sk-circle3 sk-circle"></div>
                    <div class="sk-circle4 sk-circle"></div>
                    <div class="sk-circle5 sk-circle"></div>
                    <div class="sk-circle6 sk-circle"></div>
                    <div class="sk-circle7 sk-circle"></div> 
                    <div class="sk-circle8 sk-circle"></div>
                    <div class="sk-circle9 sk-circle"></div>
                    <div class="sk-circle10 sk-circle"></div>
                    <div class="sk-circle11 sk-circle"></div>
                    <div class="sk-circle12 sk-circle"></div>
                </div>`)
                load2.appendTo(this._anItem);
                break;
            case 3:
                let load3 = $(`<div class="three-bounce">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>`)
                load3.appendTo(this._anItem);
                break;
            case 4:
                let load4 = $(`<div class="chasing-dots">
                        <div class="dot1"></div>
                        <div class="dot2"></div>
                    </div>`)
                load4.appendTo(this._anItem);
                break;
            case 5:
            let load5 = $(`<div class="wave">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>`)
                load5.appendTo(this._anItem);
                break;
       } 
       this.addEle();
    },
    addEle(){
        this._anItem.appendTo(this._loadItem);
        if(this._showTip){
            this._tipItem.appendTo(this._loadItem);
        }
        this._loadItem.appendTo($('body'));
    },
    hideLoading(){
        this._loadItem.remove();
        this.resetData();
    },
    resetData(){
        this._loadItem = null;
        this._anItem = null;
        this._tipItem = null;
        this._showTip = true;
        this._type = 1;
    }
}

function prompt(title, html, sort, ifroundOff = '0', location = '0') {
    let promptHtml = "";
    promptHtml += `<div class="promptBox display alignCenter location_` + location + `" id="promptSort_` + sort + `">`;
    promptHtml += `<div class="overallShade"></div>`;
    promptHtml += `<div class="promptCont et-02s radius15PX">`;
    if (ifroundOff == "1") promptHtml += `<div class="roundOff radius50P display alignCenter justifyCenter"><img src="/assets/images/ic_faild@2x.png" class="icon-cross iconfont"/></div>`;
    promptHtml += html;
    promptHtml += `</div>`;
    promptHtml += `</div>`;
    $('body').append(promptHtml);
}

function removePrompt(sort) {
    $('#promptSort_' + sort).remove();
    // $('.promptBox').remove();
}

$(document).on("click", ".roundOff", function () {
    $(this).parent().parent('.promptBox').remove();
})

$(document).on("click", ".socialHandle", function () {
	var androidurl = $(this).data('href');

	if (window.android) {
		window.android.callAndroid("open," + androidurl)
		return;
	}
	if (window.webkit && window.webkit.messageHandlers) {
		window.webkit.messageHandlers.nativeExt.postMessage({ msg: 'open,' + androidurl });
		return;
	}
	$("#jump").parent().attr("href", androidurl), $("#jump").trigger("click");
})

$(document).on("click", ".linkBTN", function () {
	var url = $(this).data('href');
	$(this).attr('disabled', true).attr('loading', 'true');
	window.location.href = url
})

var s = "";
function messaged(msg, type){
    let html; let list = {'warning':'icon-warning','error':'icon-red','success':'icon-green','info':'icon-info'};

	html =`<div id="alert-bar" class="alert-bar"><div id="alert-message" class="alert-message"><span data-v-b3f3cefe="" class="icon-jinbi ${list[type]}"></span> ${msg}</div><button id="close-alert" onclick="remBar()" class="close-btn">×</button></div>`
    
    $('body').append(html);
    setTimeout(()=>{ 
        $('.alert-bar').css({opacity:'1'})
        clearTimeout(s);
        s = setTimeout(function () {
            $('.alert-bar').css({opacity:'0'})
            setTimeout(()=>{
				$('.alert-bar').remove();
			},300)
        }, 5000);  
    },100)
}

//iconID 1:warning  2:succeed   3:error  4:loding
function toast(title, html, sort, holdTime, iconID) {
    $('.toastBox').remove();
    let toastHtml = "";
    if (iconID == 4) {
        toastHtml += `<div class="toastBox toastStatus` + iconID + `  display alignCenter" id="toastSort_` + sort + `">`;
        toastHtml += `<div class="overallShade"></div>`;
        toastHtml += `<div class="toastCont radius7PX">`;
        toastHtml += `<div class="loader display alignCenter justifyCenter"> <img src="/assets/images/logoIcon/favicon.png" alt="" /></div>`;
        toastHtml += `</div>`;
        toastHtml += `</div>`;
    } else {
        toastHtml += `<div class="toastBox toastStatus` + iconID + `  display alignStart" id="toastSort_` + sort + `">`;
        toastHtml += `<div class="overallShade"></div>`;
        toastHtml += `<div class="toastCont bounceInDown et-02s display alignStart">`;
        // toastHtml += `<div class="icon"><i class="iconfont icon-StatusIcon` + iconID + `"></i></div>`;
        toastHtml += `<div class="tipText flex1"><p>` + html + `</p></div>`;
        toastHtml += `</div>`;
        toastHtml += `</div>`;
    }

    $('body').append(toastHtml);
    if (holdTime != "") { removeToast(sort, holdTime) }
};

function modalMessage(html, sort = 'file', holdTime = 2000, iconID = 1) {
    $('.toastBox').remove();
    let toastHtml = "";
    if (iconID == 4) {
        toastHtml += `<div class="toastBox toastStatus` + iconID + `  display alignCenter" id="toastSort_` + sort + `">`;
        toastHtml += `<div class="overallShade"></div>`;
        toastHtml += `<div class="toastCont radius7PX">`;
        toastHtml += `<div class="loader display alignCenter justifyCenter"> <img src="/assets/images/logoIcon/favicon.png" alt="" /></div>`;
        toastHtml += `</div>`;
        toastHtml += `</div>`;
    } else {
        toastHtml += `<div class="toastBox toastStatus` + iconID + `  display alignStart" id="toastSort_` + sort + `">`;
        toastHtml += `<div class="overallShade"></div>`;
        toastHtml += `<div class="toastCont bounceInDown et-02s display alignStart">`;
        // toastHtml += `<div class="icon"><i class="iconfont icon-StatusIcon` + iconID + `"></i></div>`;
        toastHtml += `<div class="tipText flex1"><p>` + html + `</p></div>`;
        toastHtml += `</div>`;
        toastHtml += `</div>`;
    }

    $('body').append(toastHtml);
    if (holdTime != "") { removeToast(sort, holdTime) }
};

function removeToast(sort, holdTime = 500) {
    window.setTimeout(function () {
        $('#toastSort_' + sort).remove();
    }, holdTime);
}

// e=0 riseBox ， e=1 slideBox  tx：Title
function UPDownBox(html, idName, e = 0, tx = '', closeTXT) {
    let UPDownBoxHtml = ""
    let effect = e == 0 ? 'riseBox' : 'slideBox'
    UPDownBoxHtml += `<div class="UPDownBox ` + effect + `" id="UPDownBox_` + idName + `">
    <div class="overallShade"></div>
    <div class="container h5MaxWidth">
        <div class="boxTitle display alignCenter justifyEnd">

            <div class="title flex1"><p>`+ tx + `</p></div>

    <div class="closeUPDownBox">`

    if (closeTXT) {
        UPDownBoxHtml += `<p>` + closeTXT + `</p>`
    } else {
        UPDownBoxHtml += `<i class="icon-cross iconfont"></i>`
    }

    UPDownBoxHtml += `</div>
    </div>
        <div class="content">
           `+ html + `
        </div>
    </div>
    </div>`
    $('body').append(UPDownBoxHtml);

    $(document).on("click", ".closeUPDownBox, .cancelBtn", function () {
        console.log($("#UPDownBox_" + idName))
        if (idName) {
            $("#UPDownBox_" + idName).remove();
        } else {
            $(".UPDownBox").remove();
        }
    })
}

// ---/


function pushMessage(tipText, n) {
    let MessageHtml = ""
    MessageHtml += `
        <div class="pushMessage"> 
        <div class="tipText length-limit-10" style="-webkit-line-clamp: `+ n + `;">` + tipText + `</div>       
        </div>
    `
    prompt("", MessageHtml, "pushMessage", '1');
}


function awarding(imgsrc, reward, explain) {
    let awardingHtml = ""
    awardingHtml += `
        <div class="awardingBox">         
            <img src="`+ imgsrc + `" alt="" />   
            <div class="hipe">
                <h3>`+ reward + `</h3>
                <p>`+ explain + `</p>
            </div>
            <div class="actionBar display alignCenter alignStretch justifyCenter"> 
                <div class="take clickBtn_S display alignCenter justifyCenter" onclick="removePrompt('awardingBox')">Take</div>
            </div>
        </div>
    `
    prompt("", awardingHtml, "awardingBox", '0');
}

function confirmBox(title, msg, url) {
    let awardingHtml = ""
    awardingHtml += `
        <div class="awardingBox dialogArg">
			<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" viewBox="0 0 24 24" style="position: absolute;bottom: 20px;left: -10px;"><g stroke="black" stroke-linecap="round" stroke-width="2"><path fill="black" fill-opacity="0" stroke-dasharray="64" stroke-dashoffset="64" d="M12 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="64;128"/><animate fill="freeze" attributeName="fill-opacity" begin="1.2s" dur="0.15s" values="0;0.3"/></path><path fill="none" stroke-dasharray="20" stroke-dashoffset="20" d="M8.99999 10C8.99999 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10C15 10.9814 14.5288 11.8527 13.8003 12.4C13.0718 12.9473 12.5 13 12 14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.4s" values="20;0"/></path></g><circle cx="12" cy="17" r="1" fill="black" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="1s" dur="0.2s" values="0;1"/></circle></svg>
            <div class="hipes">
                <h1 style="margin-bottom:10px;font-size: 22px;">`+ title + `</h1>
                <p>`+ msg + `</p>
            </div>
            <div class="actionBar display alignCenter alignStretch justifyCenter"> 
                <div class="take clickBtn_S display alignCenter justifyCenter" style="margin-top: 40px;" onclick="onJump('`+ url + `')">Go Ahead</div>
            </div>
        </div>
    `
    prompt("", awardingHtml, "dialogArg", '1');
}

function questionBox(title, msg, url, id) {
    let awardingHtml = ""
	let csrfToken = $('meta[name="csrf-token"]').attr('content');
    awardingHtml += `
        <form method="post" action="`+ url + `" class="awardingBox dialogArg">
			<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" viewBox="0 0 24 24" style="position: absolute;bottom: 20px;left: -10px;"><g stroke="black" stroke-linecap="round" stroke-width="2"><path fill="black" fill-opacity="0" stroke-dasharray="64" stroke-dashoffset="64" d="M12 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="64;128"/><animate fill="freeze" attributeName="fill-opacity" begin="1.2s" dur="0.15s" values="0;0.3"/></path><path fill="none" stroke-dasharray="20" stroke-dashoffset="20" d="M8.99999 10C8.99999 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10C15 10.9814 14.5288 11.8527 13.8003 12.4C13.0718 12.9473 12.5 13 12 14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.4s" values="20;0"/></path></g><circle cx="12" cy="17" r="1" fill="black" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="1s" dur="0.2s" values="0;1"/></circle></svg>
            <div class="hipes">
                <h1 style="margin-bottom:10px;font-size: 22px;">`+ title + `</h1>
                <p>`+ msg + `</p>
				<div class="withdraw-wrap" style="min-height:auto;height:auto;padding:0px">
					<div class="box" method="post" style="background:#FFF;margin-bottom:0px;padding:.38rem 0 1px 0" >
						<h3 style="color:#000;margin-bottom:0px">Questions answer</h3>
						<div class="wrap" style="margin-top:8px;margin-bottom:20px;">
							<b style="color:#000"><img src="/assets/templates/gmg/img/ic_uncon.png" style="height:20px"  /></b>
							<div>
								<input class="" name="answer" type="text" placeholder="Enter your answer" style="color:#000;text-align:left;" required />
							</div>
						</div>
					</div>
				</div>
				
            </div>
			<input name="id" type="hidden" value="`+ id + `" />
			<input type="hidden" name="_token" value="`+ csrfToken + `">
            <div class="actionBar display alignCenter alignStretch justifyCenter"> 
                <button type="submit" class="take clickBtn_S display alignCenter justifyCenter" style="margin-top: 40px;" onclick="">Send Answer</button>
            </div>
        </form>
    `
    prompt("", awardingHtml, "dialogArg", '1');
}

// 提示框
var t = "";
function Toast(msg,type,duration,ok,url) {
    let html;

	html =`
	<uni-modal class="msg-active" style="display: block;">
		<div class="uni-mask"></div>
		<div class="uni-modal">`;
			if( type ){
			html +=`<div class="uni-modal__hd"><strong class="uni-modal__title">${type}</strong></div>`;
			}
			html +=`<div class="uni-modal__bd">${msg}</div>
			<div class="uni-modal__ft">
				<div onclick="closeNode()" class="uni-modal__btn uni-modal__btn_primary" style="color: rgb(0, 122, 255);">
					OK
				</div>`;
			
				if( ok ){
					html +=`<a href="${url}" class="uni-modal__btn uni-modal__btn_default" style="color: rgb(0, 0, 0);">
						${ok}
					</a>`;
				}
				
		html +=`</div>
		</div>
	</uni-modal>
	`

    $('body').append(html);
	if( duration !== false ){
		duration = (typeof duration === 'number') ? duration : 10000;
		setTimeout(()=>{
			$('.msg-active').remove();
		},duration);
	}
}

function closeNode(){
	$('.msg-active').remove();
}

function remBar(){
	$('.alert-bar').remove();
}

// 跳转
function onJump(url,open){
    if(open) window.open(url);
    else window.location.href = url;
}

// copy内容
function copy(value) {
	const text = document.createElement('textarea');
	text.value = value;
	text.setAttribute('readonly', 'readonly')
	document.body.appendChild(text);
	text.select();
	if (document.execCommand('copy')) {
			document.execCommand('copy');
	}
	document.body.removeChild(text);
	messaged('Copied to clipboard successfully','success')
} 
