<template>
    <view :class="'custom-class ' + utils.bem('grid-item', { square })" :style="viewStyle" @tap="onClick">
        <view
            :class="
                'content-class ' +
                utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) +
                ' ' +
                (border ? 'van-hairline--surround' : '')
            "
            :style="contentStyle"
        >
            <block v-if="useSlot">
                <slot />
            </block>
            <block v-else>
                <view class="van-grid-item__icon icon-class">
                    <van-icon v-if="icon" :name="icon" :dot="dot" :info="badge || info" :size="iconSize" />
                    <slot v-else name="icon"></slot>
                </view>
                <view class="van-grid-item__text text-class">
                    <text v-if="text">{{ text }}</text>
                    <slot v-else name="text"></slot>
                </view>
            </block>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
<script>
import { link } from '../mixins/link';
import { VantComponent } from '../common/component';
import { addUnit } from '../common/utils';
export default {
    data() {
        return {
            viewStyle: '',
            contentStyle: '',
            center: '',
            border: '',
            square: '',
            gutter: '',
            clickable: '',
            direction: '',
            iconSize: ''
        };
    },
    '../grid/index': {
        name: 'grid',
        type: 'ancestor',
        current: 'grid-item'
    },
    classes: ['content-class', 'icon-class', 'text-class'],
    mixins: [link],
    props: {
        icon: String,
        dot: Boolean,
        info: null,
        badge: null,
        text: String,
        useSlot: Boolean
    },
    mounted() {
        this.updateStyle();
    },
    methods: {
        updateStyle() {
            if (!this.parent) {
                return;
            }
            const { data, children } = this.parent;
            const { columnNum, border, square, gutter, clickable, center, direction, iconSize } = data;
            const width = `${100 / columnNum}%`;
            const styleWrapper = [];
            styleWrapper.push(`width: ${width}`);
            if (square) {
                styleWrapper.push(`padding-top: ${width}`);
            }
            if (gutter) {
                const gutterValue = addUnit(gutter);
                styleWrapper.push(`padding-right: ${gutterValue}`);
                const index = children.indexOf(this);
                if (index >= columnNum && !square) {
                    styleWrapper.push(`margin-top: ${gutterValue}`);
                }
            }
            let contentStyle = '';
            if (square && gutter) {
                const gutterValue = addUnit(gutter);
                contentStyle = `
        right: ${gutterValue};
        bottom: ${gutterValue};
        height: auto;
      `;
            }
            this.setData({
                viewStyle: styleWrapper.join('; '),
                contentStyle,
                center,
                border,
                square,
                gutter,
                clickable,
                direction,
                iconSize
            });
        },
        onClick() {
            this.$emit('click');
            this.jumpLink();
        }
    }
};
</script>
<style>
@import './index.css';
</style>
