let tableIns;
let editIns;
let openIndex;
let showConfig;
let showIndexConfig;
let currentData;

let mainTableUrl = "/backstage_version_code/findAll";
let mainDeleteUrl = "/backstage_version_code/delete";
let mainSaveUrl = "/backstage_version_code/saveVersionCodeInfo";
let mainSaveShowConfigUrl = "/backstage_version_code/saveShowConfigInfo";


layui.config({
    base: ctx + '/common/'
}).extend({
    xmSelect: 'layui/xm-select',
    step: 'step-lay/step',
    dragMove: 'dragMove/dragMove'
})
layui.use(['element', 'form', 'table', 'layer', 'laydate', 'util', 'upload', 'xmSelect', 'step', 'dragMove'], function () {
    let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    let laydate = layui.laydate;
    let table = layui.table, upload = layui.upload, form = layui.form;//select、单选、复选等依赖form
    let step = layui.step, xmSelect = layui.xmSelect, dragMove = layui.dragMove;//引入工具
    let layer = layui.layer;
    form.verify({
        // positiveInteger: [/^(([0-9]+[\.]?[0-9]+)|[1-9])$/, '只能填写正整数'],//必填，且只能输入正整数
        positiveInteger: [/^[1-9]\d*$/, '只能填写正整数'],//必填，且只能输入正整数
    });
    /**
     * 渲染图片查看
     */
    dragMove.render({
        elem: "#cardBody", //指向图片的父容器
        layerArea: ["960px", "720px"], //弹窗的宽高，同layer的area，默认["960px","720px"]
        layerShade: 0.6, //遮罩的透明度，同layer的shade，默认0.6
        layerMove: false, //触发拖动的元素，同layer的move，这里默认禁止，可设置为'.layui-layer-title'
        maxZoom: 1 //图片能放大的最大倍数，默认1倍
    });
    //主列表渲染
    tableIns = table.render({
        elem: '#mainTable'
        , url: ctx + mainTableUrl
        , method: 'POST'
        //请求前参数处理
        , request: {
            pageName: 'page' //页码的参数名称，默认：page
            , limitName: 'rows' //每页数据量的参数名，默认：limit
        }
        // , where: {sidx: "desc", sord: "createTime"}
        , response: {
            statusName: 'flag' //规定数据状态的字段名称，默认：code
            , statusCode: true //规定成功的状态码，默认：0
            , msgName: 'msg' //规定状态信息的字段名称，默认：msg
            , countName: 'records' //规定数据总数的字段名称，默认：count
            , dataName: 'rows' //规定数据列表的字段名称，默认：data
        }
        //响应后数据处理
        , parseData: function (res) { //res 即为原始返回的数据
            let data = res.data;
            // console.log("mainTableUrl数据：", data);
            // if (data.rows && data.rows.length > 0) {
            // }
            return {
                "flag": res.flag, //解析接口状态
                "msg": res.msg, //解析提示文本
                "records": data.records, //解析数据长度
                "rows": data.rows //解析数据列表
            };
        }
        , toolbar: '#mainTableToolbarDemo'
        , title: '列表'
        , cols: [[
            {field: 'id', title: 'ID', sort: true}
            , {field: 'title', title: '名称', sort: true}
            , {field: 'code', title: '版本号', sort: true}
            , {field: 'limitPlatform', title: '限制平台',  templet: function (d) {
                    if (d.limitPlatform == 0) {
                        return '<span style="color: green">全部</span>';
                    } else if (d.limitPlatform == 1) {
                        return '<span style="color: red">Android</span>';
                    } else if (d.limitPlatform == 2) {
                        return '<span style="color: red">IOS</span>';
                    }  else if (d.limitPlatform == 3) {
                        return '<span style="color: red">不限制</span>';
                    }else {
                        return '未添加:' + d.limitPlatform;
                    }
                },sort: true}
            , {field: 'showConfigKey', title: '渠道', sort: true}
            , {field: 'showConfig', title: '配置信息', templet: '#configButton', sort: true}
            , {field: 'describe', title: '描述', hide: true, sort: true}
            , {field: 'isShowGame', title: '游戏', hide: true,sort: true}
            , {field: 'isShowVideo', title: '视频', hide: true,sort: true}
            , {field: 'isShowTool', title: '工具',hide: true, sort: true}
            , {field: 'deleteTime', title: '删除时间', hide: true, sort: true}
            , {field: 'createTime', title: '创建时间', hide: true, sort: true}
            , {field: 'updateTime', title: '更新时间', hide: true, sort: true}
            , {fixed: 'right', title: '操作', width: 300, toolbar: '#mainTableBarDemo'}
        ]]
        , defaultToolbar: ['', 'exports', 'print']
        , page: true
        , cellMinWidth: 80
    });

    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
        switch (obj.event) {
            case 'addNewRow':

                break;
        }
    });

    element.on('tab(statesTab)', function(data){
        // console.log(this); //当前Tab标题所在的原始DOM元素
        // console.log(data.index); //得到当前Tab的所在下标
        // console.log(data.elem); //得到当前的Tab大容器
        showIndexConfig = showConfig[data.index];
        // console.log(showIndexConfig)

        $("input[name=isShow][value='0']").prop("checked", showIndexConfig.isShow == 0?true : false);
        $("input[name=isShow][value='1']").prop("checked", showIndexConfig.isShow == 1?true : false);
        $("input[name=isNeedConnect][value='0']").prop("checked", showIndexConfig.isNeedConnect == 0?true : false);
        $("input[name=isNeedConnect][value='1']").prop("checked", showIndexConfig.isNeedConnect == 1?true : false);

        $("#comForm").form(showIndexConfig);
        form.render();
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
        let data = obj.data;
        // console.log("data:", data);
        currentData = data;
        //编辑
        if (obj.event === 'edit') {
            $('#limitPlatform').find("option").remove();
            $('#limitPlatform').append(new Option("全都限制", "0", data.limitPlatform === 0));
            $('#limitPlatform').append(new Option("限制Android", "1", data.limitPlatform === 1));
            $('#limitPlatform').append(new Option("限制ios", "2", data.limitPlatform === 2));
            $('#limitPlatform').append(new Option("都不限制", "3", data.limitPlatform === 2));
            form.render("select");

            $("#comStateForm").form(data);
            form.render();
            editIns = layer.open({
                type: 1,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                title: ['修改版本控制属性', 'font-size:18px;'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                area: ['50%', '50%'],
                content: $('#show_state_div')
            });

        } else if (obj.event === 'del') {
            layer.confirm('真的删除这个渠道版本么?', function (index) {
                $.post(ctx + mainDeleteUrl, {id: data.id}, function (data) {
                    if (!data.flag) {
                        layer.msg(data.msg, {icon: 2, time: 2000}, function () {
                        });
                        return;
                    }
                    obj.del();
                    tableIns.reload();
                });
                layer.close(index);
            });
        } else if(obj.event === 'config'){
            //調整設置
            showConfig = JSON.parse(data.showConfig);
            // console.log(showConfig)
            let tabtitle = $(".layui-tab-title li");
            let ids = new Array();
            $.each(tabtitle, function (i) {
                ids[i] = $(this).attr("lay-id");
            })
            $.each(ids, function (i,item) {
                element.tabDelete("statesTab", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
            })
            for (let i = 0; i < showConfig.length; i++) {
                element.tabAdd('statesTab', {
                    title: showConfig[i].name,
                    content: '',
                    id: 'statesTab_' + i
                });
            }
            element.tabChange('statesTab', 'statesTab_0');

            showIndexConfig = showConfig[0];
            $("input[name=isShow][value='0']").prop("checked", showIndexConfig.isShow == 0?true : false);
            $("input[name=isShow][value='1']").prop("checked", showIndexConfig.isShow == 1?true : false);
            $("input[name=isNeedConnect][value='0']").prop("checked", showIndexConfig.isNeedConnect == 0?true : false);
            $("input[name=isNeedConnect][value='1']").prop("checked", showIndexConfig.isNeedConnect == 1?true : false);

            $("#comForm").form(showIndexConfig);
            form.render();

            openIndex = layer.open({
                type: 1,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                title: ['修改栏目属性', 'font-size:18px;'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                area: ['80%', '80%'],
                content: $('#show_div')
            });
        }
    });

    //监听提交
    //保存配置信息
    form.on('submit(comFilter)', function (data) {
        // console.log(data.field);
        showConfig[data.field.index] = Object.assign({},showIndexConfig,{isNeedConnect:Number(data.field.isNeedConnect),isShow:Number(data.field.isShow)});
        // console.log(showConfig);
        if (!currentData) {
            layer.msg("选择编辑的对象", {icon: 2, time: 1000}, function () {
            });
            return;
        }
        $.post(ctx + mainSaveShowConfigUrl, {id:currentData.id,showConfig:JSON.stringify(showConfig)}, function (data) {
            if (!data.flag) {
                layer.msg(data.msg, {icon: 2, time: 2000}, function () {
                });
                return;
            }
            layer.close(openIndex);
            tableIns.reload();
        });
    });

    form.on('submit(comStateFilter)', function (data) {
        // console.log(data.field);
        let _field = data.field;
        if (!_field.id) {
            layer.msg("选择编辑的对象", {icon: 2, time: 1000}, function () {
            });
            return;
        }
        $.post(ctx + mainSaveUrl, {id:Number(_field.id),limitPlatform:Number(_field.limitPlatform)}, function (data) {
            if (!data.flag) {
                layer.msg(data.msg, {icon: 2, time: 2000}, function () {
                });
                return;
            }
            layer.close(editIns);
            tableIns.reload();
        });
    });


});

