<template>
    <i-menu width="auto" class="doc-menu" :active-name="store.groupName" @on-select="selectGroup">
        <i-menu-group title="分组">
            <i-menu-item
                :name="group.name"
                v-for="group in store.groups"
                :key="group.name">
                {{group.desc}}
                <i-spin class="group-spin"
                    size="small"
                    v-if="store.groupName === group.name && store.featchApising">
                    <Icon type="load-c" size="14" class="spin-icon-load"></Icon>    
                </i-spin>
            </i-menu-item>
        </i-menu-group>
    </i-menu>
</template>

<script>
import {
    FETCH_GROUP_REQUEST,
    FETCH_API_REQUEST
} from 'store/types';
import {mapState} from 'vuex';
export default {
    name: 'DocMenu',
    computed: {
        ...mapState(['store'])
    },
    created() {
        this.$store.dispatch(FETCH_GROUP_REQUEST);
    },
    methods: {
        selectGroup(groupName) {
            this.$store.dispatch(FETCH_API_REQUEST, {groupName}).then(() => {
                window.scrollTo(0, 0);
            });
        }
    }
};
</script>

<style lang="scss">
.doc-menu {
    .ivu-menu-item {
        word-wrap: break-word;
    }

    .group-spin {
        display: inline-block;
        float: right;
    }

    .spin-icon-load {
        animation: ani-spin 1s linear infinite;
    }
    @keyframes ani-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
}
</style>