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