{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/front/project"><i class="fa fa-dashboard"></i> 项目列表</a></li>
            <li><a href="/front/project/task/list?pid={{ .T.pid }}"><i class="fa fa-dashboard"></i> 项目分发</a></li>
            <li><a href="#"><i class="fa fa-dashboard"></i> 标注列表</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="box">
                    <div class="box-body">
                        <div id="status-div" class="col-xs-1" style="width: auto;float: right;">
                            <label for="typeSelect" class="form-inline">类型：
                                <select class="form-control selectpicker" id="typeSelect">
                                    <option value="-1">全部</option>
                                </select></label>
                            <label for="fieldSelect" class="form-inline">字段：
                                <select class="form-control selectpicker" id="fieldSelect">
                                    <option value="-1">未选择</option>
                                </select></label>
                            <label id="moneyInput" class="form-inline" style="display: none">
                                <input type="number" id="minInput" class="form-control" style="width: 70px;padding: 5px" placeholder="最小值">
                                <input type="number" id="maxInput" class="form-control" style="width: 70px;padding: 5px" placeholder="最大值">
                            </label>
                            <label id="fieldStatus1" class="form-inline" style="display: none;padding-left: 10px">
<!--                                <select class="form-control selectpicker" id="fieldExist">-->
<!--                                    <option value="0">存在</option>-->
<!--                                    <option value="-1">不存在</option>-->
<!--                                </select></label>-->
                                <input type="checkbox" id="field-exist"> 不存在</label>
                            <label class="form-inline" id="fieldStatus2" style="display: none;padding-left: 10px">
<!--                                <select class="form-control selectpicker" id="statusSelect">-->
<!--                                    <option value=-1>全部</option>-->
<!--                                    <option value=0>未标注</option>-->
<!--                                    <option value=1>已标注</option>-->
<!--                                </select></label>-->
                                <input type="checkbox" id="field-tag"> 未标注</label>
                            <label class="form-inline" id="search-btn" style="padding-left: 10px;display: none">
                                <input type="button" class="btn btn-sm btn-default" value="搜索" onclick="searchBtn()">
                            </label>
                            <label for="statusSelect" class="form-inline">状态：
                                <select class="form-control selectpicker" id="statusSelect">
                                    <option value="-1">全部</option>
                                    <option value="false" selected>未标注</option>
                                    <option value="true">已标注</option>
                                </select></label>
                        </div>
                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th></th>
                                <th>状态</th>
                                <th>标题</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
        </div>
    </section>
</div>

{{include "com/footer.html"}}
<script>
    menuActive("/front/user/task/list");

    let pid = {{ .T.pid }}
    let stype = {{ .T.stype }}
    let sourceinfo = {{ .T.s_sourceinfo }}
    let topsubtype = {{ .T.topsubtype }}
    let allfield = {{ .T.allfield }}

    $(function () {
        ttable = $('#dataTable').dataTable({
            "paging": true,
            "lengthChange": false,
            "processing": true,
            "pageLength": 20,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "serverSide": true,
            "ajax": {
                "url": "",
                "type": "post",
                "data": {"pid": pid, "s_sourceinfo": sourceinfo, "stype": stype}
            },
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "fnDrawCallback": function () {
                $("ul.pagination").prepend("&nbsp;&nbsp;&nbsp;转到第 <input type='text' id='changePage'   style='width:20px;'> 页    <a type='text' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>GO</a>");
                $('#dataTable-btn').click(function (e) {
                    var redirectpage = 0
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    }
                    ttable.api().page(redirectpage).draw(false);
                });
                this.api().column(0).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            },
            "columns": [
                {"data": null, width: "2%"},
                {"data": "b_istag", width: "6%", render: function (val) {
                        let tmp;
                        if (val) {
                            tmp = '<span style="display: inline-block;font-size:14px;color: green">已标注</span>'
                        } else {
                            tmp = '<span style="display: inline-block;font-size:14px;color: #428bca">未标注</span>'
                        }
                        return tmp
                    }},
                {"data": "v_baseinfo.title", render: function (val, index, row) {
                        let tmp;
                        if (row["b_istag"]) {
                            tmp = '<a style="display: inline-block;cursor:pointer;font-size:16px;color: green" target="_blank" href="/front/user/remark/detail/?pid='+pid+'&did=' + row._id + '&s_sourceinfo='+sourceinfo+'">' + val + '</a>'
                        } else {
                            tmp = '<a style="display: inline-block;cursor:pointer;font-size:16px;color: #428bca" target="_blank" href="/front/user/remark/detail/?pid='+pid+'&did=' + row._id + '&s_sourceinfo='+sourceinfo+'">' + val + '</a>'
                        }
                        return tmp
                    }}
            ],
            "initComplete": function () {
                $("#dataTable_filter").append($('#status-div'))
            },
            "fnServerParams": function (e) {
                e.datatype = $("#typeSelect option:selected").val()
                e.field = $("#fieldSelect option:selected").val()
                if (e.field !== "-1") {
                    e.hasno = $("#field-exist").is(':checked')
                    e.notag = $("#field-tag").is(':checked')
                    if (e.field === "budget" || e.field === "bidamount") {
                        e.minval = $('#minInput').val()
                        e.maxval = $('#maxInput').val()
                    }
                }
                e.b_istag = $("#statusSelect option:selected").val()
            }
        });

        for (let i in topsubtype) {
            let opt = document.createElement('option');
            opt.innerText = topsubtype[i];
            opt.value = topsubtype[i];
            $('#typeSelect')[0].appendChild(opt)
        }
        $("#typeSelect").selectpicker("refresh");
        for (let i in allfield) {
            for (let key in allfield[i]) {
                let opt = document.createElement('option');
                opt.innerText = allfield[i][key];
                opt.value = key;
                $('#fieldSelect')[0].appendChild(opt)
            }
        }
        $("#fieldSelect").selectpicker("refresh");

        $('#typeSelect').on('changed.bs.select', function () {
            ttable.api().ajax.reload();
        })
        $('#fieldSelect').on('changed.bs.select', function () {
            // ttable.api().ajax.reload();
            let v = $("#fieldSelect option:selected").val()
            console.log(v, v !== "-1")
            if (v !== "-1") {
                $('#fieldStatus1').show()
                $('#fieldStatus2').show()
                $('#search-btn').show()
                if (v === "budget" || v === "bidamount") {
                    $('#moneyInput').show()
                }else {
                    $('#moneyInput').hide()
                }
            }else {
                ttable.api().ajax.reload();
                $('#search-btn').hide()
                $('#fieldStatus1').hide()
                $('#fieldStatus2').hide()
            }
        })
        $('#statusSelect').on('changed.bs.select', function () {
            ttable.api().ajax.reload();
        })
    });

    function searchBtn() {
        ttable.api().ajax.reload();
    }

</script>
