layui.use(["index", "api", "tpl", "dialog", "laypage"], function () {
    var $ = layui.$,
        table = layui.table,
        element = layui.element,
        form = layui.form,
        admin = layui.admin,
        laypage = layui.laypage;
    var LIST_TABLE_URL = layui.api.getMockApiUrl("detail", "list");
    var DELETE_TABLE_URL = layui.api.getMockApiUrl("detail", "detail");

    var where = {};
    var FORM_QUERY_ID = "lay-form-submit"; // form seach ElementId

    var LIST_TABLE_ID = "listTable"; // table ElementId
    var DETAIL_TABLE_ID = "detailTable";
    var LIST_TABLE_COLS = [{
        field: "id",
        title: "id",
        align: "left",
        hide: true
    }, {
        field: "name",
        title: "源库",
        align: "left"
    }, {
        field: "ip",
        title: "源库对象名",
        align: "left"
    }, {
        field: "port",
        title: "目标库",
        align: "left"
    }, {
        field: "sid",
        title: "目标库对象名",
        align: "left"
    }, {
        fixed: "right",
        title: "操作",
        width: 150,
        align: "left",
        toolbar: "#cellOperating"
    }];
    var DETAIL_TABLE_COLS = [{
        field: "id",
        title: "id",
        align: "left",
        hide: true
    }, {
        field: "name",
        title: "源库列名",
        align: "left"
    }, {
        field: "ip",
        title: "类型",
        align: "left"
    }, {
        field: "port",
        title: "目标库列",
        align: "left"
    }, {
        field: "sid",
        title: "类型",
        align: "left"
    }];


    init();

    form.on("submit(" + FORM_QUERY_ID + ")", function (data) {
        console.log("查询：", data.field);
        getTableData();
    }); //单元格 操作列中 操作事件

    table.on("tool(" + LIST_TABLE_ID + ")", function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === "detail") {
            detailDialog(data);
        }
    });

    function init() {
        getDetail();
        getSetting();
        getTableData();
    }

    function getDetail() {
        //api 请求得到结果
        var data = { id: '5cb92069c3492', name: 'CRM->SCRM[FUL' };
        var html = `
    <li><span>任务ID : ${data.id}</span><span>任务名称 : ${data.name}</span></li>
    <li><span>读节点 : ${data.id}</span><span>写节点 : ${data.name}</span></li>
    <li><span>创建者 : ${data.id}</span><span>创建时间 : ${data.name}</span></li>
    <li><span>更新者 : ${data.id}</span><span>更新时间 : ${data.name}</span></li>
    <li><span>状态 : ${data.id}</span><span>同步架构 : ${data.name}</span></li>
    <li><span>源库类型 : ${data.id}</span><span>目标库类型 : ${data.name}</span></li>
    <li><span>源库端口 : ${data.id}</span><span>目标库端口 : ${data.name}</span></li>
    <li><span>源库账号 : ${data.id}</span><span>目标库账号 : ${data.name}</span></li>
    <li><span>已发送数据位点 : ${data.id}</span><span>已删除数据位点 : ${data.name}</span></li>
    `
        $('.detail-content').html(html);
    }

    function getSetting() {
        //api 请求得到结果
        layui.tpl.setPlainTextTpl("settingId", { title: '同步方式设置2 :结构初始化 + 全量数据初始化+增量数据' })
    }

    function getTableData() {
        var tableRenderOptions = {
            height: 300,
            id: LIST_TABLE_ID,
            elem: "#" + LIST_TABLE_ID,
            url: LIST_TABLE_URL,
            even: "false",
            defaultToolbar: [],
            page: false,
            cols: [LIST_TABLE_COLS],
            where: where
        };
        table.render(tableRenderOptions);
    }

    function detailDialog(data) {
        console.log('查看列：', data);
        var templet = $("#tableDialogTemplate").html();
        layui.laytpl(templet).render({}, function (html) {
            layer.open({
                type: 1,
                title: "节点任务详情",
                content: templet,
                area: ["520px", "640px"],
                success: function success() {
                    //请求api
                    var tableRenderOptions = {
                        height: 300,
                        id: DETAIL_TABLE_ID,
                        elem: "#" + DETAIL_TABLE_ID,
                        url: DELETE_TABLE_URL,
                        even: "false",
                        defaultToolbar: [],
                        page: false,
                        cols: [DETAIL_TABLE_COLS],
                        where: {}
                    };
                    table.render(tableRenderOptions);
                }
            });
        });
    }

});