<template>
    <div :class="classes">
        <div :class="headClasses" v-if="showHead"><slot name="title">
            <p v-if="title">
                <ht-base-icon v-if="icon" :type="icon"></ht-base-icon>
                <span>{{title}}</span>
            </p>
        </slot></div>
        <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
        <div :class="coverClasses" v-if="showCover"><slot name="cover"></slot></div>
        <div :class="bodyClasses" :style="bodyStyles">
            <slot></slot>
        </div>
        <ul :class="footerClasses" v-if="actionIcons.length > 0">
            <li v-for="item in actionIcons" :style="setWidth">
                <ht-base-icon :type='item'></ht-base-icon>
            </li>
        </ul>
    </div>
</template>
<script>
    const prefixCls = 'ivu-card';
    const defaultPadding = 16;
    import {oneOf} from "../../../libs/utils/util";

    export default {
        name: 'HtBaseCard',
        props: {
            bordered: {
                type: Boolean,
                default: true
            },
            disHover: {
                type: Boolean,
                default: false
            },
            grid: {
                type: Boolean,
                default: false
            },
            tabs: {
                type: Boolean,
                default: false
            },
            shadow: {
                type: Boolean,
                default: false
            },
            padding: {
                type: Number,
                default: defaultPadding
            },
            title: {
                type: String,
            },
            icon: {
                type: String,
            },
            actionIcons: {
                type: Array,
                default () {
                    return []
                }
            },
            size: {
                validator(value) {
                    return oneOf(value, ['large', 'small'])
                },
                default: 'large'
            }
        },
        data () {
            return {
                showHead: true,
                showExtra: true,
                showCover: true
            };
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    `${prefixCls}-${this.size}`,
                    `ht-base-card`,
                    {
                        [`${prefixCls}-bordered`]: this.bordered && !this.shadow,
                        [`${prefixCls}-dis-hover`]: this.disHover || this.shadow,
                        [`${prefixCls}-grid`]: this.grid,
                        [`${prefixCls}-tabs`]: this.tabs,
                        [`${prefixCls}-shadow`]: this.shadow,
                    }
                ];
            },
            headClasses () {
                return `${prefixCls}-head`;
            },
            extraClasses () {
                return `${prefixCls}-extra`;
            },
            coverClasses () {
                return `${prefixCls}-cover`;
            },
            bodyClasses () {
                return `${prefixCls}-body`;
            },
            footerClasses () {
                return `${prefixCls}-footer`;
            },
            bodyStyles () {
                if (this.padding !== defaultPadding) {
                    return {
                        padding: `${this.padding}px`
                    };
                } else {
                    return '';
                }
            },
            setWidth () {
                return {
                    width: 100 / this.actionIcons.length + '%'
                }
            }
        },
        mounted () {
            this.showHead = this.title || this.$slots.title !== undefined;
            this.showExtra = this.$slots.extra !== undefined;
            this.showCover = this.$slots.cover !== undefined;
        }
    };
</script>
