zhikeyidon();

function addpic() {
    var pic = jq("#picbox .control-group").length;
    pic++;
    var newpic = `   <div class="control-group"><label class="control-label" for="">证书${pic}：</label>
                                        <div class="control"><input placeholder="填写证书图片地址" class="input-box"
                                                type="text" autocomplete="off" name="pic[${pic}]" onblur="skpsize(this,1)" value="">宽度：<input
                                                class="input-box  txiao"   type="text" autocomplete="off" name="w[${pic}]"
                                                value="300">高度：<input class="input-box txiao" type="text"
                                                autocomplete="off"  onblur="whsize(this,'h')" name="h[${pic}]" value="300">方向：<select class="input-box" name="fx[${pic}]" onblur="whsize(this,'.gd${pic}|direction')"  style="width:80px;">
                                                    <option value="right"> 左向右 </option>
                                                    <option value="left" selected="selected"> 右向左 </option>
                                                </select>
                                                速度：<input
                                                class="input-box txiao" type="text" autocomplete="off"
                                                onblur="whsize(this,'.gd${pic}|scrollamount')" name="sudu[1]" value="4">
                                                <input
                                                class="input-box txiao" type="text" autocomplete="off" name="x[${pic}]"
                                                value="0"  style="display: none;"><input class="input-box txiao" type="text"
                                                autocomplete="off" name="y[${pic}]" value="360" style="display: none;"></div>
                                    </div>`;

    var newdiv = `<span class="video ajmove" id="abs${pic}"
        style="height:300px; width:300px; left:0px; top:360px; position: absolute; cursor: move;">
        <span class="videomk" style="width: 100%;height: 100%;">${pic}</span>
        <marquee behavior="scroll" direction="left" scrollamount="3" class="gd${pic}" scrolldelay="100" style="position: absolute;left:0px; top:0px;height:100%;width:100%;"><div class="gdpic" style="width:999999px;height:100%;background-color:transparent;background-repeat:repeat-x;background-position:left top;position: absolute;top: 0px;left:-1920px;"></div></marquee></span>`;

    if (pic <= 30) {
        jq("#picbox").append(newpic);
        jq("#dmspmk").append(newdiv);
        dqplsd();
        zhikeyidon();
    } else {
        alert("数量建议不要超过30个！");
    }
}

function delpic() {
    var pic = jq("#picbox .control-group").length;
    pic--;
    if (pic >= 1) {
        jq("#picbox .control-group").eq(pic).remove();
        jq("#abs" + (pic + 1)).remove();
    } else {
        alert("亲再删就没有了啊！！！！");
    }
}


function zhikeyidon() {
    jQuery('#dmspmk .video').draggable({
        stop: function () {
            var zjid = jQuery(this).attr("id");
            getxy(zjid, this.style.left, this.style.top);
        }
    });
    jq(".video").resizable({
        containment: "parent",
        grid: 1,
        stop: function () {
            var zjid = jQuery(this).attr("id");
            getwh(zjid, this.style.width, this.style.height);
        }
    });
    ajyidon()
}
function getwh(objid, ws, hs) {
    var reg = /\d+/;
    var thisid = objid.match(reg);
    jQuery('[name="w[' + thisid + ']"]').val(ws.replace(/px/gi, ''));
    jQuery('[name="h[' + thisid + ']"]').val(hs.replace(/px/gi, ''));
}

function getxy(objid, xs, ys) {
    var reg = /\d+/;
    var thisid = objid.match(reg);
    jQuery('[name="x[' + thisid + ']"]').val(xs.replace(/px/gi, ''));
    jQuery('[name="y[' + thisid + ']"]').val(ys.replace(/px/gi, ''));
}



//读取记录后的操作
function yunguiwei() {
    imgguiwei();
}


function imgguiwei() {
    var mun = jq("#picbox .control-group").length;
    for (var i = 0; i <= mun; i++) {
        jQuery('#dmspmk #abs' + i).width(parseInt(jQuery('[name="w[' + i + ']"]').val()));
        jQuery('#dmspmk #abs' + i).height(parseInt(jQuery('[name="h[' + i + ']"]').val()));
        jQuery('#dmspmk #abs' + i).css('left', parseInt(jQuery('[name="x[' + i + ']"]').val()));
        jQuery('#dmspmk #abs' + i).css('top', parseInt(jQuery('[name="y[' + i + ']"]').val()));
        jQuery('#dmspmk #abs' + i + ' .gdpic').height(parseInt(jQuery('[name="h[' + i + ']"]').val()));
        jQuery('#dmspmk #abs' + i + ' .gdpic').css('background-image', 'url(' + jQuery('[name="pic[' + i + ']"]').val() + ')');
    }
    psize(jQuery('[name="bgtu"]')[0], 1);
}



function ajyidon() {
    //按键移动组件
    jQuery('.ajmove').unbind('click');
    jQuery('.ajmove').click(function () {
        jQuery('.ajmove').removeClass('ajck') && jQuery(this).addClass('ajck');
        var tshtmla = `<span class="toapa">可使用上下左右方向键移动此组件</span>`;
        jQuery('.toapa').remove() && jQuery(this).append(tshtmla);
    });
}

function whsize(objs, typs) {
    var zhi = jQuery(objs).val();

    if (typs.indexOf('|') != -1) {
        let zhiarr = typs.split("|");
        jQuery(zhiarr[0]).attr(zhiarr[1], zhi);
        let sjid = jQuery(zhiarr[0]).parent().attr('id');
        let yhtml = jQuery(zhiarr[0]).prop("outerHTML");

        jQuery(zhiarr[0]).remove();
        setTimeout(function () {
            jQuery('#' + sjid).append(yhtml);
        }, 1000);



    } else {
        var taida = jQuery(objs).attr('name');
        var reg = /\d+/;
        var thisid = taida.match(reg);
        typs == "w" ? jQuery('.video#abs' + thisid).css({ width: zhi }) : jQuery('.video#abs' + thisid).css({ height: zhi });
    }
    yunguiwei();
}


document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    var yleft = jQuery('.ajmove.ajck').offset().left;
    var ytop = jQuery('.ajmove.ajck').offset().top;

    if (e && (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 37 || e.keyCode == 39)) {

        if (e && e.keyCode == 40) { //下
            jQuery('.ajmove.ajck').offset({ top: ytop + 1 })
        }
        if (e && e.keyCode == 38) { //上
            jQuery('.ajmove.ajck').offset({ top: ytop - 1 })
        }
        if (e && e.keyCode == 37) { //左
            jQuery('.ajmove.ajck').offset({ left: yleft - 1 })
        }
        if (e && e.keyCode == 39) { //右
            jQuery('.ajmove.ajck').offset({ left: yleft + 1 })
        }

        var thiid = jQuery('.ajmove.ajck').attr('id');
        var reg = /\d+/;
        var thisid = thiid.match(reg);
        yleft = jQuery('.ajmove.ajck').css('left').replace(/px/gi, '');
        ytop = jQuery('.ajmove.ajck').css('top').replace(/px/gi, '');
        jQuery('[name="x[' + thisid + ']"]').val(yleft);
        jQuery('[name="y[' + thisid + ']"]').val(ytop);
        return false;

    }

}

jq(document).ready(function () {
    jq('.yanse').each(function () {
        jq(this).minicolors({
            control: jq(this).attr('data-control') || 'hue',
            defaultValue: jq(this).attr('data-defaultValue') || '',
            inline: jq(this).attr('data-inline') === 'true',
            letterCase: jq(this).attr('data-letterCase') || 'lowercase',
            opacity: jq(this).attr('data-opacity'),
            position: jq(this).attr('data-position') || 'bottom left',
            change: function (hex, opacity) {
                var log;
                try {
                    log = hex ? hex : 'transparent';
                    if (opacity) log += ', ' + opacity;
                    console.log(log);
                } catch (e) { }
            },
            theme: 'default'
        });

    });
});
var yaoti = 88;
var guiwei = 1;