<template>
    <view :class="'weui-grids ' + extClass">
        <block v-for="(item, index) in innerGrids" :key="index">
            <navigator
                class="weui-grid"
                :target="item.target"
                :url="item.url"
                :open-type="item.openType"
                :app-id="item.appId"
                :path="item.path"
                :extra-data="item.extraData"
                :version="item.version"
                :hover-class="item.hoverClass"
                :hover-stop-propagation="item.hoverStopPropagation"
                :hover-start-time="item.hoverStartTime"
                :hover-stay-time="item.hoverStayTime"
                @success="parseEventDynamicCode($event, item.bindsuccess)"
                @fail="parseEventDynamicCode($event, item.bindfail)"
                @complete="parseEventDynamicCode($event, item.bindcomplete)"
            >
                <view class="weui-grid__icon">
                    <image class="weui-grid__icon_img" :src="item.imgUrl" alt></image>
                </view>
                <view class="weui-grid__label">{{ item.text }}</view>
            </navigator>
        </block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            innerGrids: [],
            defaultGridProps_var: {
                target: 'self',
                url: '',
                openType: 'navigate',
                delta: 1,
                appId: '',
                path: '',
                extraData: '',
                version: 'release',
                hoverClass: 'navigator-hover',
                hoverStopPropagation: false,
                hoverStartTime: 50,
                hoverStayTime: 600,
                bindsuccess() {},
                bindfail() {},
                bindcomplete() {}
            }
        };
    },
    options: {
        addGlobalClass: true,
        pureDataPattern: /^_/
    },
    props: {
        extClass: {
            type: String,
            default: ''
        },
        grids: {
            type: Array,
            default: () => []
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        attached() {
            if (this.grids) {
                this.setData({
                    innerGrids: this.grids.map((grid) => Object.assign({}, this._defaultGridProps, grid))
                });
            }
        },

        ready() {}
    },
    created: function () {}
};

/***/
</script>
<style>
.weui-grid .weui-grid__icon_img {
    width: 100%;
    height: 100%;
}
</style>
