{% extends "layout.html" %}

{% block content %}
    <div class="container">
        <br>
        <ul class="list-group">
            <li class="list-group-item list-group-item-dark">
                <strong>任务管理</strong>
            </li>
            <li class="list-group-item">
               <form id="formAdd">
                    {% csrf_token %}
               <div class="row">
                   {% for field in form %}
                        <div class="col-md-6">
                            <label>{{ field.label }}</label> {# .label表示verbose_name字段 #}
                            {{ field }}
                            <span class="error-msg" style="color: red"></span>
                        </div>
                    {% endfor %}
               </div>
                <div style="margin: 10px">
                    <button id="btnAdd" type="button" class="btn btn-primary">提交</button>
                </div>
                </form>

            </li>
        </ul>


{#        <h3>test1</h3>#}
        {# dom方式绑定 #}
{#        <input type="button" class="btn btn-primary" value="dom绑定" onclick="click_me();">#}
        {# jquery 方式绑定 #}
{#        <input id="btn1" type="button" class="btn btn-primary" value="jquery绑定">#}
{#        <h3>test2</h3>#}
{#        <input type="text" id="txtUser" placeholder="姓名">#}
{#        <input type="text" id="txtAge" placeholder="年龄">#}
{#        <input id="btn2" type="button" class="btn btn-primary" value="提交">#}

        <li class="list-group-item">
                <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">ID</th>
                          <th scope="col">标题</th>
                          <th scope="col">级别</th>
                            <th scope="col">负责人</th>
                            <th scope="col">操作</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for obj in queryset %}
                        <tr>
                          <th scope="row">{{ obj.id }}</th>
                          <td>{{ obj.title}}</td>
                            <td>{{ obj.get_level_display}}</td>
                            <td>{{ obj.user.user_name}}</td>
                          <td>
                              <a class="btn btn-primary btn-sm" href="#">编辑</a>
                              <a class="btn btn-danger btn-sm" href="#">删除</a>
                          </td>
                        </tr>
                      {% endfor %}
                      </tbody>
                    </table>
        </li>

        <div style="display: flex; justify-content: center;"> {# 居中 #}
            <nav aria-label="Page navigation example" style="margin: 10px">
                <ul class="pagination">
                    {{ page_nav_string }}
                </ul>
            </nav>
        </div>

    </div>

{% endblock %}


{% block js %}
    <script type="text/javascript">
        $(function () {
            //页面框架加载后自动执行
            bindBtn1Event();
            bindBtn2Event();
            bindBtnAddEvent();
        })
        function bindBtnAddEvent(){
             $("#btnAdd").click(function (){
                $(".error-msg").empty();
                 //先把错误信息置空
                $.ajax({
                url:"/task/add",
                type:"post",
                data:$("#formAdd").serialize(),
                    dataType:"JSON", //把json字符串转为前端js对象
                success: function (res){
                    console.log(res);
                    if(res.status){
                        alert("添加成功");
                        location.reload(); //刷新页面
                    }
                    else {
                        // alert("添加失败");
                        // 循环每一个错误
                        $.each(res.error,function (name,data){
                            $("#id_" + name).next().text(data[0]);
                            // modelform自动生成的input框id属性，就是id_+字段名
                            // .next()表示下一个标签，.text()设置内容
                        })
                    }
                }
            })
            })
        }

        function bindBtn1Event(){
            // jquery 方式绑定
            $("#btn1").click(function (){
                $.ajax({
                url:"/task/ajax",
                type:"get",
                data:{
                    n1:123,
                    n2:456
                },
                    dataType:"JSON", //把json字符串转为前端js对象
                success: function (res){
                    console.log(res);
                    alert(res.n1);
                }
            })
            })
        }

        function bindBtn2Event(){
            $("#btn2").click(function (){
                 $.ajax({
                url:"/task/ajax",
                type:"get",
                data:{
                    name:$("#txtUser").val(),
                    age:$("#txtAge").val()
                },
                    dataType:"JSON", //把json字符串转为前端js对象
                success: function (res){
                    console.log(res);
                    alert(res.name);
                }
                 })
            })
        }

        function click_me(){
            // console.log("点击按钮");
            // alert("按钮点击");
            $.ajax({
                url:"/task/ajax",
                type:"get",
                data:{
                    n1:123,
                    n2:456
                },
                success: function (res){
                    console.log(res);
                    alert(res)
                }
            })
        }

    </script>

{% endblock %}