<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader :title="$route.meta.title"
                :content="$route.meta.description"
                hidden-breadcrumb />
        </div>
        <Card :bordered="false"
            dis-hover
            class="ivu-mt">
            <view-table ref="table"
                view-code="ApiLog">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="请求"
                        type="info"
                        custom-icon="fa fa-cloud-upload-alt"
                        @click="openRequest(row)"></Button>
                    <Button size="small"
                        title="响应"
                        type="info"
                        custom-icon="fa fa-cloud-download-alt"
                        @click="openResponse(row)"></Button>
                </template>
            </view-table>
        </Card>
        <Modal v-model="isShowRequest"
            scrollable
            :width="800">
            <div slot="header">
                <slot name="header">
                    <span class="title">请求</span>
                    <span class="description">Request</span>
                </slot>
            </div>
            <div class="ivu-ml-8 ivu-mr-8">
                <Row :gutter="24"
                    type="flex">
                    <Col span="12">
                    <pre>{{ json }}</pre>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="default"
                    custom-icon="fa fa-times"
                    @click="isShowRequest=false">
                    关闭
                </Button>
            </div>
        </Modal>
        <Modal v-model="isShowResponse"
            scrollable
            :width="800">
            <div slot="header">
                <slot name="header">
                    <span class="title">响应</span>
                    <span class="description">Response</span>
                </slot>
            </div>
            <div class="ivu-ml-8 ivu-mr-8">
                <Row :gutter="24"
                    type="flex">
                    <Col span="12">
                    <pre>{{ json }}</pre>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="default"
                    custom-icon="fa fa-times"
                    @click="isShowResponse=false">
                    关闭
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';

    export default {
        name: 'system-apiLog',
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                isShowRequest: false,
                isShowResponse: false,
                json: null
            };
        },
        computed: {},
        created() {},
        methods: {
            openRequest(row) {
                this.json = JSON.stringify(JSON.parse(row.requestBody), null, 2);
                this.isShowRequest = true;
            },
            openResponse(row) {
                this.json = JSON.stringify(JSON.parse(row.responseBody), null, 2);
                this.isShowResponse = true;
            }
        }
    };
</script>
