<template>
    <div class="ev_picker" :class="{'ev_picker_active': showPicker}" @click="handleHiddenModal()">
        <div class="ev_picker_wrapper" @click.stop="">
            <div class="ev_picker_wrapper_header">
                <span class="ev_picker_wrapper_header_cancle">取消</span>
                <span class="ev_picker_wrapper_header_title">请选择时间</span>
                <span class="ev_picker_wrapper_header_confim">确定</span>
            </div>
            <div class="ev_picker_wrapper_box">
                <div class="ev_picker_wrapper_box_top"></div>
                <div class="ev_picker_wrapper_box_bottom"></div>
                <div class="ev_picker_wrapper_content">
                    <div class="ev_picker_wrapper_content_hour">
                        <div class="ev_picker_wrapper_content_hour_item" v-for="(item, index) in hoursData" :key="index">
                            {{item}}
                        </div>
                    </div>
                    <div class="ev_picker_wrapper_content_minute">
                        <div class="ev_picker_wrapper_content_minute_item" v-for="(item, index) in hoursData" :key="index">
                            {{item}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['showPicker'],
    data() {
        return {
            hoursData: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
        }
    },
    methods: {
        handleHiddenModal() {
            this.$emit('update:showPicker', false)
        }
    }
}
</script>

<style lang="less" scoped>
@import './cPicker.less';
</style>
