import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import * as _ from 'lodash';
declare var $: any;

@Directive({
    selector: '[DateTimePicker]'
})
export class DatePickerDirective implements OnInit {
    
    @Input() dpValue;
    @Input() dpConfig: Object;
    @Input() formControl;
    @Input() dpType;
    @Input() ngModel;
    constructor(public el: ElementRef) {

    }
    ngOnInit(): void {
        
        let $ele = $(this.el.nativeElement);
        let config = {
            language: "zh-CN",
            // minView:2,
            autoclose: 1,
            // startView:3, 
            // todayBtn:  1,
            clearBtn: true,
            format:(!this.dpType || this.dpType =="date")?'yyyy-mm-dd':'yyyy-mm-dd hh:ii:00'
          };
        config = this.dpConfig?_.assignIn(config,this.dpConfig):config;
        if(!this.dpType || this.dpType =="date"){
            $ele.datepicker(config);


            // {
            //     language:  'zh-CN',
            //     format:"yyyy-mm-dd",
            //     weekStart: 1,
            //     todayBtn:  1,
            //     autoclose: 1,
            //     todayHighlight: 1,
            //     startView: 2,
            //     minView: 2,
            //     forceParse: 0
            // }
        } else if(this.dpType =="time"){
            $ele.datetimepicker({
                language:  'zh-CN',
                format:"yyyy-mm-dd hh:ii:00",
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1
            });
            // $ele.dateptimepicker(config);
        } else if(this.dpType =="year"){
            $ele.datetimepicker({
                language:  'zh-CN',
                format:"yyyy",
                startView: 'decade',
                minView:'decade',
                maxView:'decade',
                startDate:new Date(),
               // weekStart: 0,
                todayBtn:  1,
                autoclose: 1,
                //todayHighlight: 1,
                //startView: 2,
                //forceParse: 0,
               // showMeridian: 1
            });
            // $ele.dateptimepicker(config);
        } else if(this.dpType =="daymonth"){
            $ele.datetimepicker({
                language:  'zh-CN',
                format:"yyyy-mm",
                todayBtn:  true,
                autoclose: true,
                startView: 3,
                minView:3,
                maxView:6,
            });
            // $ele.dateptimepicker(config);
        }
        let _t = this;
        $ele.on('changeDate', function(value) {
            
            let val = _t.dpType =="date"? $ele.datepicker('getFormattedDate'): $ele.datetimepicker('getFormattedDate')
            
            if(val){
               _t.formControl.setValue(val);
                setTimeout(() => {
                   if(_t.formControl && _t.formControl.errors) _t.formControl.errors.required = false;
                }, 300);
            }else{
                _t.formControl.setValue(val);
            }

        });
    }


}
