{% extends base %}

{% block head %}
<style type="text/css">
label {
    float: left;
    width: 80px;
    display: block;
}
.create-tag {
    margin-bottom: 5px;
}

td.title {
    min-width: 100px;
}

.form-row-value {
    width: 180px;
}
</style>
{% end %}

{% block body %}

{% include common/script/load_select2.html %}
{% init type = "md" %}
{% init heading = T("创建笔记") %}
{% init create_btn_text = T("创建") %}

<div class="card">
    {% set-global title = T("创建笔记") %}
    {% include common/title/base_title.html %}
</div>

<div class="card">
    {% render create_type_tab %}
</div>

<div class="card">
    <form class="create-form">
        <input type="hidden" name="type" value="{{type}}">
        <table class="no-border">
            <tr>
                <td class="title">{{T("标题")}}</td>
                <td><input type="text" class="mid-text form-row-value" name="name" value="{{name}}"/></td>
            </tr>
            <tr>
                <td class="title">日期</td>
                <td><input name="date" id="selectDate" autocomplete="off" class="create-input form-row-value"/></td>
            </tr>
            <tr>
                <td>{{T("笔记本")}}</td>
                <td>
                    <select name="parent_id" value="{{parent_id}}" class="form-row-value">
                        {%for opt_group in opt_groups %}
                            <optgroup label="{{opt_group.label}}">
                                {% for item in opt_group.children %}
                                    <option value="{{item.id}}">{{item.name}}</option>
                                {% end %}
                            </optgroup>
                        {% end %}
                    </select>
                </td>
            </tr>
            <tr>
                <td>标签</td>
                <td><div class="tag-box"></div></td>
            </tr>
            <tr>
                <td>名称检测</td>
                <td><div id="checkResult"></div></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" class="btn mid-text create-btn" value="{{create_btn_text}}" onclick="xnote.note.clickCreate()">
                </td>
            </tr>
        </table>
    </form>
</div>

<script type="text/javascript" src="{{_server_home}}/_static/lib/layDate-v5.0.9/laydate.js"></script>
<script type="text/javascript">
    function getWeekDayFromLayDate(layDate) {
        var date = new Date(layDate.year, layDate.month-1, layDate.date);
        var wday = date.getDay();
        switch (wday) {
            case 0: return "周日";
            case 1: return "周一";
            case 2: return "周二";
            case 3: return "周三";
            case 4: return "周四";
            case 5: return "周五";
            case 6: return "周六";
        }
    }

    laydate.render({
        elem: '#selectDate',
        value: new Date(),
        format: "yyyy.MM.dd",
        done: function(value, date, endDate) {
            //得到日期生成的值，如：2017-08-18
            console.log(value); 
            //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(date); 
            //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            console.log(endDate); 

            $("input[name=name]").val(value + getWeekDayFromLayDate(date));
        }
    });

    $(function () {
        var noteView = xnote.note;
        noteView.inputName = "";

        var groupSelectBox = $(".group-select-box");
        var noteTypeSelect = $(".note-type-select");
        var createBtn = $(".create-btn");
        var createForm = $(".create-form");

        function reloadTags() {
            var groupId = $("[name=parent_id]").val();
            var params = {
                "tag_type": "note",
                "group_id": groupId
            }
            xnote.http.get("/note/tag/list_html", params, function (html) {
                $(".tag-box").html(html);
            })
        }

        function reloadPage(type) {
            var oldHref = window.location.href;
            var selectedType = noteTypeSelect.val();
            if (type == "group") {
                groupSelectBox.hide();
            } else {
                groupSelectBox.show();
            }
            reloadTags();
        }

        function getTagsText() {
            var tagList = [];
            $(".tag-box").find(".tag.active").each(function (index, ele) {
                tagList.push($(ele).text());
            });
            return tagList.join(" ");
        }

        noteTypeSelect.change(function (e) {
            reloadPage();
        });
        groupSelectBox.change(function (e) {
            reloadPage();
        });

        noteView.checkName = function() {
            var name = $("[name=name]").val();
            if (name === noteView.inputName) {
                return;
            }
            var params = {};
            params.name = name;
            xnote.http.post("/note/create/check", params, function (html) {
                $("#checkResult").html(html);
                noteView.inputName = name;
            });
        }

        setInterval(xnote.note.checkName, 500);

        xnote.note.clickCreate = function() {
            var params = createForm.formData();
            params._format = "json";
            params.tags = getTagsText();

            xnote.http.post("/note/create", params, function (resp) {
                console.log("create resp:", resp);
                if (resp.success) {
                    window.location.href = resp.data.url;
                } else {
                    xnote.alert(resp.message);
                }
            }).fail(function (err) {
                xnote.alert(err);
            });
        };

        $("body").on("click", ".tag", function (e) {
            $(e.target).toggleClass("active");
        });

        reloadPage();
    })
</script>

{% end %}

{% block body_right %}
    {% include note/component/sidebar/group_list_sidebar.html %}
{% end %}