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

    var $ = layui.jquery
        , layer = layui.layer //弹层
        , table = layui.table //表格
        , form = layui.form
        ,upload = layui.upload
    var previd = $('#previd').data('id');
    var tableIns = table.render({
        elem: '#gulfcitygllist',
        url: '/zt/boutiquevillaglform?previd='+previd,
        method: 'get',
        page: false,
        id: 'tablerReload',
        cols: [[
            {type: 'numbers', title: '序号'},
            {field: 'title', title: '标题', width: 400, align: "center"},
            {field: 'url', title: '链接地址', width: 400, align: "center"},
            {field: 'show_img', title: '图片', width: 400, align: "center",templet: function (d) {
                    return '<img class="layui_magnify" src="' + d.show_img + '"/>'
                }},
            {
                field: 'sort',
                title: '排序',
                width: 100,
                event: 'sortData',
                edit: 'text',
                align: 'center',
                sort: true,
                templet: "#sortBox"
            },
            {
                field: 'state', title: '状态', align: 'center', templet: function (d) {
                    if (d.state == 1) {
                        return '<input type="checkbox" checked value="' + d.id + '" data-state="2" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
                    } else {
                        return '<input type="checkbox"  value="' + d.id + '"  data-state="1"  lay-skin="switch" lay-filter="switchTest" lay-text="|">'
                    }
                }
            },
            {title: '操作', templet: '#gulfcityglfunc', fixed: "right", align: "center"}

        ]]
    });
    table.reload('tablerReload');        //重新加载
    //表格头部操作菜单
    var $ = layui.$, active = {
        addData: function () {
            var id = $(this).data('id');
            var index = layui.layer.open({
                title: "添加湾区导航",
                type: 2,
                area: ['70%', '50%'],
                content: '/zt/boutiquevillagladd?id='+id,
            })
        },
    };
    $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    //监听指定开关
    form.on('switch(switchTest)', function (data) {
        var id = $(this).val();
        var state = $(this).data('state');
        layer.confirm('确定要修改此操作吗？', {btn: ['确定', '取消']}, function () {
            $.post('/zt/gulfcityglstate', {id: id, state: state}, function (data) {
                if (data.code == 200) {
                    layer.msg(data.msg);
                    table.reload('tablerReload');
                } else if (data.code == 300) {
                    layer.msg(data.msg);
                }
            })
        }, function (aa) {
            table.reload('tablerReload');        //重新加载
        })
    });
    //排序
    table.on('edit(gulfcitygllist)', function (obj) {
        var data = obj.data;
        $.post('/zt/gulfcityglsort', {id: data.id, sort: data.sort}, function (data) {
            if (data.code == 200) {
                layer.msg(data.msg);
            } else if (data.code == 300) {
                layer.msg(data.msg);
            }
        })
    })
    //表格右边操作栏目
    table.on('tool(gulfcitygllist)', function (obj) {
        var data = obj.data;
        var id = data.id;
        if (obj.event === 'del') {    //删除操作
            layer.confirm('确定要删除吗？', {btn: ['确定', '取消']}, function () {
                $.post('/zt/gulfcitygldel', {id: id}, function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg);
                        table.reload('tablerReload');
                    } else if (data.code == 300) {
                        layer.msg(data.msg);
                    }
                })
            })
        } else if (obj.event === 'edit') {//修改排序
            var index = layui.layer.open({
                title: "广告位编辑",
                type: 2,
                area: ['70%', '50%'],
                content: '/zt/boutiquevillagledit?id='+id,
            })
        }
    })

    //图片上传预览
    //图片预览
    upload.render({
        elem: '#test1'
        , field: 'img'
        , size: 1000              //限制上传图片的大小，单位为KB
        , exts: 'png|jpg|jpeg'     //只允许上传压缩文件
        , auto: false
        , choose: function (obj) {
            obj.preview(function (index, file, result) {
                $('#addfile').attr('src', result); //图片链接（base64）
            });
        }
    });

    form.on('submit(add_hainanville)', function (data) {
        var formData = new FormData($('form')[0])
        if (formData.getAll('img')[0].size == 0) {
            layer.msg('请选择图片');
            return false;
        }
        var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});      //数据提交提示
        $.ajax({
            cache: false,
            type: "post",
            url: "/zt/boutiquevillagladdto",
            data: formData,  // 你的formid
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            error: function (request) {
                layer.close(index);
                layer.msg("请联系管理员");
            },
            success: function (data) {
                layer.msg(data.msg);
                layer.close(layer.index);   //关闭当前，
                window.parent.location.reload();          //刷新父级页面
            }
        });
        return false;
    });
    form.on('submit(edit_hainanville)', function (data) {
        var formData = new FormData($('form')[0])
        var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});      //数据提交提示
        $.ajax({
            cache: false,
            type: "post",
            url: "/zt/boutiquevillagleditto",
            data: formData,  // 你的formid
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            error: function (request) {
                layer.close(index);
                layer.msg("请联系管理员");
            },
            success: function (data) {
                layer.msg(data.msg);
                layer.close(layer.index);   //关闭当前，
                window.parent.location.reload();          //刷新父级页面
            }
        });
        return false;
    });
})