{% extends 'layout.html' %}

{% block content %}
    <div class="container">
    <div style="margin-bottom:10px">
        <a id="btnadd" class="btn btn-success" href="#">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            新建订单
        </a>
    </div>
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            部门列表
        </div>
        <!-- Table -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>订单ID</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>状态</th>
                <th>用户</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in queryset %}
                <tr>
                    <th>{{ item.id }}</th>
                    <th>{{ item.oid }}</th>
                    <td>{{ item.title }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.get_status_display }}</td>
                    <td>{{ item.user.username }}</td>
                    <td>
                        <!--在这里给删除按钮class属性增加值btnDelete，不能用id属性，不然只会对第1条记录有效果-->
                        <input order_id="{{ item.id }}" type="button" class="btn btn-primary btn-xs btnEdit"
                               value="修改">
                        <input order_id="{{ item.id }}" order_oid={{ item.oid }} type="button"
                               class="btn btn-danger btn-xs btnDelete" value="删除">
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <ul class="pagination">
        {{ page_nav }}
    </ul>

    <!-- 新建 & 修改 订单的模态窗口 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建订单</h4>
                </div>
                <div class="modal-body">
                    <!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->
                    <form id='saveForm'>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                <label>{{ field.label }}</label>
                                {{ field }}<span class="error" style="color:#ff0000;"> {{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}
                        {#                <button type="submit" class="btn btn-primary">保存</button>#}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnSave" type="button" class="btn btn-primary">保 存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 删除订单的模态窗口 -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>删除警告</h4>
                <p style="margin: 20px 10px;" id="del_msg"></p>
                <p style="text-align: right;">
                    <button id='confirm' type="button" class="btn btn-danger">确认删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
                </p>
            </div>
        </div>
    </div>




{% endblock %}

{% block js %}
    <script type="text/javascript">

        // 定义全局变量，用于存储行ID给后端处理
        var DELETE_ID
        var EDIT_ID

        // 页面加载完成后，执行
        $(function () {
            bindBtnaddEvent();
            bindBtnSaveEvent();
            bindBtnDeleteEvent();
            bindBtnDeleteSureEvent();
            bindBtnEditEvent();
        })

        // 新建 & 编辑 ->订单
        // 新建和编辑共用一个模态窗口
        function bindBtnaddEvent() {
            $('#btnadd').click(function () {
                // 清空对话框表单
                $('#saveForm')[0].reset()

                // 每次添加时，要将编辑行的全局变量置空
                EDIT_ID = undefined

                // 点击新建订单按钮
                $('#myModal').modal('show')
                $('#myModalLabel').text('新建订单')
            })
        }

        // 订单编辑
        function bindBtnEditEvent() {
            $('.btnEdit').click(function () {
                // 清空对话框表单
                $('#saveForm')[0].reset()

                // 获取当前行的订单ID
                var order_id = $(this).attr('order_id')
                EDIT_ID = order_id
                // 发送ajax请求到后端，获取编辑行的数据
                $.ajax({
                    url: '/order/detail/',
                    type: 'get',
                    data: {
                        nid: order_id,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {

                            // 浏览器自动会为文本框添加一个id属性,格式为id_title
                            // 将返回的data字典通过循环赋值给各自的文本框（说明详见
                            $.each(res.data, function (name, value) {
                                $('#id_' + name).val(value)
                            })

                            // 点击修改订单按钮
                            $('#myModal').modal('show')

                            // 修改模态窗口的标题
                            $('#myModalLabel').text('修改订单')
                            {#console.log(res.data.title)#}
                            {#console.log(res.data.price)#}
                            {#console.log(res.data.status)#}
                        } else {
                            alert(res.error)
                        }
                    }
                })

            })
        }

        // 订单删除询问
        function bindBtnDeleteEvent() {
            $('.btnDelete').click(function () {
                // 点击删除订单按钮
                $('#myModal1').modal('show');
                DELETE_ID = $(this).attr('order_id')
                var oid = $(this).attr('order_oid')
                $('#del_msg').text('你确定要删除订单ID为' + oid + '的商品吗？')

                console.log(oid)
            })
        }

        // 保存&修改订单
        function bindBtnSaveEvent() {
            $('#btnSave').click(function () {
                // 每次先清除span标签内容
                $('.error').empty()

                //判断来源是新建还是修改
                if (EDIT_ID) {
                    // 编辑订单
                    doEdit()
                } else {
                    // 新建订单
                    doAdd()
                }
            })
        }

        // 保存ajax请求后端
        function doAdd() {
            $.ajax({
                url: '/order/add/',
                type: 'post',
                data: $('#saveForm').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    console.log(res)
                    if (res.status) {
                        // 清空表单 $('#saveForm')是jQuery对象加【0】后-> 变为DOM对象，才有reset方法
                        $('#saveForm')[0].reset();
                        $('#myModal').modal('hide');
                        location.reload();
                    } else {
                        // 不成功要返回错误信息,each循环
                        // 错误信息包括字段名,和错误信息
                        // 浏览器自动会为文本框添加一个id属性,格式为id_title
                        // 所以在循环读出错误信息时,拼接一个id属性
                        // .next()指的是在文本框标签后的第一个标签，也就指span标签，给它设置text()值
                        // msg是一个列表所以读出msg[0]
                        $.each(res.error_msg, function (name, msg) {
                            $('#id_' + name).next().text(msg[0])
                        })
                    }

                },

            })
        }

        // 编辑ajax请求后端
        function doEdit() {
            $.ajax({
                url: '/order/edit/' + '?uid=' + EDIT_ID,
                type: 'post',
                data: $('#saveForm').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    console.log(res)
                    if (res.status) {
                        // 清空表单 $('#saveForm')是jQuery对象加【0】后-> 变为DOM对象，才有reset方法
                        $('#saveForm')[0].reset();
                        $('#myModal').modal('hide');
                        location.reload();
                    } else {
                        if (res.tips) {
                            alert(res.tips);
                        } else {
                            // 不成功要返回错误信息,each循环
                            // 错误信息包括字段名,和错误信息
                            // 浏览器自动会为文本框添加一个id属性,格式为id_title
                            // 所以在循环读出错误信息时,拼接一个id属性
                            // .next()指的是在文本框标签后的第一个标签，也就指span标签，给它设置text()值
                            // msg是一个列表所以读出msg[0]
                            $.each(res.error_msg, function (name, msg) {
                                $('#id_' + name).next().text(msg[0])
                            })
                        }
                    }
                },
            })
        }

        // 确认删除订单
        function bindBtnDeleteSureEvent() {
            $('#confirm').click(function () {
                $.ajax({
                    url: '/order/delete/',
                    type: 'get',
                    data: {
                        'nid': DELETE_ID,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            $('#myModal1').modal('hide');
                            // 每次删除完成后，将全局变量置0
                            DELETE_ID = 0;
                            location.reload();
                        } else {
                            alert('不可遇见原因，删除失败')
                        }
                    }
                })
            })
        }

    </script>
{% endblock %}