<!doctype html>
<html lang="zh-cn">

<head>
    {{template "header.html" .}}
</head>

<body>
    {{template "nav.html" .}}
    {{template "bread.html" .}}

    <div class="container pd-10">
        <div class="panel panel-default">
            <div class="panel-heading text-center background-white">
                <h2>{{.one.Title}}</h2>
            </div>
            <div class="panel-body">
                {{if eq 1 .BaseOption.EnableMessage}}

                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-12 control-label"><span style="color: red;">*</span>您的称呼</label>
                        <div class="col-sm-12">
                            <input type="nickname" class="form-control" id="nickname" required name="nickname">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label">联系电话</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="phone" required name="phone">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label">网站</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="web_site">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label">邮箱</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-12 control-label"><span style="color: red;">*</span>留言内容</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="message" name="message">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label">自定义信息1</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="ext" data-name="自定义1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label">自定义信息2</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="ext" data-name="自定义2">
                        </div>
                    </div>

                    <input name="id" id="id" hidden>

                    <div class="form-group" style="text-align: center;">
                        <img id="refreshCaptcha"
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAtCAMAAABS+V+kAAAAG1BMVEVHcEx6SOl4SOvjPGTjPGR5SOrjPGR5SOrjPGQZmST3AAAAB3RSTlMAgEC/QL+AqElEkgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAn9JREFUWEftVdt2hCAMBFTw/7+4cwniarXtWx/IOYuoWSYzuZjStKnAVGAqMBWYCvx7BeqqEOPyY7i5/OjyS4e90nHdjZ+Wbqe/540mxNxyvMh9MxyzLcX17tBdl/1iC4D3HdD4rWFEoxmxta0Dc1faYbjbNrxGhP3ZI3UdvVeu1RdRxgIZekwShJBknBtOjwdFyLSWuUqQ/tK+r3aR+gD2JikFBOUvYwFMR+6b40nyrigt5yCuEVTQ6bW1BrVlqRX8g3rdg21B/JZbTD9shCJZ4MH1kOYb3gCoriqgmTqSzBwzImJW0RbRtLWomsb7EFevj4KzuhZ5ey4ulZIZLxVAQu45dqHjuYGhckM2aZmMuAE9PDwBtw2h0fcjnDvjFewkpQFUWwNY6VUwknlLlw4WpoGNB0CH4+yOzN+Q2TM7Cvow6qpGEh64O8VgW7L7OPFMV/AJWDpQBS4FOWHfY3kVewFTILlvCacwCIygrL6ZAB2oQ9oTsAGQCAP3AfJeXqqetef6LDUo93lmgoQCi2jQGzAkNnC3F8YVJUw3XGNknnIM8n16RKIhN/IXw/IOrEI+AT9mmTydRcytqDICQ3kFgnAcPERGUas1IXecR2CJMMrIwBictMPxVlsip0ZlD7txsJXxFRIvqZG7LRcKXHBw6V8HjDDO5TtwpNhBPRqBNTuikACJqS2Nwdfd9jmGu4AoOQjwCRzdbbT3YQ2IULSPLkuf0OTruehYVTTNL5+LJ7pTH7ORIYxbzcDX0TrYV9TtyOSR0vg6UeYo940IRZ9lmRKgzh0m4ONs/eNR5xXTIvFLYRs7JLw/VbWb0F+M+f+L//SdCkwFpgJTgX+gwBegpA+1GZ0ezwAAAABJRU5ErkJggg=="
                            style="width: 200px; height: 100px;" lay-on="refreshCaptcha" title="点击获取验证码" alt="点击获取验证码">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label">验证码</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="code" data-name="自定义2">
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-12">
                            <input type="button" id="submit" class="btn btn-primary" value="提交">
                        </div>
                    </div>


                </form>
                {{else}}
                <h1>留言暂未开启</h1>
                {{end}}
            </div>
        </div>
    </div>
    {{template "footer.html" .}}
    {{template "js.html" .}}
    <script type="">
         var csrf = '{{.Csrf}}';
    </script>
    <script>
        $(function () {

            $('#refreshCaptcha').click(function () {
                $.ajax({
                    url: "/captcha",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    headers: {
                        "X-CSRF-Token": csrf,
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 200) {
                            $("#id").val(data.data.id);
                            $("#refreshCaptcha").attr("src", data.data.imgbase64);
                            return false;
                        } else {
                            alert(data.msg);
                            return false;
                        }
                    },
                    error: function (data) {
                        alert(data.msg);
                        return false;
                    }

                });
                return false
            })

            $('#submit').click(function () {
                var d = {};
                var t = $('form').serializeArray();
                $.each(t, function () {
                    d[this.name] = this.value;
                });
                if ( d.nickname == "" || d.code == "") {
                    alert("昵称/验证码不能为空")
                    return false;
                }
                var ex = new Map();
                $("input[name^='ext']").each(function (i) {
                    key = this.getAttribute("data-name");
                    value = this.value;
                    if (value != "") {
                        ex[key] = value
                    }
                });
                $("select[name^='ext']").each(function (i) {
                    key = this.getAttribute("data-name");
                    value = this.value;
                    if (value != "") {
                        ex[key] = value
                    }
                });
                d.ext = ex;
                //数据转换
                $.ajax({
                    url: "/message/create",
                    headers: { "X-CSRF-Token": csrf },
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(d),
                    success: function (data) {
                        if (data.code == 200) {
                            alert("您的留言已经收到,感谢您的支持与建议！")
                            window.location.href = "/";
                        } else {
                            alert(data.msg)
                        }
                        // 刷新验证码
                         $("#refreshCaptcha").trigger("click");

                    }
                })
                return false;

            });
        });
    </script>
</body>

</html>