import { util } from '../../util/util.js'
import {verify} from '../../util/verify.js'
import {base} from "./base.js";
import {fullMap} from "../../fullMap.js";
class vCutSteps  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='cutSteps';
        this.isFirstCutSteps=false;//标识是否为第一个cutSteps，用于初始化时，默认选中
    }
    getObjID(){
        return this.objID;
    }
    render(renderParentID) {
        let that=this;
        let data=that.data
        if(data.kind==undefined||data.kind=='default'){
            that.renderDefault(renderParentID);
        }
        if(data.kind=='custom'){
        }
    }
    renderDefault(renderParentID) {
        let that=this;
        let formId=that.data.parentObjID;//一个form表单只能有一级cutSteps（引导步骤），不支持选项卡里套选项卡，所以直接使用formId加后缀做为唯一标识
        let formObj=fullMap.getObj(formId);
        if(!formObj.isCutSteps){
            //第一次渲染引导步骤
            let htmlTemplate=`
          <div class="card-body">
            <div action="javascript:void(0)" id="${formId}_cut_steps">
              <ul class="card px-4 pt-3 mb-3" id="${formId}_cut_steps_ul">
                <li id="${that.objID}_cut_steps_li">
                  <a href="#${that.objID}div" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">1</span>
                    <div class="text-muted small">${that.title}</div>
                  </a>
                </li>
              </ul>
              <div class="mb-3" style="min-height: 400px;" style="display: block;" id="${formId}_cut_steps_div">
                <div id="${that.objID}div" class="card animated fadeIn">
                  <div id="${that.objID}" class="pt-3"></div>
                </div>
              </div>
            </div>
          </div>
            `;
            document.getElementById(renderParentID).insertAdjacentHTML("beforeEnd", htmlTemplate);
            formObj.isCutSteps=true;//标识是否渲染了isCutSteps（引导步骤）
            formObj.firstCutStepsUUID=`${that.objID}div`;
            that.isFirstCutSteps=true;//标识是否为第一个isCutSteps，用于初始化时，默认选中
        }else{
            //非第一次渲染页面选项卡只需在里面追加即可
            let cutStepsLiHtmlTemplate=`
                <li id="${that.objID}_cut_steps_li">
                  <a href="#${that.objID}div" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">${formObj.cutStepsMap.size+1}</span>
                    <div class="text-muted small">${that.title}</div>
                  </a>
                </li>`;
            document.getElementById(formId+'_cut_steps_ul').insertAdjacentHTML("beforeEnd", cutStepsLiHtmlTemplate);
            let cutStepsDivHtmlTemplate=`
                <div id="${that.objID}div" class="card animated fadeIn">
                  <div id="${that.objID}" class="pt-3"></div>
                </div>`;
            document.getElementById(formId+'_cut_steps_div').insertAdjacentHTML("beforeEnd", cutStepsDivHtmlTemplate);
        }
    }
    hide(){
    }
    show(){
    }
    //取消选中状态
    activeHide(){
        let activeObj=document.getElementById(this.objID+'div');
        if(activeObj!=null){
            activeObj.setAttribute('style', '');//隐藏
        }
    }
    //设置当前为选中状态
    activeShow(){
        let activeObj=document.getElementById(this.objID+'div');
        if(activeObj!=null){
            activeObj.setAttribute('style', 'display:block');//展示
        }
    }
    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.isFirstCutSteps){
            // 重置步骤
            let formId=that.data.parentObjID;
            let $form = $('#'+formId+'_cut_steps');
            $form.smartWizard('reset');
            that.activeShow();//第一个cutSteps设置显示
        }else{
            that.activeHide();//非第一个则显示
        }
    }
}
export { vCutSteps }