<template>
  <a-modal
    title="日志详情"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['url']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="请求参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-decorator="['requestparam']" :autosize="autosize" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="响应信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-decorator="['responsedata']" :autosize="autosize" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 15
        }
      },
      autosize: { minRows: 4, maxRows: 8 },
      visible: false,
      confirmLoading: false,
      record: {
        requestparam: {},
        responsedata: {}
      },
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // 初始化方法
    details(record) {
      this.visible = true
      setTimeout(() => {
        this.form.setFieldsValue({
          url: record.url,
          requestparam: record.requestparam,
          responsedata: record.responsedata
        })
      }, 100)
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
