<?php
use yii\helpers\Url;
use app\ht\widgets\LinkPager;
use domain\device\models\DeviceCat;

$this->title = '设备分类管理';
$this->params['breadcrumbs'][] =  '设备管理';
$this->params['breadcrumbs'][] = ['label' => $this->title, 'url' => Url::toRoute(['/device/device-cat/index'])];
?>

<!--调用树样式-->
<link href="<?=Yii::$app->params['assetsUrl'] . '/exts/base/1.0.0/ui/jstree/themes/default/style.min.css'?>" type="text/css" rel="stylesheet"/>
<script src="<?= Yii::$app->request->baseUrl . "/exts/base/1.0.0/ui/zclip/zclip.min.js"?>"></script>
<div class="container" style="padding-left: 0px;">

    <div class="col-md-4" style="padding-left:0px;">
        <div class="panel panel-default" >
            <div class="panel-heading">

                <div class="pull-right">
                 <!--   <button id="cat_import" class="btn btn-primary ladda-button" data-style="slide-up">导入分类</button>-->
                    <button id="cat_create" class="btn btn-primary ladda-button" data-style="slide-up">新建分类</button>
                    <button id="cat_rename" class="btn btn-success ladda-button" data-style="slide-up">修改分类</button>
                    <button id="cat_delete" class="btn btn-danger ladda-button" data-style="slide-up">删除分类</button>
                </div>
                <div class="clearfix" style="padding-top: 8px;">
                    <b>分类目录</b>
                </div>
            </div>
            <div class="panel-body">

                <div id="tree"></div>

                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="col-md-8" style="padding-left: 0px;">

        <div class="panel panel-default">
            <div class="panel-heading">
                <b>类目 : <span class="text-danger" id="cat_path_name"><?=$parameter->headline?></span></b>
                <input type="hidden" id="device_cat_id" value="0">
            </div>
            <div class="panel-body ">
                <?php if ($parameter->catId) : ?>
                <div class="form-horizontal">
                    <div class="form-group" style="margin-bottom: 20px">
                        <div class="control-label" style="float: left;margin:0 15px 0 15px;line-height: 80px">分类图标</div>
                        <div style="float: left; width:800px;cursor: pointer">
                            <?php if (empty($parameter->logoUrl)) : ?>
                                <img src="<?= Yii::$app->request->baseUrl . '/images/default-item.jpg' ?>" class="img-rounded" width="128" height="128" style="display: inline-block">
                            <?php else : ?>
                                <img src="<?= $parameter->logoUrl ?>" class="img-rounded" width="128" height="128" style="display: inline-block">
                            <?php endif; ?>
                            <div class="fileupload" style="display: inline">
                                <input type="file" name="logo"  id="uploadLogo"  style="width: 120px" />
                                <a href="javascript:void(0)" class="btn btn-success"> 上传</a> <br/>
                            </div>
                            <span class="text-muted">图片格式:&nbsp;jpeg/jpg/gif/png,&nbsp;最佳尺寸128*128像素</span>
                        </div>
                    </div>
                    <?php if (!empty($deviceList)): ?>
                    <div class="panel">
                        <table class="table table-striped table-bordered col-sm-12">
                            <tr>
                               <th>设备ID</th>
                               <th>设备信息</th>
                               <th>设备分类</th>
                               <th>设备品牌</th>
                               <th>设备型号</th>
                               <th>操作</th>
                            </tr>
                            <?php foreach ($deviceList as $device) : ?>
                                <tr>
                                    <td class="text-center align-middle hqy-row-select"><?= $device['id'] ?></td>
                                    <td >
                                        <?= $device['device_name'] ?>
                                    </td>
                                    <td >
                                        <?= $device['cat_name'] ?>
                                    </td>
                                    <td >
                                        <?= $device['chinese_name'] ?>
                                    </td>
                                    <td >
                                        <?= $device['model'] ?>
                                    </td>
                                    <td >
                                        <a href="<?php echo Url::toRoute(['/device/device/update', 'id' => $device['id']])  ?>">编辑</a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </table>
                    </div>
                    <div class="panel-footer">
                        <div class="hqy-panel-pager">
                            <?= LinkPager::widget([
                                'pagination' => $pages,
                            ]); ?>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endif;?>
            </div>
        </div>
    </div>

</div>

<!--显示删除类目模态框-->
<style type="text/css">
    #catModal .modal-dialog
    {
        width : 800px;
    }
</style>
<!--删除类目模态框-->
<div class="modal" id="catModal" tabindex="-1" role="dialog" aria-labelledby="catModalLabel" aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align: center;">
                <h4 class="modal-title" id="catModalLabel">
                    <b>分类删除提示</b>
                </h4>
            </div>
            <div class="modal-body" style="padding:0px;">
                <table class="table" id="catModalTable">
                    <thead>
                    <tr>
                        <th>分类ID</th>
                        <th>删除分类</th>
                        <th>父分类</th>

                    </tr>
                    </thead>

                    <tbody id="catModelTr"></tbody>

                </table>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="remove_ids" value="">
                <button class="btn btn-default ladda-button" data-dismiss="modal" data-style="slide-up">关闭</button>
                <button id="modal_submit" class="btn btn-danger ladda-button" data-style="slide-up">确认</button>
            </div>
        </div>
    </div>
</div>

<script>
    (function($, window, document){
        //判断是否为空 返回TURE 为空
        var _isEmpty = function(value){
            if ((!value) || (typeof(value) == "undefined") || (value == 0)) {
                return true;
            } else {
                return false;
            }
        };

    }(jQuery, window, document))
</script>

<script src="<?=Yii::$app->params['assetsUrl'] . '/exts/base/1.0.0/ui/jstree/jstree.min.js'?>"></script>
<!--左边菜单处理-->
<script>
    (function($, window, document){
        $(document).ready(function() {
            /**
             *
             * MODAL 弹出框显示中间
             */
            function centerModals(){
                $('.modal').each(function(i){
                    //MODAL 不在当前的OBDY上, 要克隆到当前的BODY上
                    var $clone = $(this).clone().css('display', 'block').appendTo('body');
                    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                    top = top > 0 ? top : 0;

                    //删除克隆
                    $clone.remove();
                    $clone = null;

                    return $(this).find('.modal-content').css("top", top);
                });
            }
            $('.modal').on('show.bs.modal', centerModals);
            $(window).on('resize', centerModals);

            //判断是否为空 返回TURE 为空
            var _isEmpty = function(value){
                if ((!value) || (typeof(value) == "undefined")) {
                    return true;
                } else {
                    return false;
                }
            };

            /**
             * 树处理
             */
            $('#tree').jstree({
                "core" : {
                    "animation" : 0,//打开或收起的动漫时间
                    "check_callback" : true,
                    "themes" : {
                        "stripes" : true //显示条纹,
                    },
                    'data' : <?=$catTree?>
                },
                "types" : {
                    "#" : {
                        "max_children" : '<?=DeviceCat::CAT_TREE_MAX_LEVEL-1?>',//能够有的子分类长度
                        "max_depth" : '<?=DeviceCat::CAT_TREE_MAX_LEVEL?>',//类目路径的长度
                        "valid_children" : ["default"]
                    },
                    "root" : {
                        "valid_children" : ["default"]
                    },
                    "default" : {
                        "valid_children" : ["default","jstree-file"]
                    },
                    "file" : {
                        "valid_children" : []
                    }
                },
                "plugins" : [
                    "types",
                    "dnd"
                ]//移动,"dnd"
            }).on('changed.jstree', function (e, data) {//点击类目,获取内容.
                //获取当前页面类目ID
                var getDirId = <?=$parameter->catId?>;

                //初始化
                var catTree = $('#tree').jstree(true);
                //当前选中类目的ID
                var catId = catTree.get_selected();

                //类目为空
                if (_isEmpty(catId)) {
                    alert('请选择操作的类目');
                    return;
                }

                //获取当前类目的路径
                var s = '/';
                var catsPath = catTree.get_path(catId, s);// catsPath
                if (!catsPath) {
                    catsPath = '请点击左边菜单选择类目';
                }
                catsPath = catsPath.replace('商品分类/', '');
                //显示路径
                $('#cat_path_name').html(catsPath);
                //写入ID
                $('#device_cat_id').val(catId);
                //指定类目的文章 防止无限循环
                if (getDirId != catId) {
                    //LOADING 显示
                    var loading = $.loading();
                    //开始显示
                    loading.show();
                    window.location.href = "<?=Url::toRoute(['/device/device-cat/index'])?>" + "?cid=" + catId;
                }

            }).on('move_node.jstree', function(e, data){

                //初始化树
                var catTree = $('#tree').jstree(true);
                //操作对象的节点ID
                var currentNodeId = data.node.id;

                /** 新父节点数据处理 **/
                //新父节点数据
                var newParentNode = catTree.get_node(data.parent);
                //新父节点ID
                var newParentId = newParentNode.id;
                //新父节点 下所有子节点的排序数组
                var newNodeIds = newParentNode.children;

                if (_isEmpty(currentNodeId)) {
                    alert('请选择操作对的类目!');
                    location.reload();
                    return;
                }

                //LOADING 显示
                var loading = $.loading();
                $.ajax({
                    url : '<?= Url::toRoute(['/device/device-cat/ajax-move-node'])?>',
                    type : 'post',
                    dataType : 'json',
                    data : $.csrf({
                        newParentId : newParentId,
                        newChildNodeIds : newNodeIds,
                        currentNodeId : currentNodeId
                    }),
                    beforeSend : function(){
                        //开始显示
                        loading.show();
                    },
                    success : function(e){
//                        console.log(e);
//                        return;

                        if (false == e.success) {
                            if (101 == e.code) {
                                alert('请选择操作的类目!');
                            }

                            if (201 == e.code) {
                                alert('操作类目的数量过多,请联系管理员!');
                            }

                            if (301 == e.code) {
                                alert('类目不能为根目录!');
                            }

                            $('#tree #loading').remove();
                            location.reload();
                        } else if (true == e.success) {
                            loading.hide()
                            //window.location.href = "<?=Url::toRoute(['/device/device-cat/index'])?>" + "?cid=" + currentNodeId;
                        }

                    },
                    error : function(){},
                    complete : function(){}

                });


            });

            //绑定新建类目
            $('#cat_create').on('click', function(){
                //初始化树
                var catTree = $('#tree').jstree(true);
                //获取选中类目 的ID
                var selectedIds = catTree.get_selected();
                //返回选中类目中的第一个ID
                var selectedId = selectedIds[0];
                //类默认长度
                var pathLength = '<?=DeviceCat::CAT_TREE_MAX_LEVEL?>';

                //类目
                if (_isEmpty(selectedId)) {
                    alert('请选择操作的类目');
                    return;
                }

                //获取选中类的资料
                var selectedNode = catTree.get_node(selectedId);
                //添加类目不能超过设置限制层数
                if (selectedNode.parents.length >= pathLength) {
                    alert('添加类目不能超过<?=DeviceCat::CAT_TREE_MAX_LEVEL-1?>级！');
                    return false;
                }
                //父ID
                var parentId = selectedNode.id;
                //新建类 按钮设置 的对像
                var cThis = this;
                //第一参数:SEL 父标识. 第二参数:新建类目,规则,返回新目类的ID(临时的.)
                var testId = catTree.create_node(selectedId, {"type":"default"});
                if (testId) {
                    //使类目可编辑
                    catTree.edit(testId);
                    //获取更改类目的资料
                    $('#tree').on('rename_node.jstree', function (e, data) {
                        //类目更改后的名字
                        var dirName = data.text;
                        if (dirName.length > 12){
                            alert('节点更改名字的中英文的数量不能超过12个');
                            //使类目可编辑
                            catTree.edit(testId);
                            return;
                        }

                        //AJAX
                        var l = $.ladda(cThis);
                        $.ajax({
                            url : '<?= Url::toRoute(['/device/device-cat/ajax-create-node'])?>',
                            type : 'post',
                            dataType : 'json',
                            data : $.csrf({
                                id : parentId,
                                text : dirName
                            }),
                            beforeSend : function(){
                                l.start("#");
                            },
                            success : function(d){
                                if (false == d.success) {
                                    if (101 == d.code) {
                                      //  alert('操作有误，请重新操作!');
                                      //  location.reload();
                                      //  return;
                                    } else if (201 == d.code) {
                                        alert('新建类目的长度不能超过<?=DeviceCat::CAT_TREE_MAX_LEVEL-1?>级!');
                                        location.reload();
                                        return;
                                    }
                                } else if (true == d.success){
                                    //把入库后的ID绑定到新类目上
                                    catTree.set_id(data.node, d.datas);
                                    window.location.href = "<?=Url::toRoute(['/device/device-cat/index'])?>" + "?cid=" + parentId;
                                   // return ;
                                }
                                l.stop("#");
                            },
                            error : function(){},
                            complete : function(){}
                        });

                    });
                }
            });

            //更改类目
            $('#cat_rename').on('click', function(){
                //操作对象
                var catTree = $('#tree').jstree(true);
                //获取选中类目 的ID
                var selectedIds = catTree.get_selected();
                //返回选中类目中的第一个ID
                var selectedId = selectedIds[0];

                if (_isEmpty(selectedId)) {
                    alert('请选择一个类目操作');
                    return;
                }

                if (selectedId == 0) {
                    alert('不允许修改根分类');
                    return;
                }


                //使类目可编辑
                catTree.edit(selectedId);
                //按键设置
                var rTthis = this;

                $('#tree').on('rename_node.jstree', function (e, data) {//获取更改类目的资料
                    //类目更改后的名字
                    var catName = data.text;
                    if (catName.length > 12){
                        alert('节点更改名字的中英文的数量不能超过12个');
                        //使类目可编辑
                        catTree.edit(selectedId);
                        return;
                    }

                    //AJAX
                    var l = $.ladda(rTthis);
                    $.ajax({
                        url : '<?= Url::toRoute(['/device/device-cat/ajax-rename-node'])?>',
                        type : 'post',
                        dataType : 'json',
                        data : $.csrf({
                            id : selectedId,
                            text : catName
                        }),
                        beforeSend : function(){
                            l.start();
                        },
                        success : function(d){
                            if (101 == d.code) {
                                alert('操作有误，请重新操作!');
                            }
                            //location.reload();
                         //   return;
                            l.stop()
                        },
                        error : function(){},
                        complete : function(){}
                    });

                });
            });

            //确认删除类目
            $('#cat_delete').on('click', function(){
                //操作对象
                var catTree = $('#tree').jstree(true);
                //获取选中类目 的ID
                var selectedIds = catTree.get_selected();
                //类默认长度
                var pathLength = '<?=DeviceCat::CAT_TREE_MAX_LEVEL?>';

                //检查
                if (_isEmpty(selectedIds)) {
                    alert('请选操作的类目!');
                    return;
                }
                var isTrue = true;
                for(var i = 0; i < selectedIds.length; i++) {
                    //当前类ID
                    var id = selectedIds[i];
                    //当前类数据
                    var data = catTree.get_node(id);
                    //所处的位置长度
                    var dataLenght = data.parents.length;
                    //根目录
                    if (1 == dataLenght) {
                        alert('根目录不能删除');
                        return;
                    } else if (dataLenght < pathLength) {
                        //子类
                        if (data.children.length > 0) {
                            alert('请删除该类的子类!');
                            return;
                        }
                        isTrue = true;
                    } else if (dataLenght == pathLength) {
                        isTrue = true;
                    } else {
                        isTrue = true;
                    }
                }

                if (isTrue) {
                    //ajax 获取数据
                    //AJAX
                    var l = $.ladda(this);
                    $.ajax({
                        url : '<?= Url::toRoute(['/device/device-cat/ajax-remove-node'])?>',
                        type : 'post',
                        dataType : 'json',
                        data : $.csrf({
                            catIds : selectedIds
                        }),
                        beforeSend : function(){
                            l.start();
                            //模态框
                            catOpModal();
                        },
                        success : function(e){
                            l.stop();

                            if (false == e.success) {
                                if (101 == e.code) {
                                    fillErrorInfoModal('类目还有子类目,不能进行删除操作!');
                                } else if (201 == e.code) {
                                    fillErrorInfoModal('类目下还有商品, 不能进行删除操作!');
                                } else if (301 == e.code) {
                                    fillErrorInfoModal('操作类目的数量过多,请联系管理员!');
                                } else if (401 == e.code) {
                                    fillErrorInfoModal('根目录不能删除!');
                                }

                                $('#catModal').modal('show');
                            } else if (true == e.success){
                                //列类目
                                fillModal(e.datas, catTree);

                                $('#catModal').modal('show');

                                //确定
                                $('#catModal #modal_submit').on('click', function(){
                                    _ajaxRemove(this);
                                });

                            }

                        },
                        error : function(){},
                        complete : function(){}
                    });

                }
            });

            var catOpModal = function() {

                //显示模态框
                $("#catModal").modal({
                    show:false,
                    backdrop:'static',
                    keyboard:false
                });
            };

            var fillErrorInfoModal = function(infoString){
                $('#catModal #modal_submit').hide();
                var info = '<div class="text-danger" style="padding:30px;text-align: center;font-size: 16px;"><b>' + infoString + '</b></div>';
                $("#catModal .modal-body").html(info);
            };


            /**
             * 列出删除的类目
             * @nodes [['device_cat_id'=>1],...]
             * @catTree 初始化树
             */
            var fillModal = function(nodes, catTree) {

                var infoString = '';
                var removeIds = [];
                var i = 0;
                $.each(nodes, function(key, val){
                    var nodId = val.id;

                    if (_isEmpty(nodId)) {
                        return true;
                    }

                    //节点
                    var node = catTree.get_node(nodId);
                    var nodeName = node.text;

                    //父节点
                    var parentId = node.parent;
                    var parentNode = catTree.get_node(parentId);
                    var parentName = parentNode.text;

                    //写入
                    infoString += '<tr>'
                        + '<td>' + nodId + '</td>'
                        + '<td>' + nodeName + '</td>'
                        + '<td>' + parentName + '</td>'
                        + '</tr>';

                    removeIds[i] = nodId;
                });

                //显示
                $("#catModalTable #catModelTr").html(infoString);

                //写入 删除IDS
                $('#catModal #remove_ids').val(removeIds);
            };

            /**
             * AJAX
             * 删除类目
             */
            var _ajaxRemove = function(cThis){
                var removeIds =  $('#catModal #remove_ids').val();
                if (_isEmpty(removeIds)) {
                    alert('请选择操作的类目!');
                    return;
                }

                //LOADING
                var l = $.ladda(cThis);
                $.ajax({
                    url : '<?= Url::toRoute(['/device/device-cat/ajax-do-remove-node'])?>',
                    type : 'post',
                    data : $.csrf({
                        ids : removeIds
                    }),
                    dataType : 'json',
                    beforeSend : function(){
                        //开始LOADIN
                        l.start();
                    },
                    success : function(e){
                        if (false == e.success) {
                            if (101 == e.code) {
                                alert('操作有误,请重新操作!');
                            } else if (201 == e.code) {
                                alert('不能删除根目录!');
                            } else if (301 == e.code) {
                                alert('请删除该类目下所有子类目后,再进行删除操作!');
                            } else if (401 == e.code) {
                                alert('操作类目的数量过多,请联系管理员!');
                            }
                            location.reload();
                        } else if (true == e.success) {
                            window.location.href = "<?=Url::toRoute(['/device/device-cat/index'])?>" + "?cid=" + e.pid;
                        }

                    },
                    error : function(){},
                    complete : function(){}
                });
            };

            // 导入分类(选择Excel表)
            $('#cat_import').on('click', function(){
                //LOADING
                var l = $.ladda(this);
                $.ajax({
                    url : '<?= Url::toRoute(['/device/device-cat/ajax-do-import'])?>',
                    type : 'post',
                    data : $.csrf({
                    }),
                    dataType : 'json',
                    beforeSend : function(){
                        // 开始LOADIN
                        l.start();
                    },
                    success : function(e){
                        l.stop();

                        if (false == e.success) {
                            if (101 == e.code) {
                                alert('运营分类表格式错误!');
                            }
                            else if (201 == e.code) {
                                alert('找不到父级分类!');
                            }
                            else if (301 == e.code) {
                                alert('数据库写入失败!');
                            }
                            location.reload();
                        }
                        else if (true == e.success)
                        {
                            alert('导入成功!');
                            window.location.href = "<?=Url::toRoute(['/device/device-cat/index'])?>";
                        }

                    },
                    error : function(){
                    },
                    complete : function(){
                    }
                });
            });

        });
    }(jQuery, window, document));

    $(document).ready(function(){

        // 选中文件后直接上传
        $('#uploadLogo').change(function() {
            seajs.use("base/1.0.0/ui/ajaxfileupload/ajaxfileupload-1.0.0",function  () {
                $.ajaxFileUpload({
                    url:'<?=Url::toRoute(["/device/device-cat/ajax-upload-logo", 'cid' => $parameter->catId])?>',
                    secureuri :false,
                    fileElementId :'uploadLogo',//file控件id
                    dataType : 'json',
                    type:"post",
                    success : function (dataResult, status){
                        if (dataResult.success) {
                            location.reload();
                        } else if (dataResult.message) {
                            alert(dataResult.message)
                        } else if (dataResult.success == false) {
                            alert('您没有该操作权限，请联系管理员')
                        }
                    },
                    error: function(data, status, e){
                        alert("程序发生错误，请联系管理员。")
                    }
                })
            })
        })
    });
</script>

<style>
    #device-cat {
        height:100px;
    }
</style>