<template>
    <div class="formDiv"   @mouseenter="show" @mouseleave="hide">
        <div class="formDiv-left">
            <Label :style="{marginLeft:'5px'}">{{property.label}}</Label>
        </div>
        <div class="formDiv-right">
            <TimePicker
                    type="timerange"
                    :editable="false"
                    :format="extend.type"
                    :placeholder=extend.placeholder
                    class="timeStyle"
            >
            </TimePicker >
        </div>
        <commomHoverModal ref="commomHoverModal" ></commomHoverModal>

    </div>
</template>

<script>
    /**
     *@author     黄佳
     *@date       2019/9/26  14:45
     *@Copyright 天源迪科信息技术股份有限公司
     *@Description
     */
    import commomHoverModal from '../../common/commomHoverModal'

    import {editSetting} from './property';
    export default {
        name: "timeRange",
        data () {
            return {
                property:{
                    label : '时间区间',
                },
                extend:{
                    placeholder:"",
                    type:"HH:mm:ss",
                },
                text: 'input',
                styles: {},
                type: 'time-timerange',
                level: editSetting.level,
            };
        },
        components:{
            commomHoverModal
        },
        methods:{
            show(){
                this.$refs.commomHoverModal.handleMouseEnter();
            },
            hide(){
                this.$refs.commomHoverModal.handleMouseLeave();
            }
        },
        editSetting,
        name: editSetting.key,
        level: editSetting.level
    }
</script>

<style scoped>
    .formDiv{
        display: inline-block;
        line-height: 60px;
        text-align: left;
    }
    .formDiv-left {
        display:inline-block;
        width: 35%;
        height:40px;
        text-align:right;
        font-size:15px;
        float: left;
        margin: 0 10px;
    }
    .timeStyle {
        width: 50%;
    }
    .formDiv-right {
        width: 60%;
        position: relative;
        display:inline-block;
        float: right;
    }
</style>
