<template>
    <div class="formDiv"   @mouseenter="show" @mouseleave="hide">
        <div class="formDiv-left">
            <Label v-if="type==='label'">
                {{property.label}}
            </Label>
        </div>
        <div class="formDiv-right">
            <span class="labelStyle">系统自动带出，不需要手动填写</span>
        </div>
         <commomHoverModal ref="commomHoverModal" ></commomHoverModal>
    </div>
</template>

<script>
    import {editSetting} from './property';
    import commomHoverModal from '../../common/commomHoverModal'
    import eventbus from '../../../service/eventbus';
    export default {
        // props: {
        //     text: {
        //         type: String,
        //         default: 'Button Text'
        //     },
        //     type: String,
        //     styles: Object
        // },
        components:{
               commomHoverModal
        },
        data () {
            return {
                property:{
                    label : '标签',
                },
                text: 'label',
                styles: {
                    display:'inline-block',
                    width:'40%',
                    height:'60px',
                    lineHeight:'60px',
                    textAlign:'right',
                    fontSize:'15px'
                },
                type: 'label',
                level: editSetting.level,
            };
        },
        editSetting,
        methods:{
            show(){
                this.$refs.commomHoverModal.handleMouseEnter();
            },
            hide(){
                this.$refs.commomHoverModal.handleMouseLeave();
            }
        },
        mounted(){
          /*  eventbus.$on(this.$store.state.viewport.mouseLeaveComponent, () => {
                debugger;
                this.$refs.commomHoverModal.handleMouseLeave();
            });
            eventbus.$on(this.$store.state.viewport.mouseHoveringComponent, () => {
                debugger;
                this.$refs.commomHoverModal.handleMouseEnter();
            });*/
        },
        name: editSetting.key,
        level: editSetting.level
    };
</script>

<style scoped>


    .formDiv{
        position: relative;
        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;
    }
    .formDiv-right {
        width: 60%;
        position: relative;
        display:inline-block;
        float: right;
    }
    .labelStyle {
        color: rgba(25, 31, 37, 0.4);
    }
</style>
