<template>
    <div class="ctrl-list-box">
        <h2>
            <span v-if="store.groupName">分组：{{store.groupName}}</span> 
            <span v-if="store.apiKeyword">关键词：{{store.apiKeyword}}</span>
            <span v-if="store.apis.length">
                共
                <span v-if="store.featchApising">...</span>
                <span v-else>{{store.apiCount}}</span>
                条：
            </span>
        </h2>
        <div class="ctrl-list">
            <Collapse accordion v-if="store.apis.length">
                <Panel :name="ctrl.name" v-for="ctrl in store.apis" :key="ctrl.name">
                    {{ctrl.name}}({{ctrl.desc}})
                    <div slot="content">
                        <doc-act-list :list="ctrl.operationInfoList"></doc-act-list>
                    </div>
                </Panel>
            </Collapse>
            <p class="no-data" v-else>
                <span v-if="store.groupName || store.apiKeyword">未查询到结果</span>
                <span v-else>请选择分组或者输入查询条件</span>
            </p>
        </div>
        <Page
            v-if="store.apis.length"
            class="pager"
            :total="store.apiCount"
            :current="store.apiPage"
            :page-size="store.apiRows"
            show-sizer
            show-total
            @on-page-size-change="pageSizeChange"
            @on-change="pageChange"></Page>
    </div>
</template>

<script>
import {
    FETCH_API_REQUEST
} from 'store/types';
import {mapState} from 'vuex';
export default {
    name: 'DocCtrlList',
    computed: {
        ...mapState(['store'])
    },
    methods: {
        pageChange(page) {
            this.$store.dispatch(FETCH_API_REQUEST, {page: page});
        },
        pageSizeChange(rows) {
            this.$store.dispatch(FETCH_API_REQUEST, {rows: rows});
        }
    }
};
</script>

<style lang="scss">
.ctrl-list-box {
    h2 {
        margin-bottom: 12px;
    }
    padding: 20px;

    .ctrl-list {
        margin-bottom: 20px;
    }

    .no-data {
        text-align: center;
        line-height: 50px;
        font-size: 12px;
        color: #9ea7b4;
    }

    .pager {
        text-align: center;
    }
}
</style>