"use strict";

import {base} from "./base.js";
import {util} from "../../../../../util/util.js";
import {khcAlert} from "../../../../../component/alert/khcAlert.js";

class buildTextarea extends base {
    constructor(data) {
        super(data);
        this.type='textarea'
    }
    render() {
        let that=this;
        that.remove();
        that.writeBefore(that.data['parentDomId']);
    }
    reRender(){
        let that=this;
        // 获取目标元素，通过 objID 定位
        let targetElement = document.getElementById(that.objID);
        // 重新渲染新的 HTML 内容
        targetElement.innerHTML = that.getContentHtml();
        that.initEvent();
    }
    writeBefore(parentDomId) {
        let that=this;
        let html=`
            <div class="col-${that.data.inputData.col}" style="border:0" id="${that.objID}">
                ${that.getContentHtml()}
            </div>`
        $('#'+parentDomId).append(html);
        that.initEvent();
    }
    getContentHtml(){
        let that=this;
        let mangerHtml=``
        for(let i=0;i<that.data.listManager.length;i++){
            mangerHtml+=`
                <span title="${that.data.listManager[i].title}" area="${that.data.listManager[i].areaName}" class="footer-link pt-10 ml-1 mr-2" style="cursor:pointer">
                    <i class="${that.data.listManager[i].iconClass}" style="${that.data.listManager[i].iconCss}"></i>
                </span>`
        }
        let labelNameHtml=``;
        if(!util.isNull(that.data.inputData.can_null)&&that.data.inputData.can_null=='Y'){
            labelNameHtml=`<font style="font-size: 22px;vertical-align: middle;" color="red">*</font>${that.data.inputData.label_name}`
        }else{
            labelNameHtml=`<font style="font-size: 22px;vertical-align: middle; display:none;" color="red">*</font>${that.data.inputData.label_name}`
        }
        let html=`
        <div class="card-body" style="padding:0.5rem" area="hoverbody">
            <div class="${that.data.inputData.field_layout_type=='horizontal'?'row':'form-group'}" style="margin-bottom: 0.01rem;" name="layout_div">
                <div area="manageDiv" style="position: absolute;top: -18px;right: 20px;z-index: 10;display: none">
                   ${mangerHtml}
                </div>
                <label name="layout_label" class="col-form-label ${that.data.inputData.field_layout_type=='horizontal'?'col-sm-3':''} text-sm-right" style="line-height:25px;vertical-align: middle;">
                    ${labelNameHtml}
                </label>
                <div name="layout_input_div" class="${that.data.inputData.field_layout_type=='horizontal'?'col-sm-9':''}">
                    <div class="input-group-append">
                        <textarea type="text" id="" value="" name="" class="form-control" placeholder="${that.data.inputData.placeholder}" 
                        ${that.data.inputData.is_read_only == 'Y'?`readonly="readonly"`:``}>${that.data.inputData.default_value}</textarea>
                    </div>
                    <small class="form-text text-muted"><font style="display:none" validate="validate" color="red">12412345123</font></small>
                </div>
            </div>
        </div>
`
        return html;
    }
    initEvent() {
        let that=this;
        $('#' + that.objID).find('textarea').on('input propertychange',function() {
            that.data.inputData.default_value=$(this).val()
            that.data.parentObj.data.componentFieldListObj.setInputComponent(that)
            //$('#' + that.objID).find('[area=showMaxLength]').text("您还可以填写"+(text.data.maxLength-$(this).val().length)+"个字")
        });

        $('#' + that.objID).find('[area=copy]').unbind("click").click(function () {
            that.data.parentObj[that.data.funcName]();
        });

        $('#' + that.objID).find('[area=remove]').unbind("click").click(function () {
            let alertData = {};
            alertData.title = `确定要删除吗`;
            alertData.preConfirm= async () => {
                return new Promise((resolve, reject) => {
                    setTimeout(function (){
                        that.remove();
                        resolve(true);
                        that.data.parentObj.removeFormSort(that);
                        that.data.parentObj.data.componentFieldListObj.setInputComponent();
                        that.data.parentObj.data.componentFieldListObj.hideDiv();
                        //refreshSort();
                        //message.showSuccessMessage('删除成功')
                    },700)
                })
            }
            khcAlert.showConfirm(alertData, () => {})
        });

        $('#' + that.objID).click(function (){
            that.data.parentObj.data.componentFieldListObj.setInputComponent(that);
            that.data.parentObj.data.componentFieldListObj.showDiv();
        })

        $('#' + that.objID).hover(function(){
            $('#' + that.objID).find('[area=hoverbody]').css("background-color", "#eeeeee");
            $('#' + that.objID).find('[area=manageDiv]').css('display','block')
            $('#' + that.objID).find('[area=bodyShowDiv]').find("input:text").css("background-color", "#eeeeee");
        },function(){
            $('#' + that.objID).find('[area=hoverbody]').css("background-color", "white");
            $('#' + that.objID).find('[area=manageDiv]').css('display','none')
            $('#' + that.objID).find('[area=bodyShowDiv]').find("input:text").css("background-color", "white");
        })
    }
    updateView(){
        let that=this;
        if(that.type!=that.data.inputData.show_type){
            that.data.parentObj.toggleInputComponent(that.data.inputData.show_type,that)
            return ;
        }
        let labelNameHtml=``;
        if(!util.isNull(that.data.inputData.can_null)&&that.data.inputData.can_null=='Y'){
            labelNameHtml=`<font style="font-size: 22px;vertical-align: middle;" color="red">*</font>${that.data.inputData.label_name}`
        }else{
            labelNameHtml=`<font style="font-size: 22px;vertical-align: middle; display:none;" color="red">*</font>${that.data.inputData.label_name}`
        }
        if(!util.isNull(that.data.inputData.is_read_only)&&that.data.inputData.is_read_only=='Y'){
            document.getElementById(this.getObjID()).querySelector('textarea').readOnly="readonly";
        }else{
            document.getElementById(this.getObjID()).querySelector('textarea').readOnly="";
        }
        if(util.isNull(that.data.inputData.col)||that.data.inputData.col>12){
            that.data.inputData.col=12;
        }
        if(util.isNull(that.data.inputData.field_layout_type)){
            that.data.inputData.field_layout_type='horizontal';
        }
        if(that.data.inputData.field_layout_type=='horizontal'){
            document.getElementById(this.getObjID()).querySelector('[name="layout_div"]').className='row'
            document.getElementById(this.getObjID()).querySelector('[name="layout_label"]').classList.add('col-sm-3');
            document.getElementById(this.getObjID()).querySelector('[name="layout_input_div"]').classList.add('col-sm-9');
        }else{
            document.getElementById(this.getObjID()).querySelector('[name="layout_div"]').className='form-group'
            document.getElementById(this.getObjID()).querySelector('[name="layout_label"]').classList.remove('col-sm-3');
            document.getElementById(this.getObjID()).querySelector('[name="layout_input_div"]').classList.remove('col-sm-9');
        }
        document.getElementById(this.getObjID()).className="col-"+that.data.inputData.col
        document.getElementById(this.getObjID()).querySelector('[name="layout_label"]').innerHTML=labelNameHtml
        document.getElementById(this.getObjID()).querySelector('textarea').placeholder=that.data.inputData.placeholder
        document.getElementById(this.getObjID()).querySelector('textarea').value=that.data.inputData.default_value
        document.getElementById(this.getObjID()).querySelector('textarea').rows=that.data.inputData.rows
        document.getElementById(this.getObjID()).querySelector('textarea').style.height=''
    }
    updateFieldView(fieldObj){
        let that=this;
        let eleObj = document.getElementById(fieldObj.getObjID());
        eleObj.querySelector('[name="show_type"]').value=that.data.inputData.show_type;
        eleObj.querySelector('[name="name"]').value=that.data.inputData.name;
        eleObj.querySelector('[name="label_name"]').value=that.data.inputData.label_name;
        eleObj.querySelector('[name="placeholder"]').value=that.data.inputData.placeholder;
        eleObj.querySelector('[name="placeholder_div"]').style.display='';
        eleObj.querySelector('[name="default_value"]').value=that.data.inputData.default_value;
        eleObj.querySelector('[name="col"]').value=that.data.inputData.col;
        $('.bs-slider-variant_col').slider('setValue', that.data.inputData.col);
        eleObj.querySelector('[name="field_layout_type"]').value=that.data.inputData.field_layout_type;
        eleObj.querySelector('[name="rows"]').value=that.data.inputData.rows;
        eleObj.querySelector('[name="rows_div"]').style.display='';
        eleObj.querySelector('[name="dict_code_json_div"]').style.display='none';
        eleObj.querySelector('[name="switch_yes_key_div"]').style.display='none';
        eleObj.querySelector('[name="switch_no_key_div"]').style.display='none';
        let value='';
        if(that.data.inputData.can_null=='Y'){
            value=',on,'
        }
        let canNullObj = eleObj.querySelector('[name="can_null"]');
        if (value.indexOf(','+canNullObj.value+',')>=0) {
            canNullObj.checked = true;
        }else{
            canNullObj.checked = false;
        }
        value='';//重置
        if(that.data.inputData.is_read_only.length>0){
            value=',on,'
        }
        let isReadOnlyObj = eleObj.querySelector('[name="is_read_only"]');
        if (value.indexOf(','+isReadOnlyObj.value+',')>=0) {
            isReadOnlyObj.checked = true;
        }else{
            isReadOnlyObj.checked = false;
        }
    }
}
export { buildTextarea }