// ==UserScript==
// @icon             https://www.thfou.com/img/favicon.png
// @name             阿里巴巴电脑访问无线端详情
// @namespace        https://www.thfou.com/
// @version          1.0.0
// @description      添加阿里巴巴电脑详情页直接访问无线端详情按钮
// @author           头号否
// @match            *://detail.1688.com/offer/*
// @supportURL       https://www.thfou.com/liuyan
// @compatible	     Chrome
// @compatible	     Firefox
// @compatible	     Edge
// @compatible   	 Safari
// @compatible   	 Opera
// @compatible	     UC
// @license          GPL-3.0-only
// @grant            none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    //定义一个全局弹出层
    window.layerstart = '<div id = "layer" style = "box-shadow: 1px 1px 2px #888888;border-radius:5px;top:0em;left:0;width:40%;height:868px;background-color:#FFFFFF;position:fixed;z-index:999;display:none;border:1px solid #d2d2d2">';
    layerstart += '<div style="text-align:right;padding:0.8em;border-bottom:1px solid #d2d2d2;"><a href="javascript:;" onclick="closelayer()" style="color:#FFFFFF;background-color:#FF5722;width:80px;text-align:center;padding:0.5em;border-radius:2px;padding-left:1em;padding-right:1em;">关闭</a><div style="float:left;font-size: 16px;">手机阿里</div></div>';
    window.layerend = '</div>';

    //让层居中显示
    window.layerCenter = function(){
	    var bwidth = window.screen.availWidth;
	    var bheight = window.screen.availHeight;
	    var layertop = (bheight - 720) / 2;
	    var layerleft = (bwidth - 1280) / 2;

	    if(layertop <= 70){
		    layertop = "1em";
	    }
	    else{
		    layertop = (layertop - 125) + "px";
	    }

	    //改变css
	    //$("#layer").css({"top":layertop,"left":layerleft});
	    //原生js改变css
	    //alert(layertop);
	    document.getElementById("layer").style.top = layertop;
	    document.getElementById("layer").style.left = "30%";
    }
    //创建一个遮罩层
    window.keepout = function(){
	    var fade = '<div id = "fade" style = "width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 0;z-index: 99;" onclick = "closelayer()"></div>';
	    //$("body").append(fade);
	    var div = document.createElement("div");
	    div.innerHTML = fade;
		document.body.appendChild(div);
    }

    //关闭层
    window.closelayer = function(){
	    //$("#layer").hide();
	    document.getElementById("layer").style.display = "none";
		//showSidebar();
		//$("#layer").remove();
		var layer = document.getElementById("layer");
		layer.parentNode.removeChild(layer);

		//$("#fade").remove();
		var fade = document.getElementById("fade");
		fade.parentNode.removeChild(fade);
    }

    //创建一个显示按钮
    function imgurl(){
	    //$("body").append('<div id = "imgbtn" style = "position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick = "showImgurl()"><img src = "https://libs.xiaoz.top/material/image.png" width = "36px" height = "36px" /></div>');
	    //使用原生js添加按钮
	    var div = document.createElement("div");
	    div.innerHTML = '<div id = "imgbtn" style = "background:#ff7300;color:#fff;position:fixed;right:20em;top:40em;z-index:88;cursor:pointer;padding:10px;border-radius:50px;" onclick = "showImgurl()">查看无线端详情</div>';
	    document.body.appendChild(div);
    }
    //显示按钮
    var url = document.URL;//获取当前url
    var curPage = url.match(/[\d]+(?=\.html)/);//获取当前数字
    var num = curPage;
    window.showImgurl = function(){
	    var up = layerstart;
	    up += '<iframe src = "https://m.1688.com/offer/' + num + '.html" width="100%" height="868px" frameborder="0"></iframe>';
	    up += layerend;
	    //$("body").append(up);
	    var div = document.createElement("div");
	    div.innerHTML = up;
		document.body.appendChild(div);

	    //$("#layer").show();
	    document.getElementById("layer").style.display = "block";

	    //显示遮罩
	    keepout();
	    //居中显示层
	    layerCenter();
    }

    imgurl();
})();