const FORM_TYPE = FormTypeEnum;
layui.use(['form', 'gtable', 'tag', 'element'], function () {
    renderTable('metadataEditForm');
    layui.element.on('tab', function () {
        let formType = $(this).data('formType');
        renderTable(formType);
    });

    function renderTable(formType) {
        const table = layui.gtable.init({
            formType,
            id: formType + '_table',
            url: `${ctx}/mark/api/form/config/list/${formType}`,
            method: 'get',
            page: false,
            toolbar: '#tableTool',
            cols: [[
                {type: 'checkbox', width: 60},
                {field: 'id', title: '主键', hide: true},
                {field: 'formType', title: '表单类型', align: 'center', width: 200, templet: d => FORM_TYPE[d.formType]},
                {field: 'markType', title: '置标类型', align: 'center', width: 200},
                {
                    field: 'defaultMark',
                    title: '表单默认标签',
                    align: 'left',
                    templet: (d) => MarkTag.getStaticTagHtml(d.markDefault) || '',
                },
                {fixed: 'right', title: '操作', toolbar: '#rowTool', align: 'center', width: 200}
            ]],
            onToolBarTable: toolbarEvent,
            onToolBarRow: toolbarEvent
        })

        function toolbarEvent(obj) {
            let rowData = obj.data;
            switch (obj.event) {
                case 'add':
                    openAddConfigLayer(formType, table);
                    break;
                case 'edit':
                    openModifyConfigLayer(rowData, table);
                    break;
                case 'del':
                    deleteConfig(table);
                    break;
            }
        }

        return table;
    }

    function openAddConfigLayer(formType, _table) {
        let layerTable;
        layer.open({
            type: 1,
            title: '添加配置',
            btn: ['添加', '取消'],
            content: `<div id="addConfigLayer" style="width: 600px; height: 400px;">
                <table id="addConfigTable" lay-filter="addConfigTable"></table>
            </div>`,
            success: function () {
                layerTable = layui.gtable.init({
                    id: 'addConfigTable',
                    url: `${ctx}/mark/api/type/page`,
                    method: 'get',
                    height: '380px',
                    toolbar: false,
                    cols: [[
                        {type: 'checkbox', width: 60},
                        {field: 'id', title: '主键', hide: true},
                        {field: 'markType', title: '置标类型', align: 'center', width: 160},
                        {title: '标签', templet: (d) => MarkTag.getStaticTagHtml(d.markDefault) || ''},
                    ]],
                });
            },
            yes: function (index) {
                let typeArr = layerTable.getCheckStatus().data;
                if (typeArr.length === 0) {
                    layer.msg('请选择数据');
                    return false;
                }
                Util.post('/mark/api/form/config/add', {formType, markTypeList: typeArr}).then(res => {
                    if (res.flag) {
                        showOkMsg('添加成功');
                        layer.close(index);
                        _table.reload();
                    } else {
                        showErrorMsg(res.msg);
                    }
                })
            }
        });
    }

    function openModifyConfigLayer(rowData, _table) {
        let markTag;
        layer.open({
            type: 1,
            title: '修改默认标签',
            btn: ['保存', '取消'],
            content: `<div style="width: 500px; height: 200px;padding:10px">
                <div id="modifyFormMark"></div>
            </div>`,
            success: function () {
                markTag = new MarkTag(layui.tag, {
                    tagId: 'modifyFormMark',
                    container: '#modifyFormMark',
                    addBtn: true,
                    removeBtn: true,
                });
                markTag.setData(rowData.markDefault);
            },
            yes: function (index) {
                rowData.markDefault = markTag.getTextStr();
                Util.post('/mark/api/form/config/save', rowData).then(res => {
                    if (res.flag) {
                        showOkMsg('修改成功');
                        layer.close(index);
                        _table.reload();
                    } else {
                        showErrorMsg(res.msg);
                    }
                })
            }
        });
    }

    function deleteConfig(_table) {
        let dataArr = _table.getCheckStatus().data;
        if (dataArr.length === 0) {
            layer.msg('请至少选择一条数据');
            return false;
        }
        let ids = dataArr.map(d => d.id);
        layer.confirm('确定要删除吗？', () => Util.send(`/mark/api/form/config/${ids}`, {}, 'delete').then(res => {
            if (res.flag) {
                showOkMsg('删除成功');
                _table.reload();
            } else {
                showErrorMsg(res.msg);
            }
        }));
    }

});