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,
                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'},
                    {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');
                }
            });
        };

        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,
                });
                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)
    })

});