"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'
class inputJson extends base{
    constructor(data) {
        super(data);
        this.type='json';
    }
    render(parentObjID){
        let that=this;
        that.initFunc();
        let data=that.data
        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);
        let layoutType=util.isNull(data.field_layout_type)?'horizontal':data.field_layout_type
        let questionCircleHtml=that.getQuestionCircleIconHtml();
        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}`:''}">
            <div class="row">
                <div class="col-6">
                    <textarea id="${that.eleID}" rows="${rows}" ${isReadOnly=='Y'?'readonly=readonly':''}  name="${data.name}" class="form-control" placeholder="${placeholder}">
                    ${!util.isNull(defaultValue)?defaultValue:''}
                    </textarea>
                </div>
                <div class="col-6" style="border: 1px solid rgba(24, 28, 33, 0.1);">
                    <div id="${that.eleID}_show_json_div"></div>
                </div>
            </div>
            <div id="${that.eleID}" name="${data.name}" style="overflow: auto">
            
            </div>
        </div>
        </div>
        `;
        document.getElementById(parentObjID).insertAdjacentHTML("beforeEnd",htmlTemplate);
        that.bindFunc();
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    initFunc(){
        let that=this;
    }
    setValue(value) {
        let that=this;
        document.getElementById(that.eleID).value = value;
        if(!util.isNull(value))that.renderJsonView();
    }
    /*getValue() {//获取存储到数据库的值
        if(this.isValue){
            return document.getElementById(this.eleID+'_value').value;
        }
    }*/

    bindFunc(){
        let that=this;
        that.bindValueValidate();
        that.renderJsonView=()=>{
            let textareaValue=document.getElementById(`${that.eleID}`).value;
            let template=`<pretty-json expand="2">${textareaValue}</pretty-json>`;
            try {
                JSON.parse(textareaValue)
                document.getElementById(`${that.eleID}_show_json_div`).innerHTML=template;
            } catch (jsonParseError) {
                const message = `Error parsing JSON: ${jsonParseError instanceof Error ? jsonParseError.message : "Unknown error"}`;
                document.getElementById(`${that.eleID}_show_json_div`).innerHTML=`<span style="color: #f1592a;font-weight:bold;">${message}</span>`;
            }
        }
        document.getElementById(`${that.eleID}`).addEventListener('input',async ()=>{
            that.renderJsonView();
        })
    }
}
export {inputJson}