<template>
    <Collapse accordion v-model="openAct" @on-change="actChange">
        <Panel :name="act.name" v-for="act in list" :key="act.name">
            {{act.name}}({{act.desc}})
            <div slot="content" v-if="act.__rendered">
                <h2>接口路径</h2>
                <div class="path">{{act.path}}</div>
                <h2>提交参数</h2>
                <Table :columns="reqColumns" :data="act.paramInfo"></Table>
                <h2>返回参数</h2>
                <Table :columns="resColumns" :data="[act.responseInfo]"></Table>
            </div>
        </Panel>
    </Collapse>
</template>

<script>
export default {
    name: 'DocActList',
    props: {
        list: Array
    },
    data() {
        return {
            openAct: [],
            reqColumns: [{
                title: '名称',
                key: 'name'
            }, {
                title: '类型',
                key: 'paramType'
            }, {
                title: '必填',
                key: 'required'
            }, {
                title: '默认值',
                key: 'defaultValue'
            }, {
                title: '描述',
                key: 'desc'
            }],
            resColumns: [{
                title: '类型',
                key: 'clazz'
            }, {
                title: '描述',
                key: 'desc'
            }],
            reqData: [],
            resData: []
        };
    },
    methods: {
        actChange(open) {
            let act = this.list.find(a => a.name === open[0]);

            if (act) {
                act.__rendered = true;
            }
        }
    }
};
</script>

<style lang="scss">
.path {
    margin-bottom: 10px;
}
</style>