<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" class="act-content" v-if="act.__rendered">
                <h2>接口路径</h2>
                <div class="path">{{getPath(act)}}</div>
                <div v-if="showUrlParams(act)">
                    <h2>提交参数</h2>
                    <Table :columns="reqColumns" :data="paramsColumns(act)"></Table>
                </div>
                <div v-if="act.reqMethod === 'JSON'">
                    <h2>提交示例</h2>
                    <json-view :value="paramsJsonColumns(act)" icon-prefix="ivu-icon" @copied="copied"></json-view>
                </div>
                <div v-if="act.responseInfo.data">
                    <h2>返回示例</h2>
                    <json-view :value="act.responseInfo.data" icon-prefix="ivu-icon" @copied="copied"></json-view>
                </div>
                <div v-if="act.responseInfo.codeDesc.length">
                    <h2>状态码</h2>
                    <Table :width="500" :columns="codeColumns" :data="act.responseInfo.codeDesc"></Table>
                </div>
            </div>
        </Panel>
    </Collapse>
</template>

<script>
import _ from 'lodash';
import JsonView from 'vue-json-viewer';

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

            if (act) {
                act.__rendered = true;
            }
        },
        getPath(act) {
            if (act.reqMethod === 'JSON') {
                return act.path;
            }
            const params = act.paramInfo.map(param => {
                return `${param.name}=${param.defaultValue}`;
            }).join('&');

            if (act.path.indexOf('method') >= 0) {
                return `/?${act.path}&${params}`;
            }
            return `/?${params}`;
        },
        paramsColumns(act) {
            return act.paramInfo[0].data ? this.transformParams(act.paramInfo[0].data) : act.paramInfo;
        },
        paramsJsonColumns(act) {
            if (act.paramInfo.length && act.paramInfo[0].data !== 'object') {
                let data = {};

                act.paramInfo.forEach(param => {
                    data[param.name] = param.defaultValue;
                });
                return data;
            }
            return act.paramInfo[0].data;
        },
        showUrlParams(act) {
            return (act.reqMethod === 'URL' && act.paramInfo.length) ||
                (act.reqMethod === 'JSON' && act.paramInfo.length && typeof act.paramInfo[0].data !== 'object');
        },
        transformParams(data) {
            return _.map(data, (v, k) => {
                return {
                    name: k,
                    paramType: typeof v
                };
            });
        },
        copied() {
            this.$Message.success('复制成功');
        }
    },
    components: {
        JsonView
    }
};
</script>

<style lang="scss">
.act-content {
    padding: 0 16px;

    .path {
        font-size: 15px;
    }
}
</style>