<template>
    <div>
        <div class="go_card_two_block">
            <div class="canChoose" :style="extendStyle" @mouseover="mouseOverBlock" @mouseleave="mouseLevel">
                <slot></slot>
                <div v-show="mouseState" class="block_operation">
                    <div class="more_icon">
                        <Icon type="ios-more" />
                    </div>
                    <ul class="operate" v-if="menuBtns.length>0">
                        <li @click="menuClick(btn)" v-for="btn of menuBtns">{{btn.label}}</li>
                    </ul>
                </div>
            </div>
            <div class="layoutName">{{item.title}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "go-simple-card-two",
        data() {
            return {
                mouseState: false,
            };
        },
        props: {
            menuBtns: {
                type: Array,
                default: ()=>[]
            },
            width: {
                type: String,
                default: 200
            },
            height: {
                type: String,
                default: 150,
            },
            item: {
                type: Object,
                default: () => {
                }
            }
        },
        computed: {
            extendStyle() {
                let backJson = {height: this.height + "px", width: this.width + "px"};
                return backJson;
            }
        },
        methods:{
            //点击菜单按钮
            menuClick(btn){
                this.$emit('menuClick',{btn,item:this.item});
            },
            mouseLevel(){
                this.mouseState=false;
            },
            mouseOverBlock(){
                this.mouseState=true;
            }
        }
    };
</script>


