<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="InterfaceQueue">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="请求体"
                        type="info"
                        custom-icon="fa fa-hands-helping"
                        @click="open('request',row.id)"></Button>
                    <Button size="small"
                        title="响应体"
                        type="info"
                        custom-icon="fa fa-handshake"
                        @click="open('response',row.id)"></Button>
                </template>
            </view-table>
        </Card>
        <div>
            <Modal v-model="opened"
                scrollable
                :width="'800'">
                <div slot="header">
                    <slot name="header">
                        <span class="title">{{data.name}} </span>
                        <span class="description">{{ data.code}}</span>
                    </slot>
                </div>
                <div class="ivu-ml-8 ivu-mr-8">
                    <Form ref="form"
                        :model="data"
                        label-position="top"
                        label-colon="："
                        class="ivu-mt"
                        @submit.native.prevent>
                        <Row :gutter="24"
                            type="flex">
                            <Col :key="data.code"
                                v-bind="grid24">
                            <FormItem :label="data.name"
                                :prop="data.code"
                                :key="data.code">
                                <Input type="textarea"
                                    v-model="data.body"
                                    :readonly="'readonly'" />
                            </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </div>
                <div slot="footer">
                    <Button type="default"
                        custom-icon="fa fa-times"
                        @click="close">关闭</Button>
                </div>
            </Modal>

        </div>
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    import modelApi from '/src/api/model';
    export default {
        name: 'system-interface-interfaceQueue',
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                opened: false,
                data: {
                    code: '',
                    name: '',
                    body: ''
                }
            };
        },
        computed: {},
        created() {},
        methods: {
            close() {
                this.opened = false;
            },
            async open(type, id) {
                this.data.code = type;
                let res = await modelApi.get('InterfaceQueue', id);
                if (type === 'request') {
                    this.data.name = '请求体';
                    this.data.body = res.requestBody;
                } else {
                    this.data.name = '响应体';
                    this.data.body = res.responseBody;
                }
                this.opened = true;
            }
        }
    };
</script>