employee-categories.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
import { EmpTypeService } from 'src/app/shared/services/employee-type.service';

@Component({
  selector: 'app-employee-categories',
  templateUrl: './employee-categories.component.html',
  styleUrls: ['./employee-categories.component.scss']
})
export class EmployeeCategories {
  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น

  // ฟังก์ชันในการเปลี่ยนแท็บ
  changeTab(tab: { id: string, text: string }) {
    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
    this.activeTab = tab.id;
  }

  currentPage = 1
  page = Array.from({ length: 1 }, (_, i) => i + 1);
  emp_typeList: EmpTypeModel[] = []
  emp_type: EmpTypeModel = new MyEmpTypeModel({})
  search = ""
  itemToDelete: EmpTypeModel | null = null;
  constructor(private EmpTypeService: EmpTypeService,
    private toastr: ToastrService
  ) { }
  ngOnInit(): void {
    this.getEmpTypeList()
  }

  modalOptions: {
    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
      isModalOpen: boolean; // เปิด/ปิด 
      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
    }
  } = {
      "add": {
        isModalOpen: false,
        modalSize: 'm',
        backdropClose: true,
      },
      "edit": {
        isModalOpen: false,
        modalSize: 'm',
        backdropClose: true,
      },
      "upload":{
        isModalOpen: false,
        modalSize: 'm',
        backdropClose: true,
      }
    }

  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
    this.modalOptions[name].modalSize = size;
    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
    this.modalOptions[name].isModalOpen = true;
    document.body.style.overflow = 'hidden'; // ล็อก Scroll
  }

  closeModal(name: string) {
    this.modalOptions[name].isModalOpen = false;
    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
    if (!this.isAnyModalOpen()) {
      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
    }
  }

  isAnyModalOpen(): boolean {
    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
  }
  getEmpTypeList() {
    this.EmpTypeService.getList().subscribe(response => {
      this.emp_typeList = response
      this.searchChange()
    })
  }
  searchChange() {
    this.currentPage = 1
    this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
  }
  emp_typeListFilter() {
    return this.emp_typeList.filter(x => 
      x.codeId.toLowerCase().includes(this.search) ||
      x.tdesc.toLowerCase().includes(this.search) ||
      x.edesc.toLowerCase().includes(this.search))
  }
  selectEmp_type(emp_type: EmpTypeModel) {
    // this.showSuccess()
    this.emp_type = new MyEmpTypeModel(emp_type)
  }
  addEmp_type() {
    // this.emp_typeService.post(this.emp_type).subscribe((response:any) => {
    //   if (response.success) {
    //     this.getemp_typeList()
    //   }
    // })
  }
  deleteEmp_type(emp_type: EmpTypeModel) {
    // this.emp_typeService.delete(new MyEmpTypeModel(emp_type)).subscribe((response:any) => {
    //   if (response.success) {
    //     this.getemp_typeList()
    //   }
    // })
  }


  openDeleteModal(item: EmpTypeModel) {
    this.itemToDelete = item; // เก็บข้อมูลที่ต้องการลบ
  }

  deleteSelected() {
    if (this.itemToDelete) {
      // ลบ item ที่ถูกเลือกออกจาก emp_typeList
      this.emp_typeList = this.emp_typeList.filter(item => item !== this.itemToDelete);
    }
  }

  // ฟังก์ชันลบข้อมูลที่เลือก
  deleteSelectedItems() {
    this.emp_typeList = this.emp_typeList.filter(item => !item['selected']);
  }

  onCheckboxChange(emp_type: EmpTypeModel) {
    console.log('Checkbox changed:', emp_type);
  }

  showSuccessAdd() {
    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
      timeOut: 3000,
      positionClass: 'toast-top-right',
    });
  }
  showSuccessEdit() {
    this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
      timeOut: 3000,
      positionClass: 'toast-top-right',
    });
  }
  showSuccessDelete() {
    this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
      timeOut: 3000,
      positionClass: 'toast-top-right',
    });
  }

}