{{template "inc"}}
<!-- Main Header -->
{{template "header"}}
<!-- Left side column. 权限菜单 -->
{{template "memu"}}
<head>
    <style>

        #selectclear2 select {
            width:190px;
            height:167px;
            padding:5px;
        }
        #selectclear2{
            display: flex;
            flex-direction: row;
        }
        #selectclear2 .move{
            display: flex;
            flex-direction: column;
            margin: 20px 25px
        }
        #selectclear2 .move button{
            margin: 1px 0px;
            padding: 4px 6px;
        }
        #selectclear2 .doublebox {
            text-align:center;
        }


    </style>
</head>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-info" onclick="formReset()">新增分类抽取</button></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/admin/infotype"><i class="fa fa-dashboard"></i> 分类抽取</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>一级分类</th>
                                <th>二级分类</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="modal-info">
    <div class="modal-dialog">
        <form id="userform" class="form-horizontal" role="form">
            <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">分类信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label" style="width:20% !important;">一级分类名称:</label>
                        <div class="col-sm-10" style="width:80% !important;">
                            <select id="topclass" name="topclass" class="form-control" onclick="topfunc()">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label" style="width:20% !important;">二级分类名称:</label>
                        <div class="col-sm-10" style="width:80% !important;">
                            <select id="subclass" name="subclass" class="form-control" >
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label" style="width:20% !important;">属性:</label>
                        <div class="col-sm-10" id="selectclear2" style="width:75% !important;">
                            <div class="doublebox">
                                <select multiple="multiple" id="select3" style="overflow-x: scroll;"></select>
                            </div>
                            <div class="move" style="margin: 10px;">
                                <button type="button" id="up2" class="btn btn-primary">上移</button>
                                <button type="button" id="right2" class="btn btn-primary">右移</button>
                                <button type="button" id="left2" class="btn btn-primary">左移</button>
                                <button type="button" id="down2" class="btn btn-primary">下移</button>
                            </div>
                            <div class="doublebox">
                                <select multiple="multiple" id="select4" style="overflow-x: scroll;"></select>
                            </div>
                        </div>
                    </div>
                    <!--<div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">二级菜单:</label>
                        <div id="secondmenu" class="col-sm-10">
                            <input type="button" value="+" onclick="append()"></input>
                        </div>
                    </div>-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="formReset()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </form>
        <input type="hidden" id="_id">
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- footer -->
{{template "footer"}}

<script>
    menuActive("infotype")
    $(function () {
        ttable=$('#dataTable').DataTable({
            "paging"      : true,
            "lengthChange": false,
            "searching"   : true,
            "ordering"    : true,
            "info"        : true,
            "autoWidth"   : false,
            "ajax": {
                "url": "/admin/infotype/data",
                "type": "post",
                "data":{}
            },
            "language": {
                "url": "/res/dist/js/dataTables.chinese.lang"
            },
            "columns": [
                { "data": "topclass",render:function(val,a,row){
                        return row.topclass}},
                { "data": "subclass",render:function(val,a,row){
                        return row.subclass}},
                {"data":"_id",render:function(val,a,row){
                        return "<a href='#' onclick='edit(\""+val+"\",\""+row.subclass+"\")'><i class='fa fa-fw fa-edit text-yellow'></i></a> &nbsp;"+
                                "<a href='#' onclick='del(\""+val+"\",\""+row.subclass+"\")'><i class='fa fa-fw fa-trash text-red'></i></a>"
                    }}
            ]
        });
        //ttable.on('init.dt', function () {});
    })

    function save(){
        _id=$("#_id").val()
        topclass=$("#topclass").val()
        var clearArr = [];
        var clearArr2 = [];
        $("#select4 option").each(function(i,val){
            clearArr[i] = this.value
        })
        $("#select3 option").each(function(i,val){
            clearArr2[i] = this.value
        })
        var subclass=$("#subclass").val()
        var fields = JSON.stringify(clearArr)
        var fields2 = JSON.stringify(clearArr2)
        if(topclass == "" || clearArr.length==0){
            alert("表单填写不完整！");
            return false;
        }
        $.ajax({
            url:"/admin/infotype/save",
            type:"post",
            data:{"topclass":topclass,"subclass":subclass,"fields":fields,"fields2":fields2,"_id":_id},
            success:function(r){
                if(r.rep){
                    $("#userform")[0].reset();
                    $("#modal-info").modal("hide");
                    ttable.ajax.reload();
                }else{
                    alert("保存失败,可能是要添加的分类已存在");
                }
            }
        })
    }
    function del(_id,subclass){
        showConfirm("确定删除？", function() {
            $.ajax({
                url:"/admin/infotype/del",
                type:"post",
                data:{"_id":_id,"subclass":subclass},
                success:function(r){
                    if(r.rep){
                        ttable.ajax.reload();
                    }else{
                        showTip("删除失败", 1000, function() {});
                    }
                }
            })
        });
    }
    function edit(_id,subclass){
        $("#topclass").empty()
        $("#subclass").empty()
        $("#select3").empty();
        $("#select4").empty();
        $("#_id").val(_id)
        console.log(_id,subclass)
        $.ajax({
            url:"/admin/infotype/select",
            type:"post",
            data:{"_id":_id,"subclass":subclass},
            success:function(r){
                console.log(r)
                if(r){
                    $("#topclass").append("<option value="+r.topclass+">"+r.topclass+"</option>")
                    $("#topclass").attr("disabled",true);
                    $("#subclass").append("<option value="+r.subclass+">"+r.subclass+"</option>")
                    $("#subclass").attr("disabled",true);
                    for(var a=0;a<r.fields.length;a++){
                        $("#select4").append("<option  value='"+r.fields[a].s_field+"'>"+r.fields[a].s_name+"</option>");
                    }
                    for(var a=0;a<r.fields2.length;a++){
                        $("#select3").append("<option  value='"+r.fields2[a].s_field+"'>"+r.fields2[a].s_name+"</option>");
                    }
                }
            }
        })
        $("#modal-info").modal("show");
    }
    function topfunc() {
        $("#subclass").empty()
        var top=$("#topclass").val()
        var topmap={"top":top}
        $.post("/admin/subclass/data",topmap,function (data,status) {
            if(data.length!=0){
                for(var a=0;a<data.data.subclass.length;a++) {
                    $("#subclass").append("<option value="+data.data.subclass[a]+">"+data.data.subclass[a]+"</option>")
                }
            }
        })
    }
    function formReset(){
        $("#_id").val("")
        $("#topclass").empty()
        $("#topclass").attr("disabled",false);
        $("#subclass").empty()
        $("#subclass").attr("disabled",false);
        $("#select3").empty();
        $("#select4").empty();
        $.post("/admin/topclass/data",'',function (data,status) {
            $("#topclass").append("<option value=''>--请选择--</option>")
            for(var a=0;a<data.data.length;a++) {
                $("#topclass").append("<option value="+data.data[a].topclass+">"+data.data[a].topclass+"</option>")
            }
        })
        $.post("/admin/fields/data",'',function (data,status) {
            for(var a=0;a<data.data.length;a++) {
                $("#select3").append("<option value="+data.data[a].s_field+">"+data.data[a].s_name+"</option>")
            }
        })
        $("#modal-info-addclear").modal("show");
    }
    $("#selectclear2 #right2").click(function(){
        $("#select3 option:selected").appendTo("#select4");
    });
    //左移
    $("#selectclear2 #left2").click(function(){
        $("#select4 option:selected").appendTo("#select3");
    });
    $("#selectclear2 #up2,#selectclear2 #down2").click(function() {
        var $opt = $("#select4 option:selected:first");
        if (!$opt.length){
            return;
        }
        if (this.id == "up2"){
            $opt.prev().before($opt);
        }else{
            $opt.next().after($opt);
        }
    });
    //双击右移
    $("#selectclear2 #select3").dblclick(function(){
        $("#selectclear2 #select3 option:selected").appendTo("#select4");
    });
    //双击左移
    $("#selectclear2 #select4").dblclick(function(){
        $("#selectclear2 #select4 option:selected").appendTo("#select3");
    });
</script>
