
class OrdenTrabajoDatatable {
    constructor(domItem) {
        this.item = domItem
        this.datatableItem = this.item.find("#ot-datatable-finalizados")
        this.datatablePendientesItem = this.item.find("#ot-datatable-pendientes")
        this.datatableFerroPendienteItem = this.item.find("#ot-datatable-ferro-pendiente")
        this.datatableFerroOkItem = this.item.find("#ot-datatable-ferro-ok")


        this.datatableColumns = [
            { data: 'pedido_id', searchable: false, sortable: false },
            { data: 'fecha_encuadernado_at', searchable: false, sortable: false },
            { data: 'cliente_nombre', searchable: false, sortable: false },
            { data: 'presupuesto_titulo', searchable: false, sortable: false },
            { data: 'ubicacion_nombre', searchable: false, sortable: false },
            { data: 'total_tirada', searchable: false, sortable: false, render: (d) => `<span class="autonumeric">${d}</span>` },
            { data: 'tipo_presupuesto_impresion', searchable: false, sortable: false },
            {
                data: 'logo', searchable: false, sortable: false, render: (d, t) => {
                    return `<div class="logo-container">
                                <img class="d-block" src="${d.logo}" width="45px" height="45px" alt="logo-impresion" />
                                ${d.imposicion ? `<span class="imposicion-overlay-image">${d.imposicion ?? ""}</span>` : ''}
                            </div>`
                }
            },
            {
                data: 'progreso', searchable: false, sortable: false, render: (d, t) => {
                    return `<div class="progress border rounded-2" style="height: 1rem;">
                <div id="ot-progress-bar" class="progress-bar" role="progressbar" style="width: ${parseInt(d)}%;"  aria-valuenow="${d}" aria-valuemin="0" aria-valuemax="100">${d}%</div>
                </div>
                `
                }
            },
            {
                data: 'action', searchable: false, sortable: false,
                render: (d, t) => {
                    return `<div class="btn-group btn-group-sm">
                    <a type="button" href="/produccion/ordentrabajo/edit/${d}" class=" btn btn-outline ot-edit"><i class="ti ti-eye ti-sm mx-2"></i></a>
                    <a type="button" target="_blank" href="/produccion/ordentrabajo/pdf/${d}" class="btn btn-outline ot-pdf"><i class="ti ti-download ti-sm mx-2"></i></a>

                </div>`
                }
            }
        ]
    }
    init() {
        this.datatable = this.datatableItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            columnDefs: [
                { className: 'dt-center', targets: '_all' },
    
            ],
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable',
            createdRow: (row,data,dataIndex) => {
                $(row).css("border-left",`10px solid ${data.logo.color}`)
                $(row).css("border-right",`10px solid ${data.logo.color}`)
            }
        });
    }
    initPendientes() {
        this.datatable = this.datatablePendientesItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_pendientes',
            createdRow: (row,data,dataIndex) => {
                $(row).css("border-left",`20px solid ${data.logo.color}`)
                $(row).css("border-right",`20px solid ${data.logo.color}`)

            }
        });
    }
    initFerroPendiente() {
        this.datatable = this.datatableFerroPendienteItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            pageLength: 25,
            columnDefs: [
                { className: 'dt-center', targets: '_all' },
   
            ],
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_ferro_pendiente',
            createdRow: (row,data,dataIndex) => {
                $(row).css("border-left",`20px solid ${data.logo.color}`)
                $(row).css("border-right",`20px solid ${data.logo.color}`)
            }
        });
    }
    initFerroOk() {
        this.datatable = this.datatableFerroOkItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            columnDefs: [
                { className: 'dt-center', targets: '_all' },
    
            ],
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_ferro_ok',
            createdRow: (row,data,dataIndex) => {
                $(row).css("border-left",`20px solid ${data.logo.color}`)
                $(row).css("border-right",`20px solid ${data.logo.color}`)
            }
        });
    }

}

export default OrdenTrabajoDatatable;