"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'
import {verify} from '../../util/verify.js'


class inputDate extends base {
    constructor(data) {
        super(data);
        this.type='date';
    }
    render(parentObjID){
        this.initFunc()
        let that=this;
        let defaultValue=that.data.default_value;
        this.parentObjID=parentObjID;
        this.renderDetail().then(()=>{
            if(that.data.query_type=='1'){//query组件会进行此判断
                $('#start_'+that.eleID).datepicker({
                    format: 'yyyy-mm-dd',
                    weekStart: 1,
                    autoclose: true,
                    todayBtn: 'linked',
                    language: 'cn',
                });
                $('#end_'+that.eleID).datepicker({
                    format: 'yyyy-mm-dd',
                    weekStart: 1,
                    autoclose: true,
                    todayBtn: 'linked',
                    language: 'cn',
                });
                if(!util.isNull(defaultValue)){
                    let values = defaultValue.split(',')
                    document.getElementById('start_'+that.getEleID()).value=values[0];
                    document.getElementById('end_'+that.getEleID()).value=values[1];
                }
            }else{
                $('#'+that.eleID).datepicker({
                    format: 'yyyy-mm-dd',
                    weekStart: 1,
                    autoclose: true,
                    todayBtn: 'linked',
                    language: 'cn',
                });
                if(!util.isNull(defaultValue)){
                    document.getElementById(that.getEleID()).value=defaultValue;
                }
            }
        })
    }
    renderDetail() {
        return new Promise((resolve,reject)=>{
            let that=this;
            let parentObjID=that.parentObjID
            let data = that.data
            let labelName = data.label_name;
            let eleName=that.data.name;
            let placeholder=data.placeholder;
            let canNull=data.can_null;
            let isReadOnly=data.is_read_only;
            let queryType=data.query_type;//查询组件属性
            that.initFormCol(that);
            let readonlyHtml='';
            if (isReadOnly == 'Y') {
                readonlyHtml += ' readonly="readonly" ';
            }
            let dateHtmlTemplate=``;
            if(queryType=='1') {
                dateHtmlTemplate=`
                <div class="input-daterange input-group" id="datepicker-range">
                <input id="start_${that.eleID}" type="text" class="form-control" ${readonlyHtml} name="start_${eleName}">
                <div class="input-group-prepend"><span class="input-group-text">至</span></div>
                <input id="end_${that.eleID}" type="text" class="form-control" ${readonlyHtml} name="end_${eleName}">
                </div>`;
            }else{
                dateHtmlTemplate=`<input type="text" id="${that.eleID}" name="${eleName}" class="form-control khc-theme-input-color" ${readonlyHtml} placeholder="${placeholder}">`;
            }
            let questionCircleHtml=that.getQuestionCircleIconHtml();
            let layoutType=util.isNull(data.field_layout_type)?'horizontal':data.field_layout_type
            let htmlTemplate=``;
            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="${layoutType=='horizontal'?`line-height:25px;`:'line-height:16px;padding-top: 0px;'} vertical-align: middle;">
            <font id="${that.objID}CanNull" style="font-size: 22px;vertical-align: middle;${canNull!='Y'?'display:none;':''}" color="red">*</font>
            ${labelName}
            ${questionCircleHtml}
            </label>
            <div class="${layoutType=='horizontal'?`col-sm-${that.inputCol}`:''}">
            ${dateHtmlTemplate}
            <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);
            that.bindFunc();//绑定校验函数
            resolve();
    })
        
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    getValue() {
        let that=this;
        let data=that.data
        if(data.query_type=='1'){
            let start=document.getElementById('start_'+that.eleID).value
            let end=document.getElementById('end_'+that.eleID).value
            start==''&& (start='null')
            end==''&& (end='null')
            return start+','+end;
        }else{
            return document.getElementById(that.eleID).value;
        }
    }
    setValue(value) {
        let that=this;
        let queryType=that.data.query_type;//查询组件属性
        if(queryType=='1'){//段查询
            document.getElementById('start_'+this.eleID).value = util.toOldChar(value);
            document.getElementById('end_'+this.eleID).value = util.toOldChar(value);
        }else{//
            document.getElementById(this.eleID).value = util.toOldChar(value);
        }
    }
    initFunc(){
        let that=this;
        that.bindValueValidate= ()=>{
            that.validateFunc= ()=>{
                that.validate();
            }
            let queryType=that.data.query_type;//查询组件属性
            if(queryType=='1'){//段查询

            }else{//
                util.addEventListener(that.eleID,'blur',that.validateFunc)
                $('#'+that.eleID).on('change',function (){//因为这里用的是别的日期控件，一些事件用原生js不好控制（要么就自己写一个日期控件）
                    that.validateFunc();
                })
            }
        }
    }
    bindFunc(){
        let that=this;
        that.bindValueValidate();
    }
}

export { inputDate }