{template "header.html"}

<link href="{THEME_PATH}assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet" type="text/css" />

<script src="{THEME_PATH}assets/js/avatar/iscroll-zoom.js"></script>
<script src="{THEME_PATH}assets/js/avatar/hammer.js"></script>
<script src="{THEME_PATH}assets/js/avatar/lrz.all.bundle.js"></script>
<script src="{THEME_PATH}assets/js/avatar/jquery.photoClip.js"></script>
<style>

    #clipArea {
        margin: 20px;
        height: 300px;
    }
    #file,
    #clipBtn {
        margin: 5px;
    }
    #view {
        margin: 0 auto;
        width: 100px;
        height: 100px;
    }
</style>

<div style="margin-top: -20px;">

        <div class="row">
            <div class="col-md-12">
            <div id="view"><img class="img-circle" width="100" height="100" src="{dr_avatar($member.uid)}?cache={SYS_TIME}">
            </div>
            <div class="col-md-12">

                <div id="clipArea"></div>

                <div class="form-body">

                    <div class="form-group">
                        <div class="col-md-12 text-center">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <span class="btn green btn-file">
                                                <span class="fileinput-new"> {dr_lang('选择图片')} </span>
                                                <input type="file" id="file">
                                            </span>
                            </div>
                            <button type="button" class="btn btn-info" id="clipBtn"> {dr_lang('保存头像')}</button>
                            <button type="button" class="btn btn-info red" onclick="clear_avatar()" id="clipBtn2"> {dr_lang('清空头像')}</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    <form action="" class="form-horizontal" method="post" name="myform" id="myform">
        {$form}
    </form>
</div>

<script>
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [200, 200],
        outputSize: [200, 200],
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        loadStart: function() {
            //console.log("照片读取中");
        },
        loadComplete: function() {
            //console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            $('#dr_file').val(dataURL);
            dr_ajax_submit('{dr_now_url()}', 'myform', '2000', '{FC_NOW_URL}&r={rand(0, 9999)}');
        }
    });
    function clear_avatar() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '{dr_url('api/avatar_del', ['id'=>$member.uid])}',
            success: function (json) {
                dr_cmf_tips(json.code, json.msg);
                setTimeout("window.location.href = '{FC_NOW_URL}&r={rand(0, 9999)}'", 2000);
                
            },
            error: function(HttpRequest, ajaxOptions, thrownError) {
                dr_ajax_alert_error(HttpRequest, this, thrownError);
            }
        });
    }
</script>

{template "footer.html"}