import ClassSelect from "../../../components/select2.js";

class PlanningRotativa {
    constructor(domItem) {
        this.item = domItem
        this.tablePlanningRot = this.item.find("#planning-rotativa-datatable")
        this.papelGramajeTablePlanning = this.item.find("#planning-papel-datatable")

        this.datatableColumns = [
            { data: 'otId', searchable: false, sortable: false },
            { data: 'fecha_entrega_real_at', searchable: true, sortable: false },
            { data: 'presupuesto_titulo', searchable: true, sortable: false },
            { data: 'maquina_planning_nombre', searchable: true, sortable: false },
            { data: 'ot_tirada', searchable: false, sortable: false },
            { data: 'maquina_ancho', searchable: false, sortable: false },
            { data: 'maquina_alto', searchable: false, sortable: false },
            { data: 'papel_impresion', searchable: false, sortable: false },
            { data: 'papel_gramaje', searchable: false, sortable: false },
            { data: 'action', searchable: false, sortable: false, render: this._renderBtnAction },

        ]
        this.papelGramajeDatatableColumns = [
            { data: 'papelImpresionNombre', searchable: true, sortable: true },
            { data: 'papelImpresionGramaje', searchable: true, sortable: true },
            { data: 'tareasCount', searchable: true, sortable: true },
            { data: 'totalTirada', searchable: false, sortable: false },
            { data: 'tiempoReal', searchable: false, sortable: false },

        ]
        this.maquinaSelectFilter = new ClassSelect($("#maquina-select-filter"), `/maquinas/select`, "Seleccione una maquina", true);
        this.maquinaSelectFilter.config.dropdownParent = this.item
    }
    init() {
        this.maquinaSelectFilter.init()
        this.datatablePlanningRot = this.tablePlanningRot.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },

            serverSide: true,
            responsive: true,
            pageLength: 10,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/planning/rotativa/datatable'
        });
        this.papelGramajeDatatable = this.papelGramajeTablePlanning.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },

            serverSide: true,
            responsive: true,
            pageLength: 10,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.papelGramajeDatatableColumns,
            ajax: '/produccion/ordentrabajo/planning/papel/datatable'
        });
        this.item.on("keyup", ".planning-filter", (event) => {
            console.log(this.datatablePlanningRot.column($(event.currentTarget).attr("name")))
            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
            this.datatablePlanningRot.column(columnIndex).search($(event.currentTarget).val()).draw()
        })
        this.item.on("change", "#maquina-select-filter", (event) => {
            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
            this.datatablePlanningRot.column(columnIndex).search(this.maquinaSelectFilter.getText()).draw()
        })
    }
    _renderBtnAction(d) {
        return `<a type="button" href="/produccion/ordentrabajo/edit/${d.otId}" class="btn btn-md btn-primary ot-tarea-comment" data-id="${d.otId}"><i class="ti ti-building-factory-2 ti-sm mx-2"></i> Ver orden</a>`
    }
    _columnFiltering() {
        this.api().columns()
        console.log(this.api().columns())
    }

}
export default PlanningRotativa;