class FormConfigComponent {
    constructor(formType, elemId, lay) {
        this.formType = formType;
        this.elemId = elemId;
        this.lay = lay;
        this.dataMap = new Map();
        this.renderTable();
    }

    renderTable() {
        const {lay, formType, elemId} = this, {form, gtable} = lay;
        gtable.init({
            id: elemId,
            url: `${ctx}/sys/form/config/api/list/${formType}`,
            method: 'get',
            toolbar: '#tableTool',
            height: 'full-125',
            page: false,
            cols: [[
                {field: 'id', hide: true},
                {field: 'fieldName', title: '字段名'},
                {field: 'showTitle', title: '显示的标题', edit: 'text'},
                {field: 'fieldType', title: '字段类型', hide: true},
                {field: 'dictType', title: '数据字典', hide: true},
                {field: 'defaultValue', title: '默认值', edit: 'text', hide: true},
                {
                    field: 'isRequired',
                    title: '是否必填',
                    templet: (data) => renderSwitch('isRequired', data)
                },
                {
                    field: 'isDisabled',
                    title: '是否禁用',
                    templet: (data) => renderSwitch('isDisabled', data)
                },
                {
                    field: 'isShow',
                    title: '是否显示',
                    templet: (data) => renderSwitch('isShow', data)
                },
                {field: 'sort', title: '显示顺序', edit: 'text'}
            ]],
            done: (res) => this.tableLoadDoneListen(res),
            onToolBarTable: ({event, config})=> {
                if(event === 'save'){
                    const datas = [...this.dataMap.values()];
                    Util.post(`/sys/form/config/api/save`, {params: JSON.stringify(datas)}).then(res=>{
                        if(res.flag){
                            showOkMsg('保存成功')
                        }else{
                            showErrorMsg2('保存失败：'+res.msg)
                        }
                    })
                }
            }
        });

        gtable.on(`edit(${elemId})`, ({field, value, data}) => {
            this.dataMap.get(data.id)[field] = value;
        })

        // 监听switch按钮
        form.on(`switch(${elemId}-switch)`, (data) => this.switchChangeListen(data));

        function renderSwitch(fieldName, data) {
            const id = data.id, value = data[fieldName];
            return `<input type="checkbox" id="${id}" name="${fieldName}" value="${value}" title="是|否" lay-skin="switch" lay-filter="${elemId}-switch" ${value ? 'checked' : ''} />`
        }
    }

    tableLoadDoneListen(res) {
        if (res.flag) {
            res.records.map(record => this.dataMap.set(record.id + '', record));
        }
    }

    switchChangeListen({elem}) {
        const id = $(elem).attr('id'), name = $(elem).attr('name');
        const value = this.dataMap.get(id)[name];
        this.dataMap.get(id)[name] = !value;
    }
}

layui.use(['form', 'gtable', 'dropdown', 'element'], function () {
    const metadataForm = new FormConfigComponent(1, 'metadataFormTable', layui);
    const fileUploadForm = new FormConfigComponent(2, 'fileUploadFormTable', layui);
});

