layui.use(['laypage', 'layer', 'table', 'element', 'form', 'treetable'], function () {

    var laypage = layui.laypage //分页
        , $ = layui.jquery
        , layer = layui.layer //弹层
        , table = layui.table //表格
        , form = layui.form
        , treetable = layui.treetable;

    var tableId = 'citylist';

    if ($('#citylist').attr('lay-filter') == 'citylist') {
        var renderTable = function (wheres = {}) {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                treeDefaultClose: true,
                height:600,
                treeLinkage: false,
                elem: '#citylist',
                url: '/categorycity/cityhomeform',
                page: false,
                where: wheres,
                id: 'tablerReload',
                cols: [[
                    {type: 'numbers'}
                    // {field: 'id', title: 'ID', width:80, sort: true,align:'center'}
                    , {field: 'city_name', title: '区域名称', align: 'center', width: 500},
                    {
                        field: 'sort',
                        title: '排序',
                        width: 80,
                        edit: 'text',
                        align: 'center',
                        sort: true,
                        templet: "#sortBox"
                    },
                    // ,{field: 'sort', title: '排序',align:'center',sort: true},
                    {
                        field: 'state',
                        title: '审核',
                        width: 100,
                        align: 'center',
                        templet: "#Toexamine",
                        templet: function (d) {
                            if (d.state == 2) {
                                return '<input type="checkbox"  value="' + d.id + '" name="' + d.state + '"  lay-skin="switch" lay-filter="switchTest" lay-text="|">'
                            } else {
                                return '<input type="checkbox" checked  value="' + d.id + '" name="' + d.state + '"  lay-skin="switch" lay-filter="switchTest" lay-text="|">'
                            }
                        }
                    }
                    , {field: 'create_at', title: '添加时间', width: 200, align: 'center'}
                    , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#operate'}
                ]],
                done: function () {
                    layer.closeAll('loading');

                    var sz = false;
                    $('.treeTable-icon').on('click', function () {
                        if ($(this).attr('lay-tpid') == 0) {
                            sessionStorage.setItem("key", $(this).attr('lay-tid'));
                            if (sz) {
                                // var elaytid = sessionStorage.getItem("erzi");
                                // alert(elaytid);
                                // $('span[lay-tpid='+elaytid+']').each(function(){
                                //      $(this).parents().parents().parents().attr('style','display:none;');
                                // });
                                sessionStorage.removeItem("erzi");
                            }
                        } else {
                            sz = true;

                            if ($(this).attr('lay-tid') == sessionStorage.getItem("erzi")) {
                                // alert(1111);
                                sessionStorage.removeItem("erzi");
                            } else {
                                sessionStorage.setItem("erzi", $(this).attr('lay-tid'));
                            }

                        }
                    });
                    if (sessionStorage.getItem("key") != null) {
                        var laytid = sessionStorage.getItem("key");

                        // alert(laytid);
                        $('span[lay-tid=' + laytid + ']').addClass('open');

                        if (sessionStorage.getItem("erzi") != null) {
                            var elaytid = sessionStorage.getItem("erzi");
                            sz = true;
                        }

                        $('span[lay-tpid=' + laytid + ']').each(function () {
                            $(this).parents().parents().parents().attr('style', '');
                            if (sz) {
                                $('span[lay-tid=' + elaytid + ']').addClass('open');
                                $('span[lay-tpid=' + elaytid + ']').each(function () {
                                    $(this).parents().parents().parents().attr('style', '');
                                });
                            }
                        });
                    }
                }
            });
        };

        renderTable();
    }

    //列表操作
    table.on('tool(' + tableId + ')', function (obj) {
        var layEvent = obj.event,
            data = obj.data;
        switch (layEvent) {
            case 'edit':
                layer.open({
                    type: 2,
                    title: '修改区域',
                    closeBtn: 1, //不显示关闭按钮
                    shade: [0],
                    area: ['780px', '550px'],
                    anim: 2,
                    content: ['/categorycity/edithome?id=' + data.id, 'yes'],
                    end: function () {
                        renderTable();
                    }
                });
                break;
            case 'del':
                // layer.confirm('您确定要删除吗？',{   btn: ['确定', '取消']},function () {
                //     $.post('/categorycity/editall',{'id':data.id,'del':2},function (data) {
                //         if(data.data != null){
                //             layer.msg(ReturnInfo(data.data),{icon:5});
                //             return false;
                //         }
                //         layer.msg(data.msg);
                //         renderTable();
                //     });
                // });
                layer.confirm('您确定要删除吗？', {btn: ['确定', '取消']}, function () {
                    $.post('/categorycity/delcity', {id: data.id, type: 'del'}, function (data) {
                        if (data.data != null) {
                            layer.msg(ReturnInfo(data.data), {icon: 5});
                            return false;
                        }
                        layer.msg(data.msg);
                        renderTable();
                    })
                });
                break;
            case 'addson':
                layer.open({
                    type: 2,
                    title: '添加区域',
                    closeBtn: 1, //不显示关闭按钮
                    shade: [0],
                    area: ['780px', '550px'],
                    anim: 2,
                    content: '/categorycity/addhome?id=' + data.id + '&name=' + data.city_name,
                    end: function () {
                        renderTable();
                    }
                });
                break;
        }

    });


    var $ = layui.$, active = {
        addData: function () { //获取选中数据
            layer.open({
                type: 2,
                title: '添加区域',
                closeBtn: 1, //不显示关闭按钮
                shade: [0],
                area: ['780px', '550px'],
                anim: 2,
                content: '/categorycity/addhome?son=1',
            });
        },
        reload: function () {
            var form = pfgs_serialize($('form'));
            var city = '';
            if (form.province != '') {
                city = form.province;
            }

            if (form.city != '') {
                city = form.city;
            }
            renderTable({id: city});
        }
    };

    $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //显示或隐藏
    form.on('switch(switchTest)', function (data) {
        var state = '';
        if (data.elem.name == 1) {
            state = 2;
        } else if (data.elem.name == 2) {
            state = 1;
        }
        layer.confirm('确定要修改此操作吗？', {btn: ['确定', '取消']}, function () {
            $.post('/categorycity/editall', {id: data.value, state: state}, function (data) {
                if (data.data != null) {
                    layer.msg(ReturnInfo(data.data), {icon: 5});
                    return false;
                }
                layer.msg(data.msg);
                renderTable();
            })
        }, function (aa) {
            renderTable();
        })
    });

    //修改排序
    table.on('edit(' + tableId + ')', function (obj) {
        var data = obj.data;
        $.post('/categorycity/editall', {id: data.id, sort: data.sort}, function (data) {
            if (data.data != null) {
                layer.msg(ReturnInfo(data.data), {icon: 5});
                return false;
            }
            layer.msg(data.msg);
        })

    })

    form.on('submit(editcity)', function (data) {

        var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});      //数据提交提示

        var formData = new FormData($('form')[0]);
        $.ajax({
            cache: true,
            type: "post",
            url: '/categorycity/edithomeform',
            data: formData,  // 你的formid
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            error: function (request) {
                layer.close(index);         //关闭数据提交信息
                layer.alert("网络超时");
            },
            success: function (data) {
                if (data.data != null) {
                    layer.msg(ReturnInfo(data.data), {icon: 5});
                    return;
                }
                layer.msg(data.msg);
                renderTable();

            }
        });
        return false;
    });

    //添加
    form.on('submit(addcity)', function (data) {
        var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});      //数据提交提示
        $.post('/categorycity/addcityform', {'data': data.field}, function (data) {
            if (data.data != null) {
                layer.msg(ReturnInfo(data.data), {icon: 5});
                return;
            }
            layer.msg(data.msg);
            renderTable();
        })
        return false;
    });

    //加载省数据
    function loadProvince() {

        $.ajax({
            url: '/categorycity/citypid',
            type: 'post',
            async: false,//使用同步的方式,true为异步方式
            data: {'pid': 0},//这里使用json对象
            success: function (data) {
                console.log(data);
                var areaData = data.data;
                var proHtml = '';
                for (var i = 0; i < areaData.length; i++) {
                    proHtml += '<option value="' + areaData[i].id + '">' + areaData[i].city_name + '</option>';
                }
                //初始化省数据
                $('select[name=province]').append(proHtml);
                form.render();
            },
            fail: function () {

            }
        });


    }

    loadProvince();

    form.on('select(province)', function (data) {
        $.post('/categorycity/citypid', {'pid': data.value}, function (data) {
            var areaData = data.data;
            var proHtml = '';
            $('select[name=city]').html('');
            proHtml = '<option value="">请选择市/区/县</option>';
            for (var i = 0; i < areaData.length; i++) {

                proHtml += '<option value="' + areaData[i].id + '">' + areaData[i].city_name + '</option>';
            }
            //初始化省数据
            $('select[name=city]').append(proHtml);
            form.render();
        })
    })

    // 转换拼音
    $('.layui_w_name').on('keyup ', function () {
        var _txt = $(this).val();
        var _convert = pinyinUtil.getPinyin(_txt, ' ', false).replace(/\s/g, "");
        $('.layui_w_spell').val(_convert)
    })

});