const createOpt2 = function(optValue, optText){
    const opt = document.createElement('option');
    opt.value = optValue;
    opt.text = optText;

    return opt;
}

class CreatePopup2 {
    constructor(options) {
        const {
            container,
            fields,
            columns,
            selectKey,
            mode,
            tabrow,
            dbClickable,
            setFilter,
        } = options;

        this.container = container;
        this.fields = fields;
        this.columns = columns;
        this.selectKey = selectKey;
        this.mode = mode;
        this.tabrow = tabrow;
        this.dbClickable = dbClickable;


        // 콜백 함수
        this.setFilter = setFilter;
    }

    init() {
        vnLoad('', '/ksvc/inc/popup.php', this.container, (loadHtml) => {
            this.modal = kuls_modal(loadHtml);
            this.setSelectOption();

            //컬럼 공통 규칙
            const commonFieldData = {
                vertAlign: "middle",
                hozAlign: "center",
                resizable: "header",
                headerHozAlign: "center",
                headerSortTristate: true,
            };

            // 테이블 생성
            this.tbModal = new Tabulator(".awn-popup-confirm .hy-table", {
                layout: "fitColumns",
                columns: this.fields, //컬럼 설정
                columnDefaults: commonFieldData,
                headerSortElement: "<i class='bi'></i>", //정렬 아이콘
            });


            const addBtn = document.querySelector("#awn-popup-wrapper .add-btn") || "";
            const removeBtn = document.querySelector("#awn-popup-wrapper .remove-btn") || "";

            const ptResetBtn = document.querySelector("#awn-popup-wrapper #ptReset") || false;
            const textSearch = document.querySelector("#awn-popup-wrapper [name=stxt]") || false;
            const selectSearch = document.querySelector("#awn-popup-wrapper [name=sgrp]") || false;

            if (ptResetBtn) {
                ptResetBtn.addEventListener("click", () => {
                    this.initData();
                    this.modal.delete();
                });
            }

            if (textSearch) {
                textSearch.addEventListener("keyup", () => { //검색어 입력 이벤트
                    this.setFilter(this.tbModal);
                });
            }

            if (this.selectKey) {
                selectSearch.addEventListener("change", () => { //영업분류 변경 이벤트
                    this.setFilter(this.tbModal);
                });
            }

            this.tbModal.on("rowDblClick", (e, tgt) => {
                this.dbClickable && this.dbClick(e, tgt);

            });
            // 테이블 리스트 렌더링
            this.tbModal.on("tableBuilt", () => { //초기 데이터 불러오기 이벤트
                this.getPopList();
            });

            /*
             * @Overview cell 클릭시 체크 또는 팝업
             * @Parameter 이벤트, 셀
             */
            this.tbModal.on("cellClick", (e, tgt) => {
                this.cellClick && this.cellClick(e, tgt);
            });

            // 추가
            ["click", "keypress"].forEach((evt) => {
                addBtn.addEventListener && addBtn.addEventListener(evt, () => {
                    this.addRow && this.addRow();
                });
            });
            // 삭제
            ["click", "keypress"].forEach((evt) => {
                removeBtn.addEventListener && removeBtn.addEventListener(evt, () => {
                    // 삭제 함수
                    this.removeRow && this.removeRow();
                });
            });

        })
        // vnload 끝

    }
    // 선택태그 옵션 생성
    setSelectOption(){
        // 선택태그 있으면
        if(this.selectKey){
            const selectTag = document.querySelector('#sgrp');
            selectTag.options.length = 0;
            const opt = createOpt('','- 전 체 -')
            selectTag.add(opt);

            Object.keys(this.selectKey).forEach(key => {
                selectTag.add(createOpt(key, this.selectKey[key]));
            });
        }
    }
    // 데이터 렌더링
    getPopList(){
        console.log(this.columns);
        ajax_json({
            url: "/ksvc/inc/common.ajax.php",
            data: {mode: this.mode, ITEM_CD : this.columns['ITEM_CD'], },
            success:( data ) => {
                if( data.code ){
                    // console.log(data.data)
                    this.tbModal.setData(data.data);
                    if( this.columns.tgt_filter && this.columns.txt_filter ){
                        document.querySelector(this.columns.tgt_filter).value = this.columns.txt_filter;
                        this.setFilter();
                    }
                }
            },
            error: (request, status, error)=>{
                kuls_alert(error.message);
            },
        });
    };
}


const popItemOper = function( columns, tabrow ){

    const fields = [
        { formatter:"rownum", title: "No",           width: 50,  headerSort: false, hozAlign:'center', },
        { field: "OP_CD",     title: "공정코드",     width: 100, },
        { field: "OP_NM",     title: "공정명",       width: 100, },
        { field: "OP_GRP",    title: "공정그룹",     width: 100, },
        { field: "REMK",      title: "비고",         width: 200, },
    ];

    const setTableFilter = function(modal){ //검색어 필터 적용
        let stxt = trim(document.querySelector("#awn-popup-wrapper input[name=stxt]").value);
        modal.setFilter(function(data){
            return (!stxt || data['OP_CD'].search(RegExp(stxt,"is")) !== -1  || data['OP_NM'].search(RegExp(stxt,"is")) !== -1)
        }, '=', true);
    };
    const Tb_modal = new CreatePopup2({
        container: '#popup_oper_container',
        fields: fields,
        columns: columns,
        selectKey: false,
        mode: "getItemOperList",
        tabrow: tabrow,
        dbClickable: true,
        setFilter: setTableFilter,
    });

    Tb_modal.init();
}