<template>
    <pop ref="pop"
        customClass="calendar-select-pop"
        animation="bottomToUp"
        :allowClose="false"
        :closeOnClickModal="true"
        :onClose="close"
    >
        <Calendar
            :value="value"
            @confirm="confirm"
            @cancel="cancel"
        ></Calendar>
    </pop>
</template>

<script>
import Calendar from './calendar.vue';
import Pop from '../pop/index.vue';
export default {
    name: 'calendar-popup',
    components: { Calendar, Pop },
    emits: ['change'],
    props: {
        date: {
          type: Number,
        }
    },
    computed: {
        value() {
            return this.date || Date.now();
        }
    },
    methods: {
        confirm(val) {
            this.$emit('change', val);
            this.close();
        },
        cancel() {
            this.close();
        },
        close() {
            this.$refs.pop.hide()
            if(this.$el.parentNode) {
              this.$el.parentNode.remove()
            }
        }
    },
    mounted() {
      this.$refs.pop.open()
    }
};
</script>

<style lang="scss">
.calendar-select-pop {
    background: #fff;
}
</style>
