111

/* 깜빡임 On 상태 */
.blink-on {
    background-color: #ffcdd2 !important;
    color: #c62828 !important;          
    font-weight: bold;
}

/* 깜빡임 Off 상태 (기본 상태로 돌아가도록 설정) */
.blink-off {
    background-color: transparent !important;
    color: inherit !important;
}



class Blinker {
    /**
     * @param {string} gridId - jqxGrid의 jQuery 선택자 ID (예: '#jqxgrid')
     */
    constructor(gridId) {
        this.$grid = $(gridId);
        // { 'row_field': { intervalId: number, isBlinkOn: boolean, blinkIntervalMs: number, key: string } }
        this.timers = {};
        // 현재 깜빡임을 시작한 모든 row_field 키를 저장합니다.
        this.activeKeys = new Set();
        this.isGlobalBlinkOn = false; // 그리드 전체의 공통 깜빡임 상태 (매 렌더링 시 사용)
        this.globalIntervalId = null;
    }

    /**
     * cellclassname 함수에 사용될 클로저입니다.
     * 그리드가 셀을 렌더링할 때마다 호출되어 클래스 이름을 반환합니다.
     * 주의: 이 함수는 컬럼 정의 시 딱 한 번만 설정됩니다.
     */
    getCellClassNameHandler(dataField) {
        return (row, column, value) => {
            const key = `${row}_${dataField}`;
            
            // 이 셀이 깜빡임 대상인지, 그리고 현재 깜빡임이 ON 상태인지 확인합니다.
            if (this.activeKeys.has(key) && this.isGlobalBlinkOn) {
                return 'blink-on';
            }
            
            // 깜빡임 대상이 아니거나, 현재 OFF 상태이면 클래스를 제거합니다.
            return 'blink-off';
        };
    }

    /**
     * 깜빡임을 시작합니다.
     * @param {number} rowIndex - 행 인덱스
     * @param {string} dataField - 컬럼의 datafield 이름
     * @param {number} [blinkIntervalMs=500] - 깜빡이는 주기 (밀리초)
     * @param {number} [durationMs=null] - 전체 지속 시간 (null이면 영구 지속)
     */
    start(rowIndex, dataField, blinkIntervalMs = 500, durationMs = null) {
        const key = `${rowIndex}_${dataField}`;
        
        // 이미 해당 셀이 깜빡이는 중이라면 정지합니다.
        this.stop(rowIndex, dataField);
        
        // 깜빡임 대상 목록에 추가
        this.activeKeys.add(key);
        
        // 아직 전체 깜빡이 Interval이 시작되지 않았다면 시작합니다.
        if (this.globalIntervalId === null) {
            this.globalIntervalId = setInterval(() => {
                this.isGlobalBlinkOn = !this.isGlobalBlinkOn; // 상태 토글
                // **핵심**: 그리드를 강제로 다시 렌더링하여 cellclassname 함수를 재호출합니다.
                this.$grid.jqxGrid('render');
            }, blinkIntervalMs);
            console.log("Global Blink Interval Started.");
        }

        // 지속 시간이 설정된 경우, 일정 시간 후 stop 함수 호출
        if (durationMs !== null) {
            setTimeout(() => {
                this.stop(rowIndex, dataField);
            }, durationMs);
        }
        
        console.log(`Blinking started for cell (${rowIndex}, ${dataField}).`);
    }

    /**
     * 특정 셀의 깜빡임을 정지하고 기본 상태로 복구합니다.
     * @param {number} rowIndex - 행 인덱스
     * @param {string} dataField - 컬럼의 datafield 이름
     */
    stop(rowIndex, dataField) {
        const key = `${rowIndex}_${dataField}`;
        
        if (this.activeKeys.has(key)) {
            // 깜빡임 대상 목록에서 제거
            this.activeKeys.delete(key);
            
            // 스타일을 즉시 제거하기 위해 렌더링 한 번 더 호출
            this.$grid.jqxGrid('render');
            
            // 깜빡임 대상이 더 이상 없다면 전역 Interval도 정지합니다.
            if (this.activeKeys.size === 0) {
                clearInterval(this.globalIntervalId);
                this.globalIntervalId = null;
                this.isGlobalBlinkOn = false;
                console.log("Global Blink Interval Stopped.");
            }
            
            console.log(`Blinking stopped for cell (${rowIndex}, ${dataField}).`);
        }
    }
}


// 1. Blinker 인스턴스 생성
const blinkManager = new Blinker('#jqxgrid');

// 2. jqxGrid 초기화 시 cellclassname 함수로 등록
$("#jqxgrid").jqxGrid({
    // ... 설정
    columns: [
        {
            text: '가격',
            datafield: 'price',
            width: 150,
            // 💡 중요: price 컬럼에 핸들러 함수를 등록합니다.
            cellclassname: blinkManager.getCellClassNameHandler('price')
        },
        {
            text: '재고',
            datafield: 'unitsinstock',
            width: 80,
            // 💡 중요: unitsinstock 컬럼에도 핸들러 함수를 등록합니다.
            cellclassname: blinkManager.getCellClassNameHandler('unitsinstock')
        }
        // ...
    ]
});
// 1. (가격 컬럼) 5번 행을 400ms 주기로 10초간 깜빡이게 시작
blinkManager.start(5, 'price', 400, 10000);

// 2. (재고 컬럼) 8번 행을 600ms 주기로 영구히 깜빡이게 시작
blinkManager.start(8, 'unitsinstock', 600);

// 3. 2번 셀의 깜빡임을 수동으로 정지
setTimeout(() => {
    blinkManager.stop(8, 'unitsinstock');
}, 5000);