<template>
    <span :class="[$style.datePicker,'datePicker']">
        <div :class="$style.prefix" v-if="icon=='prefix'">
            <IconFont>&#xe600;</IconFont>
        </div>
        <myDatepicker :value="toTimeStamp" :option="getOption" :limit="getLimit" @input="change"/>
        <div :class="$style.suffix" v-if="icon=='suffix'">
            <IconFont>&#xe600;</IconFont>
        </div>
    </span>

</template>

<script>
    import myDatepicker from 'vue-datepicker2'
    import IconFont from "../basic/IconFont";
    export default {
        name: "DatePicker",
        components:{IconFont, myDatepicker},
        props:{
            placeholder:{
                type:String,
                default:''
            },
            value:{},
            min:{
                default:'2016-01-01'
            },
            max:{
                default: Date.now()+2*365*24*60*60*1000
            },
            required:{
                type:Boolean
            },
            type:{
                type:String,
                default:'day'
            },
            icon:{
                type:String,
                default:''
            },
            format:{
            	type:String,
                default:'YYYY-M-D HH:mm'
            }
        },
		mounted(){
			console.log(this.format);
		},
        computed:{
            getOption(){
                return Object.assign(this.option,this.types[this.type])
            },
            toTimeStamp(){
                if(!this.value){
                    return '';
                }
                var date=new Date(this.value),
                    y=date.getFullYear(),
                    m=date.getMonth()+1,
                    d=date.getDate();
                var dateStr=`${y}-${m<10?'0'+m:m}-${d<10?'0'+d:d}`;
                if(this.type=='min'){
                    let h=date.getHours(),
                        M=date.getMinutes();
                    return `${dateStr} ${h<10?'0'+h:h}:${M<10?'0'+M:M}`;

                }
                return dateStr;
            },
            getLimit(){
                return [
                    {
                        type: 'weekday',
                        available: [1, 2, 3, 4, 5,6,0]
                    },
                    {
                        type: 'fromto',
                        from: this.min,
                        to: this.max
                    }
                ]
            }
        },
        methods:{
            change(e){
                let getTime=function(date){
                    return new Date(date).getTime();
                }
                if(getTime(e)<getTime(this.min)){
                    this.$emit('input',getTime(this.min))
                    this.$emit('change',getTime(this.min))
                }
                else if(getTime(e)>getTime(this.max)){
                    this.$emit('input',getTime(this.max))
                    this.$emit('change',getTime(this.max))
                }
                else{
                    this.$emit('input',getTime(e))
                    this.$emit('change',getTime(e))
                }
            }
        },
        data () {
            return {
                option:{
                    name:this.name,
                    week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: this.format,
                    inputStyle: {
                        'display': 'inline-block',
                        'padding': `0 ${this.$px2rem(this.icon=='suffix'?30:14)} 0 ${this.$px2rem(this.icon=='prefix'?30:14)}`,
                        'height': '2.5em',
                        'width':this.$px2rem(this.type=='min'?170:150),
                        'max-width':'100%',
                        'min-width':'100PX',
                        'font-size': this.$px2rem(14),
                        'border': '1PX solid #d5d5d5',
                        'border-left':this.required&&'2PX solid #FF0000',
                        'box-shadow': 'none',
                        'border-radius': `${this.required?0:'0'} 0 0 ${this.required?0:'0'}`,
                        'color': '#343434',
                        'margin':'0'
                    },
                    color: {                        // 字体颜色
                        header: '#304156',          // 头部
                        headerText: '#fff',         // 头部文案
                    },
                    buttons: {                      // button 文案
                        ok: '确定',
                        cancel: '取消'
                    },
                    overlayOpacity: 0.8,            // 遮罩透明度
                    placeholder: this.placeholder,  // 提示日期
                    dismissible: true               // 默认true  待定
                },
                types:{
                    day: {
                        type: 'day',  // day , multi-day
                    },
                    min: {
                        type: 'min',  // day , multi-day
                    },
                    multi: {
                        type: 'multi-day',
                    }
                }
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    :global{
        .datepicker-overlay {
            line-height: normal;
        }
    }
    .datePicker{
        position: relative;
        display: inline-block;
        >.prefix,>.suffix{
            position: absolute;
            top: 0;
            width: 30px;
            height: 100%;
            &.prefix{
                left: 0;
            }
            &.suffix{
                right: 0;
            }
            >*{
                @extend %AbsoluteCenter;
            }
        }
    }
</style>