"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'
class inputSegmentedProgressBar extends base{
    constructor(data) {
        super(data);
        this.type='segmentedProgressBar';
    }
    render(parentObjID){
        let that=this;
        that.initFunc();
        let data=that.data
        let dictDataArray=that.data.dict_code.data;
        if(util.isNull(dictDataArray)){
            dictDataArray=[];
        }
        for(let i=0;i<dictDataArray.length;i++){
            that.dictMap.set(dictDataArray[i].key.toString(),dictDataArray[i].value);
        }
        let labelName=data.label_name;
        let placeholder=data.placeholder;
        let defaultValue=data.default_value;
        let isReadOnly=data.is_read_only;
        let rows=data.rows;
        let canNull=data.can_null;
        that.initFormCol(that);
        const currentKey = '04';
        let barHtmlTemplate = that.getBarHtml(currentKey)
        let questionCircleHtml=that.getQuestionCircleIconHtml();
        let layoutType=util.isNull(data.field_layout_type)?'horizontal':data.field_layout_type
        let htmlTemplate=`
        <div class="form-group ${layoutType=='horizontal'?'row':''} col-sm-${data.col}" id="${that.objID}" style="display: none">
        <label class="col-form-label ${layoutType=='horizontal'?`col-sm-${that.labelCol}`:''} text-sm-right" style="line-height:25px;vertical-align: middle;">
        <font id="${that.objID}CanNull" style="font-size: ${layoutType=='horizontal'?'22px;vertical-align: middle;':'15px;'}${canNull!='Y'?'display:none;':''}" color="red">*</font>
        ${labelName}
        ${questionCircleHtml}
        </label>
        <div class="${layoutType=='horizontal'?`col-sm-${that.inputCol}`:''}">
        <textarea id="${that.eleID}" rows="${rows}" ${isReadOnly=='Y'?'readonly=readonly':''}  name="${data.name}" class="form-control d-none" placeholder="${placeholder}">
        ${!util.isNull(defaultValue)?defaultValue:''}
        </textarea>
        <div class="segmentedProgressBar row ">
        ${barHtmlTemplate}
        </div>
        <small class="form-text text-muted"><font style="display:none;"  validate="validate"  color="red">12412345123</font></small>
        </div>
        </div>
        `;
        document.getElementById(parentObjID).insertAdjacentHTML("beforeEnd",htmlTemplate);
        if(!util.isNull(defaultValue)){
            document.getElementById(that.getEleID()).value=util.toOldChar(defaultValue);
        }
        that.bindFunc();
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    getBarHtml(currentKey){
        let that=this;
        let dict=that.data.dict_code.data;
        let barHtmlTemplate = '';

        // 找到当前阶段在数组中的索引
        const currentIndex = dict.findIndex(step => step.key === currentKey);

        dict.forEach((step, index) => {
            if(index < currentIndex){
                // 已完成
                barHtmlTemplate += `
        <li class="progress-item">
          <div class="progress-box completed">${step.value}</div>
        </li>`;
            } else if(index === currentIndex){
                // 当前进度
                barHtmlTemplate += `
        <li class="progress-item current">
          <div class="progress-box completed">${step.value}</div>
          <div class="current-arrow"></div>
          <div class="current-text">当前进度</div>
        </li>`;
            } else {
                // 未完成
                barHtmlTemplate += `
        <li class="progress-item">
          <div class="progress-box uncompleted">${step.value}</div>
        </li>`;
            }
        });
        return `<ul class="progress-container">${barHtmlTemplate}</ul>`;
    }
    initFunc(){
        let that=this;
        that.bindValueValidate= ()=>{
            that.validateFunc= ()=>{
                that.validate();
            }
            util.addEventListener(that.eleID,'input',that.validateFunc)//实时校验
            util.addEventListener(that.eleID,'blur',that.validateFunc)//失去焦点校验（用户可能点击了输入框不填写内容就不会触发上面的事件）
        }
    }
    setValue(value) {
        let that=this;
        let barHtml=that.getBarHtml(value)
        document.getElementById(that.objID).querySelector('.segmentedProgressBar').innerHTML=barHtml;
    }

    bindFunc(){
        let that=this;
        that.bindValueValidate();
    }
}
export {inputSegmentedProgressBar}