<template lang="pug">
    DropDown#picker.oc-dp-wrap(ref="dropdown", @hide="init", @show="init(true)", :isSetMinWidth="false", :disabled="disabled", :class="[{'show-time-zone': showTimeZone}]", :timezone="formatTimeZone", :title="showTimeZone && formatTimeZone === '-' ? '- 视作0时区' : null")
        template(slot="dropHead")
            input.ocFormElement.oc-datepicker(
                ref="ipt",
                :data-transferValue="transferValue",
                :name="name",
                :required="required",
                type="text",
                v-model.trim="currentValue",
                :style="iptStyle",
                :placeholder="placeholder",
                autocomplete="off",
                :readonly="readonly",
                :disabled="disabled")

        .z-dp(slot="dropBody")
            #head.z-dp-head(ref="head")
                span.z-dp-prev(@click="headClickHandler(-1)") &lt;
                span.z-dp-view-switch(@click="headClickHandler(0)") {{headText}}
                span.z-dp-next(@click="headClickHandler(1)") &gt;
            #body.z-dp-body(ref="body", @click="bodyClickHandler($event)", @mouseover="bodyMouseover", @mouseout="bodyMouseout")
                table.z-dp-view-year(v-if="currentView === 'year'")
                    tbody
                        tr(v-for="row in 4")
                            td(:data-val="getYearText(row, col)", v-if="getYearText(row, col)", v-for="col in 3")
                                span {{getYearText(row, col)}}

                table.z-dp-view-month(v-if="currentView === 'month'")
                    tbody
                        tr(v-for="row in 4")
                            td(:data-val="(row - 1) * 3 + col - 1", :class="{ 'z-dp-active': currentViewValue == ((row - 1) * 3 + col - 1)}", v-for="col in 3")
                                span {{monthText[(row - 1) * 3 + col - 1]}}

                table.z-dp-view-day(v-if="currentView ==='day'")
                    thead
                        tr
                            th Su
                            th Mo
                            th Tu
                            th We
                            th Th
                            th Fr
                            th Sa
                    tbody
                        //- 输出42个格子
                        tr(v-for="row in 6", :title="getDayWeekTitle(row, 0)")
                            td(v-for="col in 7", v-if="getDayText(row, col)", :class="getDayTdClass(row, col)", v-html="getDayText(row, col)")
                .clearData(v-if="currentView ==='day'")
                    span(@click="clearDateData()") Clear

                table.z-dp-view-hour.mt5.mb5(v-if="currentView ==='hour'")
                    tbody
                        tr(v-for="row in 5")
                            td(v-for="col in 5" v-if="getHourText(row,col)", :data-val="getHourText(row,col)")
                                span {{ getHourText(row,col) }}

                table.z-dp-view-time.mt5.mb5(v-if="currentView ==='minute' || currentView === 'second'")
                    tbody
                        tr(v-for="row in 7")
                            td(v-for="col in 9") {{row === 7 && col > 6? '' : limitedTwo((row - 1) * 9 + col -1)}}

                table.z-dp-view-season.mt15(v-if="currentView ==='season'")
                    tbody
                        tr(v-for="row in 2")
                            td(v-for="col in 2", :data-val="(row-1) * 2 + col") {{seasonText[(row - 1) * 2 + col -1]}}

                table.z-dp-view-week(v-if="currentView ==='week'")
                    tbody
                        tr(v-for="row in 7")
                            td(v-for="col in 8", v-if="getWeekText(row, col)",  :title="getWeekDaysTitle(row, col)", :class="{ 'z-dp-active': isCurrentWeek(row, col) }") {{getWeekText(row, col)}}
                            
                             
</template>

<script>
    import DropDown from './dropdown';
    import formElement from './mixins/formElement'
    import ocDate from './js/date'

    export default {
        name: 'oc-datepicker',
        mixins: [ formElement ],
        components: { DropDown },

        props: {
            iptStyle: null,
            //"year", "season", "month", "week", "day", "hour", "minute", "second", "millisecond", default is day
            minview: { type: String, default: 'day' },
            min: String,
            max: String,
            monthText: { type: Array, default: e => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] },
            viewText: { type: Array, default: e =>["year", "season", "month", "week", "day", "hour", "minute", "second", "millisecond"] },
            seasonText: { type: Array, default: e =>['Season One', 'Season Two', 'Season Three', 'Season Four'] },
            viewPrefixMap: { type: Object, default: e => ({
                    year: '',
                    month: '-',
                    day: '-',
                    week: '',
                    season: '',
                    hour: ' ',
                    minute: ':',
                    second: ':'
                })
            },
            
            //是否在week前加上W字符，如 W201750
            isWeekUnit: { type: Boolean, default: false},
            isSeasonUnit: { type: Boolean, default: false},

            readonly: { type: Boolean, default: false},
            isUseTimestamp: { type: Boolean, default: false},
            timeZone: { type: String, default:'' },
            showTimeZone: { type: Boolean, default: false},

        },

        data() {
            return {
                oneDay: 24 * 60 * 60000,
                currentViewStep: 0,
                currentValueQueue: [],
                currentViewValue: 0,

                _timer: null,
                _currViewIndex: null,
                currDate: new Date().getTime(),
                _viewDate: null, //当前view显示的数据，如201601，表示当前view显示的为2016年01月的天数数据
                
                body: null
            }
        },

        computed: {
            _viewOriginQuene() {
                return {
                    'day': ['year', 'month', 'day'],
                    'month': ['year', 'month'],
                    'year': ['year'],
                    'hour': ['year', 'month', 'day', 'hour'],
                    'minute': ['year', 'month', 'day', 'hour', 'minute'],
                    'second': ['year', 'month', 'day', 'hour', 'minute', 'second'],
                    'season': ['year', 'season'],
                    'week': ['year', 'week']
                }[this.minview || 'day'];
            },

            currentView() {
                return this._viewOriginQuene[this.currentViewStep - 1];
            },

            _valueOriginQueue() {
                let ret = [];

                var minview = (this.minview || 'day').toLowerCase();

                var defaultValue = this.currentValue;
                if(defaultValue && /^(-?[1-9]\d*|[0]{1,1})d$/.test(defaultValue)) {
                    let now = new Date().getTime();
                    let time = now + parseInt(defaultValue) * 24 * 60 * 60000

                    if(minview === 'week') {
                        defaultValue = ocDate.getWeekString(time);
                    }
                    else if(minview === 'season') {
                        defaultValue = this.getSeasonByTime(time);
                    }
                    else {
                        defaultValue = ocDate.format(time);
                    }
                }

                if(minview !== 'week' && minview !== 'season') {
                    if(minview === 'hour' && defaultValue) {
                        defaultValue += ':00';
                    }

                    if(defaultValue && !/^\d{4}-/.test(defaultValue)) {
                        defaultValue = null;
                    }

                    try {
                        defaultValue = new Date(defaultValue || new Date());
                    }
                    catch(err) {
                        defaultValue = new Date();
                    }
                    
                    var nowVal = {
                        year   : defaultValue.getFullYear(),
                        month  : defaultValue.getMonth(),
                        day    : defaultValue.getDate(),
                        hour   : defaultValue.getHours(),
                        minute : defaultValue.getMinutes(),
                        second : defaultValue.getSeconds()
                    }
                    for(var i = 0; i < this.currentViewStep; i ++) {
                        ret.push( nowVal[this._viewOriginQuene[i]] );
                    }

                    return ret;
                }
                
                if(defaultValue) {
                    defaultValue = defaultValue.toString();
                }
                
                if(minview === 'week') {
                    defaultValue = defaultValue? defaultValue.replace('W', ''): ocDate.getWeekString(new Date());
                    
                    return [defaultValue.slice(0, 4), defaultValue.slice(4, 6)];
                }
                
                if(minview === 'season') {
                    var year = null;
                    var season = null;
                    if(defaultValue) {
                        defaultValue =  defaultValue.replace('S', '');

                        return [defaultValue.slice(0, 4), defaultValue.slice(4, 6)]
                    }
                    var date = new Date();
                    year = new Date().getFullYear();
                    season = parseInt(new Date().getMonth() / 4) + 1;

                    return [year, season];
                }
            },

            firstDayTimespan() {
                if(!this.currentValueQueue || this.currentValueQueue.length < 2) {
                    return null;
                }

                var firstDay = new Date(this.currentValueQueue[0], this.currentValueQueue[1]);
                var day = firstDay.getDay();
                return firstDay.getTime() - day * 24 * 60 * 60000;
            },

            //头部中间显示的文本值 ----
            headText() {
                if(this.currentViewStep === 1) {
                    let startYear = parseInt(this.currentValueQueue[0] / 10) * 10;
                    return startYear + ' - ' + (startYear + 10);
                }

                let ret = '';
                for(var i = 0; i < this.currentViewStep - 1; i ++) {
                    let viewText = this._viewOriginQuene[i];
                    let value = this.currentValueQueue[i];
                    if(viewText === 'month') {
                        value ++;
                    }
                   
                    ret += this.viewPrefixMap[viewText] + this.limitedTwo(value);
                }

                return ret;
            },
            // 把0:0、-9:00、0、乱码等在展示区生成标准的展示格式如 +00:00
            formatTimeZone() {
                let timeZone = this.timeZone;
                if(!timeZone) {
                    return '+00:00'
                } else if(!/^[+-][0-9]{2}:((0[0-9])|([1-5][0-9]))$/.test(timeZone)){ // 与产品沟通，暂时使用较为严格的格式验证限制，缺少首位0和正负号视为非法格式
                    return '-'
                }
                return timeZone.replace(/^([+-]?)(\d{1,2}):(\d{1,2})$/, (match,p1,p2,p3)=>{ // 底层处理保留兼容缺少首位0和正负号的情况
                    let ret;
                    if(!p1 || (!Number(p2) && !Number(p3))){
                        p1 = '+'
                    }
                    if(p2.length == 1) {
                        p2 = '0' + p2
						
                    }
                    if(p3.length == 1) {
                        p3 = '0' + p3
                    }
					ret = p1 + p2 + ':' + p3
                    return ret;
                })
                
            },
            timePickerMinview() {
                return ['hour', 'minute', 'second'];
            },
            datePickerMinview() {
                return ['day', 'month', 'year'];
            },
            isTimeMinview() {
                return this.timePickerMinview.includes(this.minview);
            },
            isDateMinview() {
                return this.datePickerMinview.includes(this.minview);
            },
            isSpecialMinview() {
                return !this.isTimeMinview && !this.isDateMinview;
            },
            transferValue() {
                let date = this.currentValue;
                if(date === null || date === undefined || date === '') {
                    return date;
                }
                //数字，做转换
                if(/^-?([1-9]\d*|[0]{1,1})d$/.test(date)) {
                    date = parseInt(date);
                    // 此格式为日期，处理时需要去掉时分秒。
                    let time = new Date();
                    time = time.getTime();
                    if(!this.isSpecialMinview) {
                        time = this.removeFraction(time, this.timeZone, this.minview)
                    }
                    time += date * 24 * 60 * 60 * 1000;

                    if (this.isUseTimestamp) {
                        return time;
                    }
                    if(this.minview === 'day') {
                        return ocDate.format(time);
                    }
                    else if(this.minview === 'week') {
                        return ocDate.getWeekString(time);
                    }
                    else if(this.minview === 'month') {
                        return ocDate.format(time, 'yyyy-mm');
                    }
                    else if(this.minview === 'year') {
                        return ocDate.format(time, 'yyyy');
                    }
                    else if(this.minview === 'season') {
                        return ocDate.format(new Date(), 'yyyy') + '0' + Math.ceil((new Date(time).getMonth() + 1) / 3);
                    }
                }

                return this.isUseTimestamp && !this.isSpecialMinview ? ocDate.getAnyTimespan(date, this.timeZone) : date;
            },

        },
        
        watch: {
            minview(old, newView) {
                if(old !== newView) {
                    Object.assign(this.$data, this.$options.data());
                    this.currentValue = this.value;
                }
            }
        },

        mounted() {
            this.init();
            this.$refs.ipt.onchange = this.ocFormElementChangeHandler;
        },

        methods: {
            ocFormElementChangeHandler(e) {
                this.currentValue = e.target.value;
            },
            //初始化 -----
            init(focus) {
                
                this.currentViewStep = this._viewOriginQuene.length > 3? 3: this._viewOriginQuene.length;

                this.body = this.$refs.body;
                setTimeout(_ => {
                    this.currentValueQueue = this._valueOriginQueue.length > 1? this._valueOriginQueue.slice(0, -1) : this._valueOriginQueue.slice(0);
                }, 300)
                focus && this.$emit('focus')
            },
            getSeasonByTime(time) {
                time = new Date(time);
                let month = time.getMonth() + 1;
                let season = Math.ceil(month / 4);
                return time.getFullYear() + this.limitedTwo(season);
            },

            limitedTwo(val) {
                if(!val) {
                    return '00';
                }
                if(val.toString().length === 1) {
                    return '0' + val.toString();
                }
                return val;
            }, 

            getDayTdClass(row, col) {
                let classes = [];
                let timespan = this.firstDayTimespan + this.oneDay * ((row - 1) * 7 + col -1);

                if(this.min) {
                    let minTimespan  = this.min;
                    if(typeof minTimespan === 'string') {
                        minTimespan = new Date(this.min + ' 00:00:00').getTime();
                    }
                    if(timespan < minTimespan) {
                        classes.push('z-dp-min');
                    }
                }
                if(this.max) {
                    let maxTimespan  = this.max;
                    if(typeof maxTimespan === 'string') {
                        maxTimespan = new Date(this.max + ' 00:00:00').getTime();
                    }
                    if(timespan > maxTimespan) {
                        classes.push('z-dp-max');
                    }
                }

                if(row === 6 && col > 4) {
                    return classes.join(' ');
                }
                
                let time = new Date(timespan);
                let month = time.getMonth();
                let year = time.getFullYear();
                let currentDate = ocDate.format(new Date()).split('-');
                if(year < this.currentValueQueue[0]) {
                    classes.push('z-dp-old');
                    return classes.join(' ');
                }
                if(year > this.currentValueQueue[0]) {
                    classes.push('z-dp-new');
                    return classes.join(' ');
                }

                if(month < this.currentValueQueue[1]) {
                    classes.push('z-dp-old');
                    return classes.join(' ');
                }
                if(month > this.currentValueQueue[1] ) {
                    classes.push('z-dp-new');
                    return classes.join(' ');
                }

                if(Number(currentDate[0]) === this.currentValueQueue[0]
                    && Number(currentDate[1]) === (this.currentValueQueue[1]+1) 
                    && this.getDayText(row, col) === currentDate[2]) {
                    classes.push('z-dp-current-day');
                }
                return classes.join(' ');
            },

            getDayWeekTitle(row, col) {
                if(row === 6 && col > 4) {
                    return '';
                }
                let timespan = this.firstDayTimespan + this.oneDay * ((row - 1) * 7 + col -1);
                let time = new Date(timespan);
                let weekString = ocDate.getWeekString(time);

                return weekString;
            },
            getHourText(row,col) {
                return row === 5 && col === 5? '' : this.limitedTwo((row - 1) * 5 + col -1)
            },
            getDayText(row, col) {
                if(row === 6 && col > 4) {
                    return '';
                }

                let timespan = this.firstDayTimespan + this.oneDay * ((row - 1) * 7 + col -1);
                let time = new Date(timespan);
                let month = time.getMonth();
                let date = time.getDate();

                return this.limitedTwo(date);
            },

            getYearText(row, col) {
                if(row === 4 && col > 2) {
                    return '';
                }
                if(!this.currentValueQueue[0]) {
                    return '';
                }

                let startYear = parseInt(this.currentValueQueue[0] / 10);
                startYear *= 10;

                return startYear + (row - 1) * 3 + col - 1;
            },

            getWeekText(row, col) {
                let year = this.currentValueQueue[0];
                let allWeeks = ocDate.getWeeksByYear(year);
                let week = (row - 1) * 8 + col;

                return week > allWeeks? '' : week;
            },

            getWeekDaysTitle(row, col) {
                let week = this.getWeekText(row, col);
                if(!week) {
                    return null;
                }

                let year = this.currentValueQueue[0];
                let weekString = `${year}${this.limitedTwo(week)}`;
                let startDate = ocDate.getStartDateByWeek(weekString);
                if(!startDate) {
                    return null;
                }
                let endDate = startDate.getTime() + 6 * 24 * 60 * 60000;
                return ocDate.format(startDate) + ' / ' + ocDate.format(endDate);
            },

            // 去月日时分秒
            removeFraction(time, timeZone, minview) {
                if(minview === 'second') {
                    return time;
                }

                let timeStr = ocDate.getAnyTimeString(time, timeZone);
                if(minview === 'minute') {
                    timeStr = timeStr.replace(/[0-9]{2}$/,'00')
                    return ocDate.getAnyTimespan(timeStr, timeZone)
                }

                if(minview === 'hour') {
                    timeStr = timeStr.replace(/[0-9]{2}:[0-9]{2}$/,'00:00')
                    return ocDate.getAnyTimespan(timeStr, timeZone)
                }

                if(minview === 'day') {
                    timeStr = timeStr.replace(/[0-9]{2}:[0-9]{2}:[0-9]{2}$/,'00:00:00')
                    return ocDate.getAnyTimespan(timeStr, timeZone)
                }

                if(minview === 'month') {
                    timeStr = timeStr.replace(/[0-9]{2}\s[0-9]{2}:[0-9]{2}:[0-9]{2}$/,'01 00:00:00')
                    return ocDate.getAnyTimespan(timeStr, timeZone)
                }

                if(minview === 'year') {
                    timeStr = timeStr.replace(/[0-9]{2}-[0-9]{2}\s[0-9]{2}:[0-9]{2}:[0-9]{2}$/,'01-01 00:00:00')
                    return ocDate.getAnyTimespan(timeStr, timeZone)
                }
            },

            //是否为当前周
            isCurrentWeek(row, col) {
                if(!this.currentValueQueue || !this.currentValueQueue.length) {
                    return false;
                }
                
                let year = this.currentValueQueue[0];
                let week = (row - 1) * 8 + col;
                if(week < 10) {
                    week = '0' + week.toString();
                }
                return ocDate.getWeekString() === year.toString() + week.toString();
            },

            setCurrentValue() {
                let ret = '';
                for(var i = 0; i < this.currentViewStep; i ++) {
                    let viewText = this._viewOriginQuene[i];
                    let value = this.currentValueQueue[i];
                    if(viewText === 'month') {
                        value ++;
                    }
                    ret += this.viewPrefixMap[viewText] + this.limitedTwo(value);
                }

                this.currentValue = ret;
                this.$refs.dropdown && this.$refs.dropdown.hide && this.$refs.dropdown.hide();
            },

            //上一个视图
            _showPrevView () {
                if(this.currentViewStep === 1) {
                    return;
                }

                this.currentViewStep --;
                this.currentViewStep > 1 && this.currentValueQueue.pop();
            },
            
            headClickHandler(type) {
                // console.log('head click hanlder');
                if(type === 0) {
                    this._showPrevView();
                    return;
                }
                    
                var isPrev = type === -1;
                
                let index = this.currentViewStep < 2? 0 : this.currentViewStep - 2;
                let currentViewValue = parseInt(this.currentValueQueue[index]);
                switch(this.currentView) {
                    case 'year': 
                        isPrev? currentViewValue -= 10: currentViewValue += 10;
                        break;
                    case 'season':
                    case 'month': 
                    case 'week':
                        isPrev? currentViewValue -- : currentViewValue ++;
                        break;
                    case 'day': 
                        this._recalcMonth(isPrev? -1: 1);
                        return;
                    case 'hour':
                        var currentDay = this.currentValue;
                        var oneDay = 24 * 60 * 60000;
                        isPrev? (currentDay -= oneDay) : (currentDay += oneDay);
                        this._setDateToQueue(currentDay);
                        break;
                    case 'minute':
                        var current = this.currentValue;
                        var oneHour = 60 * 60000;
                        isPrev? (current -= oneHour) : (current += oneHour);
                        this._setDateToQueue(current);
                        
                        break;
                    case 'second':
                        var current = this.currentValue;
                        var oneMinute = 60000;
                        isPrev? (current -= oneMinute) : (current += oneMinute);
                        this._setDateToQueue(current);
                        
                        return;
                }
                this.currentValueQueue.splice(index, 1, currentViewValue);
            },

            bodyClickHandler(event) {
                var eventTarget = event.target;
                

                if(eventTarget.nodeName === 'SPAN'){
                    eventTarget = eventTarget.parentNode
                }; 
                if( eventTarget.nodeName !== 'TD'
                    || eventTarget.innerText === "" 
                    || eventTarget.classList.contains('z-dp-min') 
                    || eventTarget.classList.contains('z-dp-max')) {
                    return;
                }
                var value = parseInt(eventTarget.getAttribute('data-val') || eventTarget.innerHTML);
                if(this.currentView == 'day') {
                    //上一个月的
                    if(eventTarget.classList.contains('z-dp-old')) {
                        this._recalcMonth(-1);
                    }
                    else if(eventTarget.classList.contains('z-dp-new')) {
                        this._recalcMonth(1);
                    }
                }
                this.currentViewStep === 1? this.currentValueQueue = [value] : this.currentValueQueue.push(value);
                this.currentViewStep < this._viewOriginQuene.length? this.currentViewStep ++ : this.setCurrentValue();
            },

            bodyMouseover() {
                var eventTarget = event.target;
                var text = eventTarget.innerText;
                if(eventTarget.nodeName !== 'TD' || text === "") {
                    event.stopPropagation();
                    return;
                }
                if(this.$refs.body) {
                    var spanTips = this.$refs.body.querySelector('.z-dp-week-tips');
                    if(!spanTips) {
                        event.stopPropagation();
                        return;
                    }
                    var weekString = this._viewValueQuene[0] + this._atLeastTwoLength(text);
                    var startDate = ocDate.getStartDateByWeek(weekString);
                    spanTips.innerText = 'Start: ' + ocDate.format(startDate);
                }
            },

            bodyMouseout() {
                var eventTarget = event.target;
                if(eventTarget.nodeName !== 'TD' ||  eventTarget.innerText === "") {
                    event.stopPropagation();
                    return;
                }
                if(this.$refs.body) {
                    var spanTips = this.$refs.body.querySelector('.z-dp-week-tips');
                    if(!spanTips) {
                        event.stopPropagation();
                        return;
                    }
                    spanTips.innerText = '';
                }
            },

            //计算得出上一个月和下一个月份
            _recalcMonth (val) {
                // console.log('_recalcMonth:', val);
                var month = parseInt(this.currentValueQueue[1]);
                var year = parseInt(this.currentValueQueue[0]);
                // console.log(year + ': ' + month + ':' + val);
                month += val;
                if(month < 0) {
                    year --;
                    month = 11;
                }
                else if(month > 11) {
                    year ++;
                    month = 0;
                }
                this.currentValueQueue.splice(0, 1, year);
                this.currentValueQueue.splice(1, 1, month);
            },
            clearDateData(){
                this.currentValue = '';
                this._fireInputEvent(this.$refs.ipt);
            }
        }
    }
</script>


<style lang="stylus" scoped>
    $hover = rgba(250, 250, 250, .15)
    $hoverColor = rgba(0, 0, 0, .5)
    $brand-blue = #2639a0
    .oc-dp-wrap.show-time-zone
        >>> .dropHead
            display inline-block
            width calc(100% - 49px)
        &::before
            content attr(timezone)
            display inline-block
            width 48px
            height 26px
            text-align center
            line-height 26px
            background-color rgb(240,240,240)
            border 1px solid #ccc
            border-right 0
            vertical-align middle
            border-radius 4px
            border-top-right-radius 0
            border-bottom-right-radius 0
            color #666
            cursor pointer
        input
            border-top-left-radius 0
            border-bottom-left-radius 0
    .oc-dp-wrap
        position relative
        font-size 12px
        width auto
        display inline-block
        &:focus
            outline none
        input
            position relative
            height 100%
            width 100%
    .z-dp
        z-index 1060
        display inline-block
        padding 0 5px
        min-height 160px
        width auto
        outline none
        background #fff
        font-size 12px
        color #333
        table
            min-width 240px
            th 
                text-align center
                background-color #fff
                border-bottom 0
                color $brand-blue
                
        .z-dp-head
            white-space nowrap
            height 40px
            line-height 40px
            text-align center
            position relative
            padding 5px 0
            min-width 200px
            font-size 14px
            span
                display inline-block
                cursor pointer
                min-width 38px
                height 30px
                line-height 32px
                &:hover
                    background $hover
                    color $hoverColor
            .z-dp-prev
                float left
            .z-dp-next
                float right
            .z-dp-view-switch
                position absolute
                height 30px
                top 5px
                left 42px
                right 42px
                
        .z-dp-body
            position relative
            table
                width 100%
                text-align center
                // border-collapse collapse
                th, td
                    width 34px
                    height 34px
                    line-height 34px
                    padding 0
                tr 
                    height auto
                td
                    border-bottom 0
                    cursor pointer
                    border-radius 2px
                    color #222
                    &.z-dp-old, &.z-dp-new
                        color #888
                    &.z-dp-min, &.z-dp-max
                        cursor no-drop
                        color #ccc
                        &:hover
                            background #fff
                            color #ccc
                    &.z-dp-active
                        // span
                        //     color #fff
                        //     background $brand-blue
           
           
            .z-dp-view-season
                td
                    height 45px
                    width 110px
                    &:hover
                        color $brand-blue
                        font-weight bold
            .z-dp-view-month
                height 200px

            .z-dp-view-year, .z-dp-view-month,  .z-dp-view-hour
                span
                    display inline-block
                    width 32px
                    height 32px
                    border-radius 50%
                    &:hover
                        color #fff
                        background $brand-blue
            .z-dp-view-time, .z-dp-view-day, .z-dp-view-week
                td:hover
                    border-radius 50%
                    color #fff
                    background $brand-blue
            .z-dp-current-day
                border: 1px solid $brand-blue;
                line-height: 32px;
                color $brand-blue
                border-radius 50%
        
        .z-dp-week-tips
            position absolute
            right 13px
            bottom 8px
            color #89d7ff
    .clearData
        text-align center
        cursor pointer
        color $brand-blue
</style>
                    
            
