import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import { NzMessageService } from 'ng-zorro-antd';

declare var $: any;
declare var jQuery: any;

@Component({
    selector: 'app-personal-settings',
    templateUrl: './personal-settings.component.html',
    styleUrls: ['./personal-settings.component.scss', '../../main.scss'],
    providers: [HttpClientService]
})
export class PersonalSettingsComponent implements OnInit {
    public list: any[] = []; //原始数据项
    public sourceList: any[] = [];	//临时数据项-可选项
    public targetList: any = [];	//临时数据项-已选项
    public disableRight: any = true; //单个右移控制按钮可选状态 true 禁止选择  false可选择
    public disabledLeft: any = true; //单个左移控制按钮可选状态 true 禁止选择  false可选择
    public disableUp: any = true;  //上移控制按钮可选状态 true 禁止选择  false可选择
    public disableDown: any = true; //下移控制按钮可选状态 true 禁止选择  false可选择
    public disabledUpTop: any = true; //置顶控制按钮可选状态 true 禁止选择  false可选择
    public disabledDownBtm: any = true; //最低控制按钮可选状态 true 禁止选择  false可选择
    public selectedType: any = ''; //当前选中项所在项目  1在可选项  2在已选项框
    public moveIndex: any = 'false';
    public search: any = {
        page_index: '1',
        page_size: '10',
        role_name: '',
    }
    public defaultCols: any = [];	//默认的全部列
    public colsData: any = '';
    isLoadingSave: any = false;
    statusParamsData: any = {	//获取接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
        status: 1,
    }
    constructor(
        private http: HttpClientService,
        private message: NzMessageService,
    ) { }

    ngOnInit() {
        // 页面监听 动态改变表单高度
        $('#main-box-setting').css('height', (document.documentElement.clientHeight - 106 + 'px'));
        $(window).resize(function () {
            $('#main-box-setting').css('height', (document.documentElement.clientHeight - 106 + 'px'));
        })
        //this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ] 
        this.defaultCols = [
            { "COL_CODE": "ACFT", "COL_CN": "机型", "COL_ORDER": "1", "COL_WIDTH": "85px" },
            { "COL_CODE": "GCTM", "COL_CN": "登机结束", "COL_ORDER": "2", "COL_WIDTH": "85px" },
            { "COL_CODE": "BOTM", "COL_CN": "登机开始", "COL_ORDER": "3", "COL_WIDTH": "85px" },
            { "COL_CODE": "ABDG", "COL_CN": "登机桥", "COL_ORDER": "4", "COL_WIDTH": "120px" },
            { "COL_CODE": "AOTM_D", "COL_CN": "撤桥时间", "COL_ORDER": "5", "COL_WIDTH": "85px" },
            { "COL_CODE": "AOTM_A", "COL_CN": "靠桥时间", "COL_ORDER": "6", "COL_WIDTH": "85px" },
            { "COL_CODE": "BELT", "COL_CN": "转盘号", "COL_ORDER": "7", "COL_WIDTH": "120px" },
            { "COL_CODE": "CHKC", "COL_CN": "值机柜台", "COL_ORDER": "8", "COL_WIDTH": "120px" },
            { "COL_CODE": "CCTM", "COL_CN": "值机结束", "COL_ORDER": "9", "COL_WIDTH": "85px" },
            { "COL_CODE": "COTM", "COL_CN": "值机开始", "COL_ORDER": "10", "COL_WIDTH": "85px" },
            { "COL_CODE": "CHTM_OFF", "COL_CN": "下轮挡", "COL_ORDER": "11", "COL_WIDTH": "85px" },
            { "COL_CODE": "CHTM_ON", "COL_CN": "上轮挡", "COL_ORDER": "12", "COL_WIDTH": "85px" },
            { "COL_CODE": "LACL", "COL_CN": "最后通知时间", "COL_ORDER": "13", "COL_WIDTH": "120px" },
            { "COL_CODE": "CHUT", "COL_CN": "行李传送带", "COL_ORDER": "14", "COL_WIDTH": "120px" },
            { "COL_CODE": "RENO", "COL_CN": "飞机号", "COL_ORDER": "15", "COL_WIDTH": "120px" },
            { "COL_CODE": "ALCD", "COL_CN": "航空公司", "COL_ORDER": "16", "COL_WIDTH": "185px" },
            { "COL_CODE": "ACTT", "COL_CN": "实际到达／出发", "COL_ORDER": "17", "COL_WIDTH": "120px" },
            { "COL_CODE": "PSST", "COL_CN": "计划机位", "COL_ORDER": "18", "COL_WIDTH": "120px" },
            { "COL_CODE": "ESTT", "COL_CN": "预计到达／出发	", "COL_ORDER": "19", "COL_WIDTH": "120px" },
            { "COL_CODE": "MVIN", "COL_CN": "到达/出发", "COL_ORDER": "20", "COL_WIDTH": "85px" },
            { "COL_CODE": "ERUT", "COL_CN": "航线", "COL_ORDER": "21", "COL_WIDTH": "245px" },
            { "COL_CODE": "FLNO", "COL_CN": "航班号", "COL_ORDER": "22", "COL_WIDTH": "140px" },
            { "COL_CODE": "FTSS", "COL_CN": "运营状态", "COL_ORDER": "23", "COL_WIDTH": "120px" },
            { "COL_CODE": "FLIN", "COL_CN": "航线类别", "COL_ORDER": "24", "COL_WIDTH": "120px" },
            { "COL_CODE": "SODT", "COL_CN": "计划到达／出发", "COL_ORDER": "25", "COL_WIDTH": "120px" },
            { "COL_CODE": "TRML", "COL_CN": "航站楼", "COL_ORDER": "26", "COL_WIDTH": "120px" },
            { "COL_CODE": "FLTY", "COL_CN": "航班类别", "COL_ORDER": "27", "COL_WIDTH": "120px" },
            { "COL_CODE": "GTDT", "COL_CN": "登机门号	", "COL_ORDER": "28", "COL_WIDTH": "120px" },
            { "COL_CODE": "PADT", "COL_CN": "前站起飞时间", "COL_ORDER": "29", "COL_WIDTH": "85px" },
            { "COL_CODE": "CSFT", "COL_CN": "共享航班号", "COL_ORDER": "30", "COL_WIDTH": "85px" },
            { "COL_CODE": "STND", "COL_CN": "当前机位", "COL_ORDER": "31", "COL_WIDTH": "85px" },
            { "COL_CODE": "FLDT", "COL_CN": "航班日期", "COL_ORDER": "32", "COL_WIDTH": "85px" },
            { "COL_CODE": "ARSF", "COL_CN": "到港共享航班", "COL_ORDER": "33", "COL_WIDTH": "120px" },
            { "COL_CODE": "DESF", "COL_CN": "离港共享航班", "COL_ORDER": "34", "COL_WIDTH": "120px" },
        ]
		/*
		备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
		这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
		*/

        this.queryTable();
    }
    //对象数组深度复制
    deepCopy(data) {
        let itemObj = {};
        for (let key in data) {
            itemObj[key] = data[key];
        }
        return itemObj;
    }
    //数组深度复制构造
    listsCope(sourceList, targetList) {
        sourceList.forEach(item => {
            let option = this.deepCopy(item);
            targetList.push(option);
        })
    }
    //上下调整项目顺序  type 1上移  2下移  3置顶  4置底 要做头尾判断
    moveUpDown(type) {
        let index = this.moveIndex;
        if (type == 1) {
            this.targetList[index] = this.targetList.splice(index - 1, 1, this.targetList[index])[0];
            this.moveIndex--;
        } else if (type == 2) {
            this.targetList[index] = this.targetList.splice(index + 1, 1, this.targetList[index])[0];
            this.moveIndex++;
        } else if (type == 3) {
            let item = this.targetList[index];
            this.targetList.splice(index, 1)
            this.targetList.unshift(item);
            this.moveIndex = 0;
        } else if (type == 4) {
            this.targetList.push(this.targetList[index]);
            this.targetList.splice(index, 1);
            this.moveIndex = this.targetList.length - 1;
        }
        this.btnStatusContrl();

    }
    //左右选择项目 type 1右移 2左移 3全部右移  4全部左移
    moveCross(type) {
        let index = this.moveIndex;
        if (type == 1) {
            let item = this.sourceList[index];
            this.sourceList.splice(index, 1)
            this.targetList.push(item);
            if (this.sourceList.length == 0) {
                this.disableRight = true;
            }
        } else if (type == 2) {
            let item = this.targetList[index];
            this.targetList.splice(index, 1)
            this.sourceList.push(item);
            if (this.targetList.length == 0) {
                this.disabledLeft = true;
            }
        } else if (type == 3) {
            this.sourceList.forEach(item => {
                this.targetList.push(item)
            })
            this.sourceList = [];
        } else if (type == 4) {
            this.targetList.forEach(item => {
                this.sourceList.push(item)
            })
            this.targetList = [];
        }
        this.moveIndex = 'false';
        this.selectedType = '';
        this.disabledLeft = true;
        this.disableRight = true;
        this.sortBtnDisabled();
    }
    //选中选框中的项 type 1可选框的项  2已选框的项
    selectNode(item, index, type) {
        this.selectedType = type;
        this.moveIndex = index;
        if (type == 1) {
            this.disabledLeft = true;
            this.disableRight = false;
            this.sortBtnDisabled();
        } else if (type == 2) {
            this.disableRight = true;
            this.disabledLeft = false;
            this.btnStatusContrl();
        }

    }
    //右侧上下移懂按钮禁用状态控制
    btnStatusContrl() {
        let len = this.targetList.length;
        if (len < 2) {
            this.disabledUpTop = true;
            this.disableDown = true;
        }
        if (this.moveIndex == 0) {
            this.disabledUpTop = true;
            this.disableUp = true;
        } else {
            this.disabledUpTop = false
            this.disableUp = false;
        }
        if (this.moveIndex == len - 1) {
            this.disabledDownBtm = true;
            this.disableDown = true;
        } else {
            this.disabledDownBtm = false;
            this.disableDown = false;
        }
    }
    //排序按钮状态统一控制
    sortBtnDisabled() {
        this.disableDown = true;
        this.disableUp = true;
        this.disabledDownBtm = true;
        this.disabledUpTop = true;

    }
    //保存-自定义列显示保存
	/*
	各模块groupCode命名定义
	groupCode:'userSettingColor',
	groupCode:'userSettingCol',
	groupCode:'userSettingMsgAlert',
	groupCode:'userSettingMsgVoice',
	groupCode:'userSettingFlyAgency',
	 */
    saveSelf() {
        this.sourceList.forEach((item, index) => {
            item.COL_ORDER = index + 1
        })
        this.targetList.forEach((item, index) => {
            item.COL_ORDER = index + 1
        })
        let content = {
            defaultData: this.defaultCols,
            sourceList: this.sourceList,
            targetList: this.targetList,
        }
        let settingContent = JSON.stringify(content);
        let params: any = {
            envCode: 'web',
            groupCode: 'userSettingCol',
            settingContent: settingContent,
        }
        this.isLoadingSave = true;
        this.http.post('/adminapi/settings/uisettings', params).subscribe((json) => {
            this.isLoadingSave = false;
            if (json.is_success) {
                this.message.success(`保存成功!`);
                this.queryTable();
            } else {
                this.message.error(`保存失败!`);
            }
        })
    }
    //重置数据	
    cancelSelf() {
        this.queryTable();
    }
    //获取列表
    queryTable(): void {
        this.statusParamsData.status = 1;
        this.list = [];
        this.sourceList = [];
        this.targetList = [];
        this.colsData = '';
        this.http.get('/adminapi/settings/uisettings', { groupCode: 'userSettingCol' }).subscribe((json) => {
            if (json.is_success) {
                this.statusParamsData.status = 3;
                let data = json.body;
                this.colsData = json.body;
                //当data为空是，初始化
                this.listsCope(this.defaultCols, this.list);
                //判断data是否为空，空的时候则为最初的初始化；如果不为空，则有设置过个人设置的某个模块
                if (data && data.length > 0) {
                    data.forEach(item => {
                        if (item.settingContent) {
                            let content = JSON.parse(item.settingContent);
                            this.listsCope(content.sourceList, this.sourceList);
                            this.listsCope(content.targetList, this.targetList);
                        } else {
                            this.listsCope(this.list, this.sourceList);
                        }
                    })
                } else {
                    //接口数据为空，说明各个模块设置都为未初始化,可选项则为默认全部列
                    this.listsCope(this.list, this.sourceList);
                }
            } else {
                this.statusParamsData.status = 0;
            }
        })
    }
}