//우측 섹션 관련
let _managerData = [];
let _ixrTable;
let _infoList;
let _prprcList;
let _editBtn;
let _cancelBtn;
let _saveBtn;
let nRghtShpe;
let eRghtShpe;
let sRghtShpe;
let wRghtShpe;
let nLeftShpe;
let eLeftShpe;
let sLeftShpe;
let wLeftShpe;
let nGoDvrsLaneCnt;
let eGoDvrsLaneCnt;
let sGoDvrsLaneCnt;
let wGoDvrsLaneCnt;
let nBusDvrsLaneCnt;
let eBusDvrsLaneCnt;
let sBusDvrsLaneCnt;
let wBusDvrsLaneCnt;
let nOfst;
let eOfst;
let sOfst;
let wOfst;
let nSgnlOperShpe;
let eSgnlOperShpe;
let sSgnlOperShpe;
let wSgnlOperShpe;
let inputArr;
let _prprcData;
let nAcrdWholLaneCnt;
let eAcrdWholLaneCnt;
let sAcrdWholLaneCnt;
let wAcrdWholLaneCnt;
let nUprtxLeftVhclUnum;
let eUprtxLeftVhclUnum;
let sUprtxLeftVhclUnum;
let wUprtxLeftVhclUnum;
let nUprtLeft;
let eUprtLeft;
let sUprtLeft;
let wUprtLeft;
const _selectMap = new Map();
const titleMap   = new Map();
const dataMap    = new Map();
const maxMap     = new Map();
const codeUrl = '/api/database/code/cmmn-cd';

maxMap.set('u_turn_tfvl', 9999);
maxMap.set('entr_tfvl', 9999);
maxMap.set('exit_tfvl', 9999);
maxMap.set('bus_stop_unum', 9999);
maxMap.set('park_actn_unum', 9999);
maxMap.set('cros_walk_cnt', 9999);
maxMap.set('walk_sgnl_hh', 999);
maxMap.set('upst_link_lngt', 999);
maxMap.set('crus_sped', 999);
maxMap.set('hpev', 999);
maxMap.set('avrg_lawh', 99.9);
maxMap.set('bus_sttn_dstc', 999);
maxMap.set('left_curv_rads', 999);
maxMap.set('upst_sttn_dstc', 999);
maxMap.set('intl_atmp_vhcl_unum', 9999);

titleMap.set('u_turn_tfvl', 'U턴교통량(vph)');
titleMap.set('entr_tfvl', '진입교통량(vph)');
titleMap.set('exit_tfvl', '진출교통량(vph)');
titleMap.set('bus_bay_en', '버스베이유무(O,X)');
titleMap.set('bus_stop_unum', '버스정차대수(vph)');
titleMap.set('stre_park_en', '주차여부(O,X)');
titleMap.set('park_actn_unum', '주차활동대수(vph)');
titleMap.set('cros_walk_cnt', '횡단보행자수(인/시)');
titleMap.set('walk_sgnl_hh', '보행신호시간(초)');
titleMap.set('upst_link_lngt', '상류링크길이(m)');
titleMap.set('crus_sped', '순행속도(kp/h)');
titleMap.set('hpev', '경사(%)');
titleMap.set('avrg_lawh', '평균차로폭(m)');
titleMap.set('bus_sttn_dstc', '버스정류장거리(m)');
titleMap.set('left_curv_rads', '좌회전곡선변경(m)');
titleMap.set('upst_sttn_dstc', '정류장이격거리(m)');
titleMap.set('intl_atmp_vhcl_unum', '초기대기차량대수');

let listSortArr = [
    'U턴교통량(vph)',
    '진입교통량(vph)',
    '진출교통량(vph)',
    '버스베이유무(O,X)',
    '버스정차대수(vph)',
    '주차여부(O,X)',
    '주차활동대수(vph)',
    '횡단보행자수(인/시)',
    '보행신호시간(초)',
    '상류링크길이(m)',
    '순행속도(kp/h)',
    '경사(%)',
    '평균차로폭(m)',
    '버스정류장거리(m)',
    '좌회전곡선변경(m)',
    '정류장이격거리(m)',
    '초기대기차량대수',
];

let _infoData;
//공통
let _commonUri = "/api/scrs/tb_sc_ixr_mngm/list";
let _apiUri    = '/api/scrs/tb_sc_trfc_cndt_mngm';
const _pageName = '교차로교통량 카메라 관리';
const pageMsg = "카메라";

$(() => {
    //상단 닫기 버튼
    const closeBtn   = new dxBtn($('.close-btn'), '닫기', 'close', 'outlined', 80, 30, false, true); 
    _editBtn         = new dxBtn($('.edit-btn'), '수정', 'edit', 'outlined', 80, 30, false, true); 
    _cancelBtn       = new dxBtn($('.cancel-btn'), '취소', 'close', 'outlined', 80, 30, false, false); 
    _saveBtn         = new dxBtn($('.save-btn'), '저장', 'save', 'outlined', 80, 30, false, false);
    nRghtShpe        = new dxSelect($('.n_rght_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'n_rght_shpe', '우회전차로구분(북)')
    eRghtShpe        = new dxSelect($('.e_rght_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'e_rght_shpe', '우회전차로구분(동)')
    sRghtShpe        = new dxSelect($('.s_rght_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 's_rght_shpe', '우회전차로구분(남)')
    wRghtShpe        = new dxSelect($('.w_rght_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'w_rght_shpe', '우회전차로구분(서)')
    nLeftShpe        = new dxSelect($('.n_left_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'n_left_shpe', '좌회전차로구분(북)')
    eLeftShpe        = new dxSelect($('.e_left_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'e_left_shpe', '좌회전차로구분(동)')
    sLeftShpe        = new dxSelect($('.s_left_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 's_left_shpe', '좌회전차로구분(남)')
    wLeftShpe        = new dxSelect($('.w_left_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'w_left_shpe', '좌회전차로구분(서)')
    nGoDvrsLaneCnt   = new dxNumber($('.n_go_dvrs_lane_cnt'), 'outlined', '90%', 40,  0, 9, false, null, 'n_go_dvrs_lane_cnt', '#0', true);
    eGoDvrsLaneCnt   = new dxNumber($('.e_go_dvrs_lane_cnt'), 'outlined', '90%', 40,  0, 9, false, null, 'e_go_dvrs_lane_cnt', '#0', true);
    sGoDvrsLaneCnt   = new dxNumber($('.s_go_dvrs_lane_cnt'), 'outlined', '90%', 40,  0, 9, false, null, 's_go_dvrs_lane_cnt', '#0', true);
    wGoDvrsLaneCnt   = new dxNumber($('.w_go_dvrs_lane_cnt'), 'outlined', '90%', 40,  0, 9, false, null, 'w_go_dvrs_lane_cnt', '#0', true);
    nBusDvrsLaneCnt  = new dxNumber($('.n_bus_dvrs_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 'n_bus_dvrs_lane_cnt', '#0', true);
    eBusDvrsLaneCnt  = new dxNumber($('.e_bus_dvrs_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 'e_bus_dvrs_lane_cnt', '#0', true);
    sBusDvrsLaneCnt  = new dxNumber($('.s_bus_dvrs_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 's_bus_dvrs_lane_cnt', '#0', true);
    wBusDvrsLaneCnt  = new dxNumber($('.w_bus_dvrs_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 'w_bus_dvrs_lane_cnt', '#0', true);
    nAcrdWholLaneCnt = new dxNumber($('.n_acrd_whol_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 'n_acrd_whol_lane_cnt', '#0', true);
    eAcrdWholLaneCnt = new dxNumber($('.e_acrd_whol_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 'e_acrd_whol_lane_cnt', '#0', true);
    sAcrdWholLaneCnt = new dxNumber($('.s_acrd_whol_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 's_acrd_whol_lane_cnt', '#0', true);
    wAcrdWholLaneCnt = new dxNumber($('.w_acrd_whol_lane_cnt'), 'outlined', '90%', 40, 0, 9, false, null, 'w_acrd_whol_lane_cnt', '#0', true);
    nSgnlOperShpe    = new dxSelect($('.n_sgnl_oper_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'n_sgnl_oper_shpe', '신호운영형태(북)');
    eSgnlOperShpe    = new dxSelect($('.e_sgnl_oper_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'e_sgnl_oper_shpe', '신호운영형태(동)');
    sSgnlOperShpe    = new dxSelect($('.s_sgnl_oper_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 's_sgnl_oper_shpe', '신호운영형태(남)');
    wSgnlOperShpe    = new dxSelect($('.w_sgnl_oper_shpe'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'w_sgnl_oper_shpe', '신호운영형태(서)');
    nOfst            = new dxNumber($('.n_ofst'), 'outlined', '90%', 40, 0, 999, false, null, 'n_ofst', '#,##0', true);
    eOfst            = new dxNumber($('.e_ofst'), 'outlined', '90%', 40, 0, 999, false, null, 'e_ofst', '#,##0', true);
    sOfst            = new dxNumber($('.s_ofst'), 'outlined', '90%', 40, 0, 999, false, null, 's_ofst', '#,##0', true);
    wOfst            = new dxNumber($('.w_ofst'), 'outlined', '90%', 40, 0, 999, false, null, 'w_ofst', '#,##0', true);
    nUprtLeft        = new dxSelect($('.n_uprt_left'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'n_uprt_left', '비보호좌회전');
    eUprtLeft        = new dxSelect($('.e_uprt_left'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'e_uprt_left', '비보호좌회전');
    sUprtLeft        = new dxSelect($('.s_uprt_left'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 's_uprt_left', '비보호좌회전');
    wUprtLeft        = new dxSelect($('.w_uprt_left'), 'outlined', '90%', 40, 'cmmn_cd_kor_nm', 'cmmn_cd', true, 'w_uprt_left', '비보호좌회전');
    nUprtxLeftVhclUnum = new dxNumber($('.n_uprt_left_vhcl_unum'), 'outlined', '90%', 40, 0, 999, false, null, 'n_uprt_left_vhcl_unum', '#,###', true);
    eUprtxLeftVhclUnum = new dxNumber($('.e_uprt_left_vhcl_unum'), 'outlined', '90%', 40, 0, 999, false, null, 'e_uprt_left_vhcl_unum', '#,###', true);
    sUprtxLeftVhclUnum = new dxNumber($('.s_uprt_left_vhcl_unum'), 'outlined', '90%', 40, 0, 999, false, null, 's_uprt_left_vhcl_unum', '#,###', true);
    wUprtxLeftVhclUnum = new dxNumber($('.w_uprt_left_vhcl_unum'), 'outlined', '90%', 40, 0, 999, false, null, 'w_uprt_left_vhcl_unum', '#,###', true);
    inputArr = [
        nRghtShpe,
        eRghtShpe,
        sRghtShpe,
        wRghtShpe,
        nLeftShpe,
        eLeftShpe,
        sLeftShpe,
        wLeftShpe,
        nGoDvrsLaneCnt,
        eGoDvrsLaneCnt,
        sGoDvrsLaneCnt,
        wGoDvrsLaneCnt,
        nBusDvrsLaneCnt,
        eBusDvrsLaneCnt,
        sBusDvrsLaneCnt,
        wBusDvrsLaneCnt,
        nAcrdWholLaneCnt,
        eAcrdWholLaneCnt,
        sAcrdWholLaneCnt,
        wAcrdWholLaneCnt,
        nSgnlOperShpe,
        eSgnlOperShpe,
        sSgnlOperShpe,
        wSgnlOperShpe,
        nOfst,
        eOfst,
        sOfst,
        wOfst,
        nUprtLeft,
        eUprtLeft,
        sUprtLeft,
        wUprtLeft,
        nUprtxLeftVhclUnum,
        eUprtxLeftVhclUnum,
        sUprtxLeftVhclUnum,
        wUprtxLeftVhclUnum,
    ];

    closeBtn.onClick(()=>window.close());
    _editBtn.onClick(editBtnClick);
    _cancelBtn.onClick(cancelBtnClick);
    _saveBtn.onClick(saveBtnClick);
    //소통정보 이력분석 테이블
    _ixrTable = $(".manager-table")
        .width("100%")
        .height("100%")
        .dxDataGrid({
            dataSource: [],
            allowColumnReordering: true,
            showColumnLines: true,
            showBorders: true,
            allowColumnResizing: true,
            rowAlternationEnabled: true,
            focusedRowEnabled: true,
            columnAutoWidth: true,
            noDataText: "표출할 정보가 없습니다.",
            selection: {
                mode: "single",
            },
            keyExpr: "ixr_id",

            headerFilter: {
                visible: true,
            },
            scrolling: {
                mode: "virtual",
            },
            columns: [
                {
                    dataField: "ixr_id",
                    caption: "번호",
                    width: 120,
                    alignment: "center",
                },
                {
                    dataField: "ixr_nm",
                    caption: "교차로 명칭",
                    alignment: "center",
                    cellTemplate(c, e) {
                        return alignTemplate(c, e, 'left');
                    },
                },
            ],
            onRowClick(e) {
                if (e.data.ixr_id === _infoData.ixr_id) {
                    return false;
                }
                else  {
                    fetchInfoData(e.data.ixr_id);
                }
            },
        })
        .dxDataGrid("instance");
 
    _infoList = $(".info-list")
        .width("100%")
        .height("100%")
        .dxDataGrid({
            dataSource: [],
            allowColumnReordering: true,
            showColumnLines: true,
            showBorders: true,
            allowColumnResizing: true,
            rowAlternationEnabled: true,
            focusedRowEnabled: true,
            columnAutoWidth: true,
            noDataText: "표출할 정보가 없습니다.",
            selection: {
                mode: "none",
            },
            sorting:{
                mode: "none",
            },
            keyExpr: "id",
            scrolling: {
                mode: "virtual",
            },
            columns: [
                {
                    dataField: "id",
                    caption: "접근로 및 이동류",
                    alignment: "center",
                    width: 200,
                    allowEditing: false,
                },
                {
                    dataField: "north",
                    caption: "북",
                    alignment: "center",
                    editCellTemplate(c, e) {
                        return oxEditSelector(c, e);
                    }
                },
                {
                    dataField: "east",
                    caption: "동",
                    alignment: "center",
                    editCellTemplate(c, e) {
                        return oxEditSelector(c, e);
                    }
                },
                {
                    dataField: "south",
                    caption: "남",
                    alignment: "center",
                    editCellTemplate(c, e) {
                        return oxEditSelector(c, e);
                    }
                },
                {
                    dataField: "west",
                    caption: "서",
                    alignment: "center",
                  
                    editCellTemplate(c, e) {
                        return oxEditSelector(c, e);
                    }
                },
            ],
            // onRowClick(e) {
            //     if(e.data.code === 'bus_bay_en' || e.data.code === 'stre_park_en') {
            //         return;
            //     }
            // },
        })
        .dxDataGrid("instance");
       
    fetchBaseData();
});

function fetchBaseData(){
    getDataAsync(_commonUri, recvIxrData);
    getDataAsync( codeUrl + '/SGNLOPR', recvSignData);
    getDataAsync( codeUrl + '/LSHPE', resvShpeData, [nLeftShpe, eLeftShpe, sLeftShpe, wLeftShpe]);
    getDataAsync( codeUrl + '/RSHPE', resvShpeData, [nRghtShpe, eRghtShpe, sRghtShpe, wRghtShpe]);
    getDataAsync( codeUrl + '/ULEFT', resvShpeData, [nUprtLeft, eUprtLeft, sUprtLeft, wUprtLeft]);
}

function resvShpeData(jsonData, array){
    if (jsonData && jsonData.length > 0) {
        jsonData.map((item)=>{
            item.cmmn_cd = Number(item.cmmn_cd);
        })
    }
    array.map((item)=>{
        item.setDataSource(jsonData);
    })
}
function recvIxrData(jsonData){
    if (jsonData.length > 0) {
        dataSorting(jsonData, 'ixr_id');
        _ixrTable.option('dataSource', jsonData);
        fetchInfoData(jsonData[0].ixr_id);
        _ixrTable.option('focusedRowIndex', 0);
        _ixrTable.selectRows(jsonData[0].ixr_id);
        _editBtn.setDisabled(false);
    }
    else {
        _editBtn.setDisabled(true);
        _ixrTable.option('dataSource', jsonData);
    }
}

function recvSignData(jsonData){
    if (jsonData.length > 0) {
        jsonData.map((item)=>{
            if (item.cmmn_cd) item.cmmn_cd = Number(item.cmmn_cd);
        })
    }
    nSgnlOperShpe.setDataSource(jsonData);
    eSgnlOperShpe.setDataSource(jsonData);
    sSgnlOperShpe.setDataSource(jsonData);
    wSgnlOperShpe.setDataSource(jsonData);
}
function fetchInfoData(ixrId){
    if (nullChecker(ixrId) !== "") {
        getDataAsync(_apiUri + '/' + encodeURIComponent(ixrId), recvInfoData);
        getDataAsync('/api/scrs/tb_sc_ixr_gemt_mngm/' + encodeURIComponent(ixrId), recvPcprcData);
    }
   
}

function saveBtnClick(){
    const infoData    = _infoList.option('dataSource');
    const updateData1 = getUpdateData(_infoData);
    const updateData2 = getUpdateData(_prprcData);
 
    infoData.map((info)=>{
        if (info.code !== 'bus_bay_en' && info.code !== 'stre_park_en' ) {
            updateData1[0][info.code] = info.north;
            updateData1[1][info.code] = info.east;
            updateData1[2][info.code] = info.south;
            updateData1[3][info.code] = info.west;
        }
        else  {
            updateData1[0][info.code] = info.north === "O" ? "1" : "0";
            updateData1[1][info.code] = info.east  === "O" ? "1" : "0";
            updateData1[2][info.code] = info.south === "O" ? "1" : "0";
            updateData1[3][info.code] = info.west  === "O" ? "1" : "0";
        }
    });

    inputArr.map((item)=>{
        const fw = item.column.substring(0,2);
        const column = item.column.substring(2, item.column.length);
        if (fw === 'n_') {
            updateData2[0][column] = item.getValue();
        }
        else if (fw === 'e_') {
            updateData2[1][column] = item.getValue();
        }
        else if (fw === 's_') {
            updateData2[2][column] = item.getValue();
        }
        else if (fw === 'w_') {
            updateData2[3][column] = item.getValue();
        }
    });
    const ixrId = updateData1[0].ixr_id;
    let result = postInsertUpdate('/api/scrs/tb_sc_trfc_cndt_mngm', updateData1);
    if (result > 0) {
        result += postInsertUpdate('/api/scrs/tb_sc_ixr_gemt_mngm', updateData2);
        if (result >= 2) {
            alertConfirm('교차로 ID : ' + ixrId + '<br>기하구조 정보를 수정하였습니다.');
            cancelBtnClick();
        }
    }
}

function getUpdateData(data){
    let northData;
    let eastData;
    let southData;
    let westData;
    data.map((item)=>{
        const obj = {...item};
        if (obj.drct_dvsn_cd === 1) {
            northData = obj;
        }
        else if (obj.drct_dvsn_cd === 2) {
            eastData = obj;
        }
        else if (obj.drct_dvsn_cd === 3) {
            southData = obj;
        }
        else if (obj.drct_dvsn_cd === 4) {
            westData = obj;
        }
    });
    let updateData = [
        northData,
        eastData,
        southData,
        westData,
    ]
    return updateData;
}

function recvPcprcData(jsonData) {
    if (jsonData.length > 0) {
        jsonData.map((item)=>{
            for (let key in item) {
                inputArr.map((input)=>{
                    if (item.drct_dvsn_cd === 1 && input.column === "n_" + key) {
                        input.setValue(item[key]);
                    }
                    else if (item.drct_dvsn_cd === 2 && input.column === "e_" + key) {
                        input.setValue(item[key]);
                    }
                    else if (item.drct_dvsn_cd === 3 && input.column === "s_" + key) {
                        input.setValue(item[key]);
                    }
                    else if (item.drct_dvsn_cd === 4 && input.column === "w_" + key) {
                        input.setValue(item[key]);
                    }
                })
            }
        })
        _prprcData = jsonData;
    }
}

function recvInfoData(jsonData){
    _infoData = jsonData;
    dataMap.clear();
    if (jsonData.length > 0) {
        for (let data of jsonData) {
            for (let key in data) {
                if (key !== 'ixr_id' && key !== 'peak_hh_fctr' && key !== 'drct_dvsn_cd') {
                    let objData = data[key];
                    if (key === 'stre_park_en' || key === 'bus_bay_en') {
                        objData = objData === "0" ? 'X' : objData === "1" ? 'O' : '-';
                    }
                    if (dataMap.get(key) === undefined) {
                        dataMap.set(key, {ixr_id: data.ixr_id, peak_hh_fctr: data.peak_hh_fctr,
                                            code: key, id: titleMap.get(key), 
                                            north:'', south: '', east:'', west:''});
                    }
                    if (data.drct_dvsn_cd === 1) {
                        dataMap.get(key).north = objData;
                    } 
                    else if (data.drct_dvsn_cd === 2) {
                        dataMap.get(key).east = objData;
                    }
                    else if (data.drct_dvsn_cd === 3) {
                        dataMap.get(key).south = objData;
                    }
                    else if (data.drct_dvsn_cd === 4) {
                        dataMap.get(key).west = objData;
                    }
                }
            }
        }
        const data = Array.from(dataMap.values());
        let sortingData = [];
        for (let obj of data) {
            for (let idx in listSortArr) {
                const text = listSortArr[idx];
                if (obj.id === text) {
                    sortingData[idx] = obj;
                }
            }
        }
        _infoList.option('dataSource', sortingData);
    }
    else  {
        _infoList.option('dataSource', jsonData);
    }
  
}

function oxEditSelector(c, e){
    if (e.data.id.indexOf('(O,X)') > -1) {
        const select = $('<div>').width('100%').height('100%').dxSelectBox({
            items: ['O', 'X',],
            value : e.displayValue,
        });
        const selectInstance = select.dxSelectBox('instance');
        selectInstance.on('itemClick', function(){
            let column;
            if (e.columnIndex === 1) {
                column = 'north';
            }
            else if (e.columnIndex === 2) {
                column = 'east';
            }
            else if(e.columnIndex === 3) {
                column = 'south';
            }
            else if (e.columnIndex === 4) {
                column = 'west';
            }
            e.component.cellValue(e.rowIndex, column, selectInstance.option('value'));
            e.component.saveEditData();
            e.component.refresh();
        })
        return select
    }
    else {
        let min = 0;
        let format = '#0';
        if (e.data.code === 'avrg_lawh') {
            min = 0.0;
            format = '#0.0';
        }
        const text = $('<div>').width('100%').height('100%').dxNumberBox({
            value : e.displayValue,
            min   : min,
            format : format,
            max   : maxMap.get(e.data.code),
        });
        const textInstance = text.dxNumberBox('instance');
        textInstance.on('valueChanged', function(){
            let column;
            if (e.columnIndex === 1) {
                column = 'north';
            }
            else if (e.columnIndex === 2) {
                column = 'east';
            }
            else if(e.columnIndex === 3) {
                column = 'south';
            }
            else if (e.columnIndex === 4) {
                column = 'west';
            }
            e.component.cellValue(e.rowIndex, column, textInstance.option('value'));
            e.component.saveEditData();
            e.component.refresh();
        })
        return text;
    }
}

function editBtnClick(){
    _editBtn.setVisible(false);
    _saveBtn.setVisible(true);
    _cancelBtn.setVisible(true);
    dsblOnBtn(_ixrTable);

    _selectMap.forEach((obj)=>{
        obj.forEach((select)=>{
            select.setReadOnly(false);
        });
    });

    _infoList.option('editing', {
        mode: 'cell',
        allowUpdating: true,
    });
    
    inputArr.map((item)=>{
        item.setReadOnly(false);
    });
}
function cancelBtnClick(){
    _editBtn.setVisible(true);
    _saveBtn.setVisible(false);
    _cancelBtn.setVisible(false);
    dsblOffBtn(_ixrTable);
   
    _infoList.option('editing', {
        mode: 'none',
        allowUpdating: false,
    });
    const ixrId = _ixrTable.getSelectedRowsData()[0].ixr_id;
    fetchInfoData(ixrId);
    inputArr.map((item)=>{
        item.setReadOnly(true);
    })
}