{% extends 'backend_layout.html' %}
{% block css %}
    <style>
        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: right;
        }

        .avatar-container {
            height: 200px;
            width: 200px;
            padding: 2px;
            border: 1px solid #dddddd;
            position: relative;
        }

        .avatar-container img {
            height: 100%;
            width: 100%;
            border: 0;
            overflow: hidden;
        }

        .avatar-container .text {
            text-align: center;
        }

        .avatar-container .img-file {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            position: absolute;
            z-index: 102;
        }
    </style>
{% endblock %}
{% block conent %}
    <ol class="breadcrumb">
        <li><a href="#">用户管理</a></li>
        <li class="active">用户信息</li>
    </ol>
    <div>

        <div class="row" style="position: relative;">
            <form class="form-horizontal">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">用户名</label>

                        <div class="col-xs-5">
                            <p class="form-control-static">wupeiqi</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2 control-label">邮箱</label>

                        <div class="col-xs-5">
                            <p class="form-control-static">email@example.com</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nickname" class="col-xs-2 control-label">昵称</label>

                        <div class="col-xs-5">
                            <input type="text" class="form-control" id="nickname" placeholder="请输入昵称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blogUrl" class="col-xs-2 control-label">博客地址</label>

                        <div class="col-xs-5">
                            <input type="text" class="form-control" id="blogUrl"
                                   placeholder="如：wupeiqi,则个人博客为http://www.xxx.com/wupeiqi.html">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blogTheme" class="col-xs-2 control-label">博客主题</label>

                        <div class="col-xs-5">
                            <select id="blogTheme" class="form-control">
                                <option>默认主题</option>
                                <option>红色火焰</option>
                                <option>嘿嘿哈嘿</option>
                                <option>哈哈哈嘿哈</option>
                                <option>编不出来了</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blogTitle" class="col-xs-2 control-label">博客标题内容</label>

                        <div class="col-xs-8">
                            <textarea id="blogTitle" style="min-height: 100px" class="form-control"
                                      placeholder="来一杯鸡汤..."></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-offset-2 col-xs-10">
                            <button type="submit" class="btn btn-primary">保 存</button>
                        </div>
                    </div>

                </div>
            </form>
            <div style="position: absolute;" class="col-xs-offset-7 col-xs-5">
                <div class="avatar-container">
                    <iframe style="display: none;" id="upload_iframe" name="upload_iframe"></iframe>
                    <form method="POST" action="/backend/upload-avatar.html" enctype="multipart/form-data"
                          target="upload_iframe">
                        {% csrf_token %}
                        <img id="previewImg" origin="/static/imgs/avatar/default.png"
                             src="/static/imgs/avatar/default.png"
                             style="border-radius: 50%;">

                        <div class="text">点击图片更换(<a href="#">撤销</a>)</div>
                        <input id="avatarImg" name="avatar_img" type="file" class="img-file"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            bindChangeAvatar4();
        });

        function bindChangeAvatar1() {
            $('#avatarImg').change(function () {
                var file_obj = $(this)[0].files[0];
                $('#prevViewImg')[0].src = window.URL.createObjectURL(file_obj)
            })
        }

        function bindChangeAvatar2() {
            $('#avatarImg').change(function () {
                var file_obj = $(this)[0].files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file_obj);
                reader.onload = function (e) {
                    $('#previewImg')[0].src = this.result;
                };
            })
        }

        function bindChangeAvatar3() {
            $('#avatarImg').change(function () {
                var file_obj = $(this)[0].files[0];
                var form = new FormData();
                form.add('img_upload', file_obj);

                $.ajax({
                    url: '',
                    data: form,
                    processData: false,  // tell jQuery not to process the data
                    contentType: false,  // tell jQuery not to set contentType
                    success: function (arg) {

                    }
                })
            })
        }

        function bindChangeAvatar4() {
            $('#avatarImg').change(function () {
                $(this).parent().submit();

                $('#upload_iframe').load(function () {
                    var iframeContents = this.contentWindow.document.body.innerText;
                    iframeContents = JSON.parse(iframeContents);
                    if (iframeContents.status) {
                        $('#previewImg').attr('src', '/' + iframeContents.data);
                    }
                })

            })
        }

    </script>
{% endblock %}