import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@operato/data-grist/ox-grist.js';
import '@operato/data-grist/ox-sorters-control.js';
import '@operato/data-grist/ox-filters-form.js';
import '@operato/input/ox-select.js';
import '@operato/input/ox-input-select-buttons.js';
import '@operato/popup/ox-popup-list.js';
import '@operato/process'; /* for process-creation-popup */
import '@sted/process-modeller';
import { css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { DataGrist } from '@operato/data-grist';
import { i18next } from '@operato/i18n';
import { p13n } from '@operato/p13n';
import { PageView, store } from '@operato/shell';
import { CommonGristStyles, CommonHeaderStyles } from '@operato/styles';
import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js';
import { notify } from '../utils/notify';
import { deletePDFReport, fetchPDFReportList } from '../graphql';
let ReportListPage = class ReportListPage extends connect(store)(InfiniteScrollable(p13n(PageView))) {
    get context() {
        return {
            search: {
                handler: (search) => {
                    this.grist.searchText = search;
                },
                placeholder: 'PDF 리포트 리스트',
                value: this.grist.searchText
            }
        };
    }
    render() {
        return html `
      <ox-grist
        .config=${this.config}
        mode="GRID"
        auto-fetch
        .fetchHandler=${this.fetchHandler.bind(this)}
        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
      >
        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
      </ox-grist>
    `;
    }
    async fetchHandler() {
        const { items: records, total } = await this.getPDFReports(...arguments);
        this.updateContext();
        // 파일 이름을 디코딩합니다.
        records.forEach(record => {
            record.name = decodeURIComponent(record.name);
        });
        return {
            total,
            records
        };
    }
    get gristConfig() {
        return {
            list: {
                fields: ['name', 'description'],
                details: ['updatedAt']
            },
            columns: [
                {
                    type: 'gutter',
                    gutterName: 'dirty'
                },
                {
                    type: 'gutter',
                    gutterName: 'sequence'
                },
                {
                    type: 'gutter',
                    gutterName: 'button',
                    icon: 'preview',
                    iconOnly: false,
                    title: '미리보기',
                    width: 80,
                    handlers: {
                        click: (columns, data, column, record, rowIndex, target) => {
                            window.open(record.fullpath, '_blank');
                        }
                    }
                },
                {
                    type: 'gutter',
                    gutterName: 'button',
                    icon: 'save_alt',
                    iconOnly: false,
                    title: i18next.t('button.download'),
                    width: 80,
                    handlers: {
                        click: (columns, data, column, record, rowIndex, target) => {
                            const element = document.createElement('a');
                            element.setAttribute('href', record.fullpath);
                            element.setAttribute('download', record.name);
                            document.body.appendChild(element);
                            element.click();
                            element.remove();
                        }
                    }
                },
                {
                    type: 'gutter',
                    gutterName: 'button',
                    icon: 'delete',
                    iconOnly: false,
                    title: '삭제',
                    width: 80,
                    handlers: {
                        click: (columns, data, column, record, rowIndex) => {
                            this.onDeletePDFReport(record);
                        }
                    }
                },
                {
                    type: 'string',
                    name: 'id',
                    hidden: true
                },
                {
                    type: 'string',
                    name: 'name',
                    header: i18next.t('field.name'),
                    record: {
                        editable: false,
                        align: 'left'
                    },
                    width: 260,
                    filter: 'search',
                    sortable: true
                },
                {
                    type: 'string',
                    name: 'description',
                    header: i18next.t('field.description'),
                    record: {
                        editable: false,
                        align: 'left'
                    },
                    width: 460,
                    handlers: {
                        dblclick: (columns, data, column, record, rowIndex) => {
                            alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`);
                        }
                    },
                    filter: 'search'
                },
                {
                    type: 'number',
                    name: 'size',
                    header: i18next.t('field.size'),
                    record: {
                        editable: false,
                        align: 'right'
                    },
                    width: 120
                },
                {
                    type: 'object',
                    name: 'creator',
                    header: i18next.t('field.creator'),
                    width: 150
                },
                {
                    type: 'datetime',
                    name: 'createdAt',
                    header: i18next.t('field.created-at'),
                    width: 180,
                    sortable: true
                }
            ],
            rows: {
                appendable: false,
                selectable: {
                    multiple: true
                },
                handlers: {
                    click: (columns, data, column, record, rowIndex) => {
                        record.fullpath && window.open(record.fullpath, '_blank');
                        // column.type != 'gutter' && navigate(`process-viewer/${record.id}`)
                    }
                },
                classifier: function (record, rowIndex) { }
            },
            sorters: [
                {
                    name: 'createdAt',
                    desc: false
                }
            ],
            pagination: {
                pages: [20, 30, 50],
                limit: 30
            }
        };
    }
    updated(changes) { }
    pageUpdated(changes, lifecycle) {
        if (this.active) {
            this.grist.fetch();
        }
    }
    async pageInitialized() {
        this.config = this.gristConfig;
    }
    async onDeletePDFReport(report) {
        try {
            const data = await deletePDFReport(report.id);
            data && notify('info', i18next.t('text.pdf report deleted', { report: report.name }));
        }
        catch (ex) {
            notify('error', ex, ex);
        }
        this.grist.fetch();
    }
    async getPDFReports({ filters = [], page = 1, limit = 30, sortings = [] } = {}) {
        return (await fetchPDFReportList({
            filters,
            sortings,
            page,
            limit
        })).attachments;
    }
};
ReportListPage.styles = [
    CommonGristStyles,
    CommonHeaderStyles,
    css `
      :host {
        display: flex;

        width: 100%;

        --grid-record-emphasized-background-color: red;
        --grid-record-emphasized-color: yellow;
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ReportListPage.prototype, "config", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ReportListPage.prototype, "data", void 0);
__decorate([
    query('ox-grist'),
    __metadata("design:type", DataGrist)
], ReportListPage.prototype, "grist", void 0);
ReportListPage = __decorate([
    customElement('report-list-page')
], ReportListPage);
export { ReportListPage };
//# sourceMappingURL=report-list-page.js.map