import { util } from '../../util/util.js'
import {verify} from '../../util/verify.js'
import {base} from "./base.js";
import {fullMap} from "../../fullMap.js";
class vTabs  extends base{

    constructor(data) {
        super(data);
        this.title = data.label_name;
        this.eleID=util.getUUID();
        this.objID=this.eleID+'div';
        this.isValue=false;
        this.type='tabs';
        this.isFirstTabs=false;//标识是否为第一个Tabs，用于初始化时，默认选中
    }
    getObjID(){
        return this.objID;
    }
    render(renderParentID) {
        let that=this;
        let formId=that.data.parentObjID;//一个form表单只能有一级tabs（页面选项卡），不支持选项卡里套选项卡，所以直接使用formId加后缀做为唯一标识
        let formObj=fullMap.getObj(formId);
        if(!formObj.isTabs){
            //第一次渲染页面选项卡
            let htmlTemplate=`
            <div class="row" style="margin-right: 0rem;">
            <div class="col-xl-12" style="padding-right: 0rem;">
            <div class="nav-tabs-top mb-4">
            <ul class="nav nav-tabs" id="${formId}_tabs_ul">
            <li class="nav-item" id="${that.objID}_tabs_li" style="display: none">
            <a class="nav-link active show" data-toggle="tab" href="#${that.objID}div" id="${that.objID}_tabs_link">${that.title}</a>
            </li>
            </ul>
            <div class="tab-content" id="${formId}_tabs_div">
            <div class="tab-pane fade active show" id="${that.objID}div" style="display: none">
            <div class="card-body pt-3">
            <div forrows style="margin-bottom: -0.5rem;" class="form-group row col-sm-12" id="${that.objID}"></div>
            </div></div></div></div></div></div>
            `;
            document.getElementById(renderParentID).insertAdjacentHTML("beforeEnd", htmlTemplate);
            formObj.isTabs=true;//标识是否渲染了isTabs（页面选项卡）
            that.isFirstTabs=true;//标识是否为第一个Tabs，用于初始化时，默认选中
        }else{
            //非第一次渲染页面选项卡只需在里面追加即可
            let tabsLiHtmlTemplate=`
            <li class="nav-item" id="${that.objID}_tabs_li" style="display: none">
            <a class="nav-link" data-toggle="tab" href="#${that.objID}div" id="${that.objID}_tabs_link">${that.title}</a>
            </li>`;
            document.getElementById(formId+'_tabs_ul').insertAdjacentHTML("beforeEnd", tabsLiHtmlTemplate);
            let tabsDivHtmlTemplate=`
            <div class="tab-pane fade" id="${that.objID}div">
            <div class="card-body pt-3">
            <div forrows style="margin-bottom: -0.5rem;" class="form-group row col-sm-12" id="${that.objID}"></div>
            </div></div>`;
            document.getElementById(formId+'_tabs_div').insertAdjacentHTML("beforeEnd", tabsDivHtmlTemplate);
        }
    }
    hide(){
        document.getElementById(this.objID+'div').setAttribute('style', 'display:none');//隐藏
        document.getElementById(this.objID+'_tabs_li').setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID+'div').setAttribute('style', '');//展示
        document.getElementById(this.objID+'_tabs_li').setAttribute('style', '');//展示
    }
    //取消选中状态
    activeHide(){
        document.getElementById(this.objID+'div').className='tab-pane fade';
        document.getElementById(this.objID+'_tabs_link').className='nav-link';
    }
    //设置当前为选中状态
    activeShow(){
        let formObj=fullMap.getObj(this.data.parentObjID);
        let eleMap=formObj.getFormMap();
        let name=this.data.name
        eleMap.forEach( (obj,key)=>{//遍历所有tabs改为非选中状态
            if(obj.type=='tabs'&&obj.data.name!=name){
                obj.activeHide();
            }
        })
        //为当前tabs添加选中样式
        document.getElementById(this.objID+'div').className='tab-pane fade active show';
        document.getElementById(this.objID+'_tabs_link').className='nav-link active show';
    }
    setDisabled(){

    }
    removeDisabled(){

    }
    getValue(){

    }
    setValue(){

    }
    hideDiv(){
        let eleObj = document.getElementById(this.getObjID());
        eleObj.style.display='none';
        let eleObjDiv = document.getElementById(this.getObjID()+'div');
        eleObjDiv.style.display='none';
    }
    showDiv(){
        let eleObj = document.getElementById(this.getObjID());
        eleObj.style.display='';
        let eleObjDiv = document.getElementById(this.getObjID()+'div');
        eleObjDiv.style.display='';
    }
    refreshCanNull(){

    }
    init(){
        let that=this;
        if(that.isFirstTabs){
            that.activeShow();//第一个tabs设置选中
        }else{
            that.activeHide();//非第一个则不选中
        }
    }
}
export { vTabs }