{% extends "manage/apps/index.html" %}
{% block add_form_extra %}
{% endblock %}
{% block edit_form_extra %}
{% endblock %}
{% block body_content %}
    <div>
        <ul id="m-tabs">
            <li data-state="ing" class="in">执行单</li>
            <li data-state="fail">失效单</li>
            <li data-state="done">完成单</li>
        </ul>
    </div>
    <style>
        #m-tabs {
            display: inline-flex;
            margin-bottom: -1px;
        }

        #m-tabs li {
            padding: 7px 15px;
            cursor: pointer;
            color: #00c1de;
        }

        #m-tabs li.in {
            background: #f5f6fa;
            color: #888;
            cursor: initial;
            border: 1px solid #f3f3f3;
        }
        .datagrid-row-detail{
            color: #666;
        }
    </style>
{% endblock %}
{% block sub_javascript %}

    <script src="{{ STATIC_URL }}vender/jquery-easyui-1.6.6/src/datagrid-detailview.js"></script>
    <script>
        $(function () {
            var STATE = 'ing';
            var table_id = '#mTable',
                fm_add = '#fm-add',
                dialog_add = '#dialog-add',
                dialog_edit = '#dialog-edit',
                search_url = "{% url 'manage-task-search' %}",
                add_url = "{% url 'manage-task-add' %}",
                edit_url = "{% url 'manage-task-edit' %}",
                cancel_url = "{% url 'manage-task-cancel' %}";

            function init() {
                $(fm_add).find("select[name='emails']").attr("multiple", true);
                $(fm_add).find("select[name='emails']").addClass("js-example-basic-multiple");
                $(fm_add).find("select[name='emails']").select2();
            }

            var T = renderTable({
                url: search_url,
                defaultParams: {state: STATE},
                view: detailview,
                columns: [[
                    {field: 'name', title: '名称', width: 300},
                    {field: 'created_at', title: '创建时间', width: 100},
                    {field: 'state_display', title: '状态', width: 50},
                    {
                        field: 'action', title: '操作', width: 60, formatter: function (val, row, index) {
                        var actions = [];
                        {#                        actions.push("<a class='button-inline edit' href='" + edit_url + ("?id=" + row.id) + "' data-index='" + index + "'>详情</a>");#}
                        if (row.state == 'ing') {
                            actions.push("<a class='button-inline action-confirm' href='" + cancel_url + ("?id=" + row.id) + "' data-hit='确定取消该任务吗'>取消</a>");
                        }
                        return actions.join('<span class="text-explode">|</span>');
                    }
                    }
                ]],
                detailFormatter: function (rowIndex, rowData) {
                    return rowData['remark'];
                }
            });

            init();

            $(document).on("click", '#add', function (e) {
                e.preventDefault();
                $(fm_add).form('clear');
                $(fm_add).attr('action', add_url);
                $('select').trigger('change.select2');
                $(dialog_add).dialog('open').dialog('setTitle', '新建提醒任务');
            });
            $(document).on('click', '.edit', function (e) {
                e.preventDefault();
                var index = $(this).attr('data-index');
                var action = $(this).attr('href');
                var row = $(table_id).datagrid('getData').rows[index];
                $(dialog_edit).find('form').form('clear');
                $(dialog_edit).find('form').form('load', row);
                $('select').trigger('change.select2');
                $(dialog_edit).find('form').attr('action', action);
                $(dialog_edit).dialog('setTitle', '编辑车辆').dialog('open');
            });

            $(document).on("click", ".action-confirm", function (e) {
                e.preventDefault();
                var $this = $(this);
                var hit = $this.attr('data-hit');
                var action = $this.attr('href');
                myPostConfirm('提示', hit, action, {'csrfmiddlewaretoken': CSRF_TOKEN}, function () {
                    T.table.datagrid("reload");
                });
            });

            $(document).on('click', '.dialog-close', function (e) {
                e.preventDefault();
                var $this = $(this);
                var dialog = $this.attr('data-dialog');
                $(dialog).dialog('close');
            });

            $(document).on('click', '#save-add, #save-edit', function (e) {
                e.preventDefault();
                var fm_id = $(this).attr('data-fm');
                var dialog = $(this).attr('data-dlg');
                var action = $(fm_id).attr('action');
                var data = getFormParams(fm_id);
                data['csrfmiddlewaretoken'] = CSRF_TOKEN;
                post(action, data, function (result) {
                    if (result.errcode == 200) {
                        showMsg('操作成功');
                        $(dialog).dialog('close');
                        T.table.datagrid("reload");
                    } else {
                        showMsg(result.errmsg);
                    }
                });
            });

            $(document).on("click", "#m-tabs li", function (e) {
                e.preventDefault();
                $("#m-tabs li").removeClass('in');
                $(this).addClass('in');
                STATE = $(this).attr('data-state');
                T.opts['defaultParams'] = {'state': STATE};
                T.table.datagrid("reload");
            })
        });
    </script>
{% endblock %}