<template>
    <dl class="v-f9-date-picker v-f9-date-picker--middle">
        <dt class="v-f9-date-picker-dt">
            <a @click="toggleContainer()" class="v-f9-date-picker-a">
                <span class="v-f9-date-picker-a-span">{{selectHolder}}</span>
                <i class="v-f9-date-picker-a-i v-icon-down-dir"></i>
            </a>
        </dt>
        <dd style="position: absolute">
            <div class="v-f9-date-picker-container-shadow" @click.self="shadow"  v-show="showContainer"></div>
            <!--  时间范围下拉DIV Start --->
            <div v-show="showContainer" class="v-f9-date-picker-container">
                <div class="v-f9-date-picker-container-content">

                    <!--插槽-->
                    <slot></slot>

                    <div class="v-f9-date-picker-container-footer">
                        <input @click.stop="confirmEvent()" type="button" value="确定" class="v-f9-date-picker-container-btn">
                        <input @click="toggleContainer()" type="button" value="取消" class="v-f9-date-picker-container-btn">
                    </div>
                </div>
            </div>
            <!--  时间范围下拉DIV End --->
        </dd>
    </dl>
</template>

<script>

    export default{
        name: 'v-f9-date-picker',

        data(){
            return {
                selectHolder: '时间范围',

                showContainer: false,
            }
        },

        methods: {
            // 显示遮罩层
            shadow(){
                this.showContainer = false;
            },


            toggleContainer(){
                this.showContainer = !this.showContainer;
            },

            // 点击确定回调
            confirmEvent(){
                this.$emit('datePickerConfirm');
                this.toggleContainer();
            }

        }
    }
</script>