<template>
    <el-card :body-style="{ padding: '0px' }" class="card-comp">
        <slot name="shadow"></slot>

        <div @click="handleCardClick" class="image-box">
            <div class="image-box-div">
                <img :src="img" class="image"/>
            </div>
            <span :style="TagStyle" class="my-tag" v-if="MyTag">{{MyTag}}</span>
        </div>
        <div class="card-word-box">
            <slot/>
        </div>
    </el-card>
</template>

<script>
    export default {
        name:    'CardComp',
        props:   {
            // 图片数据
            img:      {
                type:     String,
                required: true,
            },
            // 传入数据
            MyOption: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
            // 标签
            MyTag:    String,
            // 标签样式
            TagStyle: {
                type:    Object,
                default: () => ({}),
            },

        },
        methods: {
            handleCardClick() {

                this.$emit('card-click', this.MyOption || 'click');
            },
        },
    };
</script>
