<template include="./view/htm/my.template.htm">
 <slot name="my_body">
<style>
    .pic_box img{
        cursor: pointer;
    }

    .img-current{
        border: var(--primary) 2px solid;
    }
</style>
<div class="pic_box" id="pic_box">
<div class="row row-cols-3">
    <?php for($i = 1; $i <= $light_config['user_bg_num'];$i++){ ?>
    <div class="col mt-2 img-choose"><img class="rounded p-1 <?php if ($user['bgimg'] == $i){?>img-current<?php }?>" src="./plugin/zaesky_theme_light/view/img/bgimg/bg-<?php echo $i;?>.png" id="<?php echo $i;?>"/>
      </div>
    <?php } ?>
  </div>
</div>

        <div class="col-lg-6 mx-auto mt-3">
            <form action="<?php echo url('my-background');?>" method="post" id="uploadForm">
                <input class="imgsrc" id="imgsrc" name="imgsrc" type="hidden" value="" />
                <button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="正在保存...">保存背景</button>
            </form>
        </div>
    </slot>
</template>

<script>
$('a[data-active="my"]').addClass('active');
$('a[data-active="background"]').addClass('active');
</script>

<script type="text/javascript">

    $(".queren").click(function(){
        var src = $("#imgsrc").val();
    });
    
    $(".img-choose").click(function(){
        $(this).find("img").addClass("img-current");
        $(this).siblings().find("img").removeClass("img-current");
    })

    $(".pic_box img").click(function(){
        var src=$(this).attr("src");
        var src_id=$(this).attr("id");
        $("#imgsrc").val(src_id);
        $(".my_pic").attr('src',src);
    });


var jform = $('#uploadForm');
var jsubmit = $('#submit');
jform.on('submit', function() {
    var src = $("#imgsrc").val();
    if(src==''){ $.alert('没有选择背景');return false;}
    jform.reset();
    jsubmit.button('loading');
    var postdata = jform.serializeObject();
    postdata.imgsrc = src;
    postdata.uid = <?php echo $user['uid'];?>;
    $.xpost(jform.attr('action'), postdata, function(code, message) {
        if(code == 0) {
            $.alert(message);
            jsubmit.button(message).delay(1000).button('reset');
        } else if(xn.is_number(code)) {
            alert(message);
            jsubmit.button('reset');
        } else {
            jform.find('[name="'+code+'"]').alert(message).focus();
            jsubmit.button('reset');
        }
    });
    return false;
});
</script>