<template>
    <view class="calendar" :style="{'visibility': show ? 'initial' : 'hidden'}" @tap="onTapMask">
        <view class="calendar-wrap" :style="{transform: 'translateY(' + translateY + ') scaleZ(1)'}" @tap.stop>
            <view class="week c-gap-inner-left-boundary c-gap-inner-right-boundary">
                <view v-for="(week, weekIndex) in weeks" :key="weekIndex" class="week-item c-font-small c-color-normal">{{ week }}</view>
            </view>
            <scroll-view
                :scroll-into-view="curView"
                scroll-with-animation
                scroll-y
                class="date-scroll"
                >
                <view id="start" class="date">
                    <view v-for="(dateItem, dateIndex) in date" :key="dateIndex" class="date-wrap">
                        <view v-if="dateItem.mounth" :id="'mounth-'+ dateItem.mounthNum" class="mounth c-color-gray c-font-normal">{{ dateItem.mounth }}</view>
                        <view v-if="dateItem.days" class="day c-gap-inner-left-boundary c-gap-inner-right-boundary">
                            <view v-for="(day, dayIndex) in dateItem.days" :key="dateItem.mounth + '-' + dayIndex" :id="'day-' + day.datetime" class="day-item c-gap-bottom-large" @tap.stop="onTapDate(day)">
                                <view class="day-item-wrap c-color-normal" :class="{
                                    'selected': day && day.datetime === selectedDate,
                                    'youhao': day && day.status === '1'
                                }">
                                    <view v-if="day.day" class="c-font-15">{{ day.day }}</view>
                                    <view v-if="day.btnText" class="day-status c-font-small">{{ day.btnText }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
/**
 * @file calendar
 * @author wangying51
 */
import * as Log from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        date: {
            'type': Array,
            'default': []
        },
        show: {
            'type': Boolean,
            'default': false
        },
        selectedDate: {
            'type': String,
            'default': ''
        }
    },
    data() {
        return {
            weeks: ['日', '一', '二', '三', '四', '五', '六'],
            animateShow: false,
            translateY: '-20%',
            curView: 'date'
        };
    },
    watch: {
        show(newVal, oldVal) {
            let self = this;
            if (newVal) {
                Log.send({type: 'b', action: 'calendar-show'});
                this.translateY = 0;
                let curView = this.selectedDate ? 'mounth-' + this.selectedDate.slice(4, 6) : 'start';
                this.$mpUpdated(() => {
                    setTimeout(() => {
                        self.curView = curView;
                    }, 400);
                });
            }
            else {
                this.translateY = '-100%';
            }
        }
    },
    methods: {
        onTapDate(day) {
            if (day && day.datetime) {
                this.$emit('onTapDate', day);
                this.close();
                Log.send({type: 'b', action: 'calendar-day-selected'});
            }
        },
        onTapMask() {
            this.close();
        },
        close() {
            this.$emit('close');
            Log.send({type: 'b', action: 'calendar-close'});
        }
    }
};
</script>
<style lang="less" scoped>
    .calendar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        background-color: rgba(0, 0, 0, .4);
        &-wrap {
            background-color: #fff;
            transition: all .3s cubic-bezier(.42, 0, .52, 1);
        }
        .date-scroll {
            width: 100%;
            height: 400px;
        }
        .week {
            display: flex;
            flex-direction: row;
            &-item {
                flex: 1;
                text-align: center;
                height: 31px;
                line-height: 31px;
            }
        }
        .mounth {
            width: 100%;
            height: 25px;
            line-height: 25px;
            background-color: #f1f1f1;
            text-align: center;
        }
        .day {
            padding-top: 17px;
            &-item {
                display: inline-block;
                vertical-align: top;
                text-align: center;
                width: 14.2%;
            }
            &-item-wrap {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                margin: 0 auto;
                &.selected {
                    background-color: #00c8c8;
                    color: #fff !important;
                }
                &.youhao {
                    color: #00c8c8;
                }
            }
            &-status {
                margin-top: -8px;
            }
        }
    }
</style>
<style lang="less" target="h5">
    .calendar {
        top: 44px;
    }
</style>


