window.popBox = window.popBox || {};
 
window.popBox.showMsg = (function () {
  var mongolia, //蒙层
    promptBox, //提示框
    closeSpan, //关闭按钮
    titleSpan, //提示标题
    contextSpan, //提示信息
    okBtn, //确定按钮
    cancelBtn, //取消按钮
    isRegEvent, //是否注册事件
    option; //传入的参数
 
  /**
   * 初始化蒙层
   */
  function initMongolia() {
    if (!mongolia) { //没有蒙层则初始化
      //蒙层：覆盖整个窗口，半透明的黑色
      mongolia = document.createElement("div");
      mongolia.style.position = "fixed";
      mongolia.style.width = mongolia.style.height = "100%";
      mongolia.style.left = mongolia.style.top = 0;
      mongolia.style.background = "rgba(0,0,0,.5)";
      document.body.appendChild(mongolia);
    }
    mongolia.style.display = "block"; //展示蒙层
  }
 
  /**
   * 初始化提示框
   */
  function initPromptBox() {
    //提示框：宽高300，位置居中
    if (!promptBox) {
      promptBox = document.createElement("div");
      //promptBox.style.width = promptBox.style.height = "300px";
	  promptBox.style.width = option.width || "600px";
	  promptBox.style.height = option.height || "400px";
      promptBox.style.background = "#fff";
      promptBox.style.fontSize = "16px";
      promptBox.style.position = "absolute";
      //promptBox.style.top = promptBox.style.left = "40%";
	  promptBox.style.top = "100px";
      //promptBox.style.marginLeft = promptBox.style.marginTop = "-150px";
      promptBox.style["data-popBox-id"] = "promptBox";
	  promptBox.style.borderRadius = "8px 8px";
      initPromptContext();
      mongolia.appendChild(promptBox);
      titleSpan = document.querySelector("[data-popBox-id='title']"); //提示标题
      contextSpan = document.querySelector("[data-popBox-id='message']"); //提示信息
      closeSpan = document.querySelector("[data-popBox-id='close']"); //关闭按钮
      okBtn = document.querySelector("[data-popBox-id='ok']"); //确定按钮
      cancelBtn = document.querySelector("[data-popBox-id='cancel']"); //取消按钮
	  
	  titleSpan.style.fontSize = "20px";
	  titleSpan.style.color = "#ffffff";
	  
	  var clientHeight = document.documentElement.clientHeight; //屏幕的可见高度
	  var clientWidth = document.documentElement.clientWidth; 	//屏幕的可见宽度
	  var top = (clientHeight - promptBox.getBoundingClientRect().height) / 2 + "px";
	  var left = (clientWidth - promptBox.getBoundingClientRect().width) / 2 + "px";
	  tjdLog("top = " + top + ", left = " + left);
	  promptBox.style.top = top;
	  promptBox.style.left = left;
	  
	  tjdLog("width = " + promptBox.style.width);
	  tjdLog("height = " + promptBox.style.height);
	  tjdLog("top = " + promptBox.style.top);
	  tjdLog("left = " + promptBox.style.left);
    }
 
    okBtn.innerText = option.okText || "确定";
    cancelBtn.innerText = option.cancelText || "取消";
    titleSpan.innerText = option.title || "提示";
    contextSpan.innerText = option.context || "";
  }
 
  /**
   * 初始化提示框中的内容
   */
  function initPromptContext() {
    //内容包含：标题，关闭按钮，提示信息，确定按钮，取消按钮
 
    //创建标题，关闭按钮
    var div = document.createElement("div");
    div.innerHTML = `<span style="float:left;" data-popBox-id="title"></span>
    <span style="float:right;cursor:pointer;color:white" data-popBox-id="close">X</span>`;
    div.style.height = "50px";
    div.style.padding = "10px 10px";
    div.style.background = "#193c7b";
    div.style.boxSizing = "border-box";
	div.style.borderRadius = "8px 8px 0 0";
    promptBox.appendChild(div);
 
    //创建提示信息
    div = document.createElement("div");
	e = '<span data-popBox-id="message"></span>';
	inputlist = eval(option.input);
	height = 0;
	msgVal = eval(option.msgVal);
	for(i=0;i<inputlist.length;i++){
		if (typeof msgVal !== "undefined" && msgVal !== null){
			e += '<p><label class="el-label">'+inputlist[i]+'</label><input type="text" class="el-input__inner" id="input'+i+'" value="'+msgVal[0][i+1]+'"></p>';
		}else
			e += '<p><label class="el-label">'+inputlist[i]+'</label><input type="text" class="el-input__inner" id="input'+i+'"></p>';
		height += 56;
	}
	div.innerHTML = e;
    div.style.height = height + "px"; //"240px";
    div.style.padding = "10px 10px";
    div.style.boxSizing = "border-box";
	div.id = "popBoxContent";

	selects = eval(option.selects);
	if (typeof selects !== "undefined" && selects !== null){
		k=i+1;
		for(i=0;i<selects.length;i++){
			var p = document.createElement("p");
			var mySelect = document.createElement("select");
			mySelect.id = "select"+i;
			json = selects[i];
			for (var key in json) {
				tjdLog(key);     //获取key值
				label = document.createElement("label");
				label.setAttribute("class","el-label");
				label.innerHTML = key;
				p.appendChild(label);
				tjdLog(selects[i][key]); //获取对应的value值
				if (typeof msgVal !== "undefined" && msgVal !== null){
					//mySelect.setAttribute("value",msgVal[0][k+i]);
					mySelect.options.add(new Option(msgVal[0][k+i],msgVal[0][k+i]));
				}else
					mySelect.options.add(new Option("请选择","请选择"));
				for(j=0;j<json[key].length;j++){
					mySelect.options.add(new Option(json[key][j],json[key][j]));
				}
			}
			height += 58;
			mySelect.setAttribute("class", "el-input__inner");
			p.appendChild(mySelect);
			div.appendChild(p);
		}
	}
	
	div.style.height = height + "px"; //"240px";
    div.style.padding = "10px 10px";
    div.style.boxSizing = "border-box";
    promptBox.appendChild(div);
	
 
    //创建确定按钮，取消按钮
    div = document.createElement("div");
    div.innerHTML = '<button style="float:left;margin:20px 50px;cursor:pointer;width:124px;" class="el-button" data-popBox-id="cancel"></button>'+
					'<button style="float:right;margin:20px 50px;cursor:pointer;width:124px;" class="el-button el-button--primary" data-popBox-id="ok"></button>';
    div.style.height = "50px";
    div.style.padding = "10px 20px";
    div.style.boxSizing = "border-box";
    promptBox.appendChild(div);
  }
 
  //注册事件
  function regEvent() {
    if (!isRegEvent) { //未注册事件
      //1.点击关闭，点击蒙层，点击取消按钮
      closeSpan.onclick = function () {
        mongolia.style.display = "none"; //隐藏蒙层
      };
 
      okBtn.onclick = function () {
        option && option.okFunction && (ret = option.okFunction());
		if(ret == 1)
			mongolia.style.display = "none"; //隐藏蒙层
      }
 
      cancelBtn.onclick = function () {
        option && option.cancelFunction && option.cancelFunction();
        mongolia.style.display = "none"; //隐藏蒙层
      }
 
      //2.拖动提示框事件
      window.onmousedown = function (e) {
        var target = getTarget(e.target); //是否包含目标元素
 
        if (target) {
          var style = window.getComputedStyle(target);
          var left = parseInt(style.left);
          var top = parseInt(style.top);
          var disX = parseInt(e.pageX) - left;
          var disY = parseInt(e.pageY) - top;
 
          window.onmousemove = function (e) {
            var newLeft = parseInt(e.pageX) - disX;
            var newTop = parseInt(e.pageY) - disY;
 
            promptBox.style.left = newLeft + "px";
            promptBox.style.top = newTop + "px";
 
          };
          window.onmouseup = window.onmouseleave = function () {
            window.onmousemove = null;
          }
        }
      };
 
      function getTarget(target) {
        while (target) {
          //if (target.tagName === "DIV" && target.style["data-popBox-id"] === "promptBox") {
			  if (target.tagName === "DIV" && target.style["data-popBox-id"] === "title") {
            return target;
          } else {
            target = target.parentElement;
          }
        }
        return false;
      }
    }
  }
 
 
  /**
   * @param {object} opts 
   * opts.title : 提示标题
   * opts.context : 提示信息
   * opts.cancelText:取消按钮内容
   * opts.okText:确定按钮内容
   * opts.cancelText:取消按钮内容
   * opts.okFunction:确定按钮的回调函数
   * opts.cancelFunction:取消按钮的回调函数
   */
  function showMsg(opts) {
    if (typeof opts === "string") {
      option = {
        context: opts
      }
    } else {
      option = opts || {};
    }
	if (promptBox){
		mongolia.removeChild(promptBox);
		promptBox = null;
	}
	tjdLog("input = " + option.input + "length = " + eval(option.input).length);
	
	if (typeof option.selects !== "undefined" && option.selects !== null){
		tjdLog("selects = " + option.selects + "length = " + eval(option.selects).length);
		for(i=0;i<eval(option.selects).length;i++){
			json = eval(option.selects)[i]
			for (var key in json) {
				tjdLog(key);     //获取key值
				tjdLog(json[key]); //获取对应的value值
			}
		}
	}
	tjdLog("okFunction = " + option.okFunction);
    initMongolia();
    initPromptBox();
    regEvent();
  }
 
  return showMsg;
}());


function getPopBoxData(inputkeys, selectkeys, cmd, defaultPara){
			popboxContentId = document.getElementById("popBoxContent");
			inputs = popboxContentId.getElementsByTagName("input");
			tjdLog(inputs);
			tjdLog(inputs.length);
			msg = cmd;
			for(i=0;i<inputs.length;i++){
				tjdLog(inputs[i].value);
				if(inputs[i].value==""){
					alert("输入内容不完整！");
					return "";
				}
				msg += "&" + inputkeys[i] + "=" + inputs[i].value;
			}
			selects = popboxContentId.getElementsByTagName("select");
			if (typeof selects !== "undefined" && selects !== null){
				tjdLog(selects);
				tjdLog(selects.length);
				for(i=0;i<selects.length;i++){
					index=selects[i].selectedIndex;
					val = selects[i].options[index].value;
					tjdLog(val);
					if(val=="请选择"){
						alert("请选择相应内容！");
						return "";
					}
					msg += "&" + selectkeys[i] + "=" + val;
				}
			}
			if (typeof defaultPara !== "undefined" && defaultPara !== null){
				for(i=0;i<defaultPara.length;i++){
					msg += "&" + defaultPara[i][0] + "=" + defaultPara[i][1];
				}
			}
			
			tjdLog(msg);
			return msg;
	}