"use strict";
import { util } from "../../util/util.js";
import {fullMap} from "../../fullMap.js";
import {khcToastr} from "./khcToastr.js";
class khcModalSlide {
    //右侧模态框
    constructor(data) {
        this.eleID = util.getUUID();//table的domid
        this.modalArea=data.modalAreaID;
        this.objID = this.eleID + 'div';//本组件的根Div的domid
        this.isDestroy= false;//isDestroy 是否remove
        this.formObjID=null;
        this.modalHideType=null;
        this.isShowModal=true;//如果禁用模态框区域外关闭时此字段才会生效（用于标识关闭来源）
        this.minWindowWidthL2=1250;//最小模屏幕宽度L2，小于该值则100%渲染模态框
        this.minWindowWidthL1=900;//最小模屏幕宽度L2，小于该值则100%渲染模态框
        //document.getElementById(this.modalArea).innerHTML='';
    }
    render() {
        let that=this;
        return new Promise((resolve, reject) => {
            let renderDiv=document.getElementById(that.objID);
            if(renderDiv==undefined||renderDiv==null){
                let htmlTemplate=`
            <div class="modal modal-slide fade" id="${that.objID}" style="display: none;" aria-hidden="true">
            <div id="${that.objID}modalDialog" class="modal-dialog modal-lg" style="">
            <form class="modal-content" style="padding-bottom: 0.127rem;">
            <div class="row">
                    <span id="${that.objID}_left" type="button" class="close" style="display: block;left: 25px;right: auto;font-size: 20px;margin-top: 6px;" title="左边展示">
                    <i class="fas fa-arrow-left d-block"></i>
                    </span>
                    <span id="${that.objID}_right" type="button" class="close" style="display: none;left: 25px;right: auto;font-size: 20px;margin-top: 6px;" title="右边展示">
                    <i class="fas fa-arrow-right d-block"></i>
                    </span>
                    <span id="${that.objID}_slide_modal_100" type="button" class="close" style="left: 55px;right: auto;font-size: 20px;margin-top: 6px;" title="模态框100%">
                    <i class="fas fa-expand d-block"></i>
                    </span>
                    <span id="${that.objID}_slide_modal_50" type="button" class="close" style="left: 55px;right: auto;font-size: 20px;margin-top: 6px;" title="模态框50%">
                    <i class="fas fa-compress d-block"></i>
                    </span>
                    <span id="${that.objID}_hide" type="button" class="close" style="left: 85px;right: auto;font-size: 20px;margin-top: 6px;" title="关闭">
                    <i class="far fa-times-circle d-block"></i>
                    </span>
                   <!-- <span type="button" class="close" style="font-size: 20px;margin-top: 6px;" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times d-block"></i>
                    </span>-->
                    </div>
            <div id="${that.eleID}" style="overflow: auto;min-height: 90%">
            </div>
            <div id="${that.eleID}_footer" class="card" style="display: none;"></div>
            </form></div></div>`;
                document.getElementById(that.modalArea).insertAdjacentHTML('beforeEnd', htmlTemplate);
            }
            let slideLeftButton = document.getElementById(that.objID+'_left');
            let slideRightButton = document.getElementById(that.objID+'_right');
            let slideModal100Button = document.getElementById(that.objID+'_slide_modal_100');
            let slideModal50Button = document.getElementById(that.objID+'_slide_modal_50');
            let slideHideButton = document.getElementById(that.objID+'_hide');
            let slideModalDialogDiv = document.getElementById(that.objID+'modalDialog');
            util.addEventListener(slideLeftButton,'click',function (){
                that.modalShowLR='right'
                slideModalDialogDiv.style.right = 'auto';
                slideLeftButton.style.display = 'none';
                slideRightButton.style.display = 'block';
            })
            util.addEventListener(slideRightButton,'click',function (){
                that.modalShowLR='left'
                slideModalDialogDiv.style.right = '';
                slideLeftButton.style.display = 'block';
                slideRightButton.style.display = 'none';
            })
            util.addEventListener(slideModal100Button,'click',function (){
                util.setLocalStorageItem('khcModalSlideWidth','100')
                that.setModalSlideWidth()
                slideModal100Button.style.display='none'
                slideModal50Button.style.display=''
            })
            util.addEventListener(slideModal50Button,'click',function (){
                if(window.innerWidth<that.minWindowWidthL1){
                    khcToastr.showWarningMessage('当前窗口较小！')
                    return ;
                }
                util.setLocalStorageItem('khcModalSlideWidth','50')
                that.setModalSlideWidth()
                slideModal100Button.style.display=''
                slideModal50Button.style.display='none'
            })
            if(that.modalHideType=='2'){
                slideHideButton.style.display='none';
            }else{
                util.addEventListener(slideHideButton,'click',function (){
                    that.hide();
                })
            }
            resolve();
        })
    }

    /**
     * modal_hide_type ==1 不禁用 模态框外点击会处发关闭模态框
     * modal_hide_type ==2 禁用 模态框外点击会处发关闭模态框
     */
    show(){
        let that=this;
        window.addEventListener('resize',()=>{
            let cacheWidth=util.getLocalStorageItem('khcModalSlideWidth')
            if(cacheWidth==100){
                document.getElementById(that.objID+'modalDialog').style.width='100%';
            }else if(window.innerWidth<that.minWindowWidthL1&&cacheWidth){//屏幕宽度小于指定宽度L1 则100%
                document.getElementById(that.objID+'modalDialog').style.width='100%';
            }else{//屏幕宽度大于指定宽度则按配置渲染
                that.setModalSlideWidth();
            }
        })
        that.setModalSlideWidth();
        $('#'+that.objID).modal('show');
        if(that.formObjID!=null){
            that.modalHideType=fullMap.getObj(that.formObjID).formStructureData.formInfo.modal_hide_type;
            if(that.modalHideType=='2'){
                $('#'+that.objID).data('bs.modal')._config.backdrop = 'static';//禁用模态框外的关闭，只能点返回按钮关闭模态框
            }
            let modalObj=$('#'+that.objID).data('bs.modal');
            $(modalObj._element).on('click.dismiss.bs.modal', (event) => {
                //官方的解释是：避免事件冒泡触发此函数(这里由于是包含关系，所以必须避免这种情况)
                if (event.target !== event.currentTarget) {
                    return
                }
                if(that.hideAfterFunc!=undefined){
                    that.hideAfterFunc();
                }
                if(that.modalHideType=='2'&&that.isShowModal){
                    khcToastr.showErrorMessage('该表单只能通过返回按钮关闭')
                }else{
                    if(that.parentModal!=null&&that.parentModal!=undefined){
                        $('#'+that.parentModal.objID).modal('show');
                    }
                }
            })
        }
        if(that.showAfterFunc!=undefined){
            that.showAfterFunc()
        }
    }
    hide(){
        let that=this;
        if(that.modalHideType=='2'){
            that.isShowModal=false;//标识关闭来源是通过返回按钮来的
        }
        if(that.hideBeforeFunc!=undefined){
            if(!that.hideBeforeFunc()){
                return ;
            }
        }
        if(that.isDestroy){
            document.getElementById(that.objID).remove();
        }
        if(that.parentModal!=null&&that.parentModal!=undefined){
            that.parentModal.show();
            setTimeout(function (){
                $('#'+that.objID).modal('hide');
            },200)
        }else{
            $('#'+that.objID).modal('hide');
        }
        if(that.hideAfterFunc!=undefined){
            that.hideAfterFunc();
        }
    }
    getEleID(){
        return this.eleID;
    }
    getModalSlideWidth(){
        let that=this;
        let cacheWidth=util.getLocalStorageItem('khcModalSlideWidth')
        if(cacheWidth=='100'){
            return  '100%'
        }
        let width='';
        if(util.isNull(cacheWidth)||cacheWidth=='50'){
            util.setLocalStorageItem('khcModalSlideWidth','50')
            width='50%'
        }
        if(window.innerWidth<that.minWindowWidthL1&&cacheWidth){//屏幕宽度小于指定宽度L1 则100%
            width='100%';
        }
        return width;
    }
    setModalSlideWidth(){
        let that=this;
        that.width=that.getModalSlideWidth()
        let slideLeftButton = document.getElementById(that.objID+'_left');
        let slideRightButton = document.getElementById(that.objID+'_right');
        let slideModal100Button = document.getElementById(that.objID+'_slide_modal_100');
        let slideModal50Button = document.getElementById(that.objID+'_slide_modal_50');
        let slideModalDialogDiv = document.getElementById(that.objID+'modalDialog');
        if(that.width=='100%'){
            slideLeftButton.style.display='none'
            slideRightButton.style.display='none'
            slideModal100Button.style.display='none'
            slideModal50Button.style.display=''
        }else{
            if(that.modalShowLR=='right'){
                slideRightButton.style.display=''
                slideModalDialogDiv.style.right = 'auto';
                slideLeftButton.style.display = 'none';
            }else{
                slideLeftButton.style.display=''
            }
            slideModal100Button.style.display=''
            slideModal50Button.style.display='none'
        }
        document.getElementById(that.objID+'modalDialog').style.width=that.width;
    }
   
}
export { khcModalSlide }
