<template>
  <a-modal
    :title="$t('日志详情')"
    :visible="visible"
    :destroy-on-close="true"
    width="60%"
    wrapClassName="operation_log_detail"
    @cancel="visible = false"
    :ok-text="$t('保存')"
    :cancel-text="$t('取消')"
  >
    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        @click="visible = false"
        >{{ $t('确 认') }}</a-button
      >
    </template>
    <a-form-model
      ref="logfrom"
      :model="logInfo"
      :labelCol="{ span: 4 }"
      :wrapperCol="{ span: 20 }"
    >
      <a-row :gutter="12">
        <a-col :span="12">
          <a-form-model-item :label="$t('操作模块')">
            {{ logInfo.appName }} / {{ logInfo.title }} / {{ logInfo.businessName }}
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('登录信息')">
            {{ logInfo.operName }} / {{ logInfo.operIp }} / {{ logInfo.operLocation }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="12">
        <a-col :span="12">
          <a-form-model-item :label="$t('请求地址')">
            {{ logInfo.operUrl }}
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('请求方式')">
            {{ logInfo.requestMethod }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="12">
        <a-col :span="12">
          <a-form-model-item :label="$t('操作状态')">
            <a-tag
              class="tag_or"
              v-if="logInfo.status == '0'"
              >{{ $t('正常') }}</a-tag
            >
            <a-tag
              class="tag_entry"
              v-else
              >{{ $t('异常') }}</a-tag
            >
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('操作时间')">
            {{ logInfo.createTime }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-model-item
            :label="$t('操作方法')"
            :labelCol="{ span: 2 }"
            :wrapperCol="{ span: 22 }"
          >
            <div class="log_info">{{ logInfo.method }}</div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-model-item
            :label="$t('请求参数')"
            :labelCol="{ span: 2 }"
            :wrapperCol="{ span: 22 }"
          >
            <div class="log_info result">{{ logInfo.operParam }}</div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-model-item
            :label="$t('返回参数')"
            :labelCol="{ span: 2 }"
            :wrapperCol="{ span: 22 }"
          >
            <div class="log_info result">{{ logInfo.jsonResult }}</div>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
  export default {
    props: {
      show: [Boolean],
      info: [Object],
    },
    computed: {
      visible: {
        get() {
          return this.show;
        },
        set(val) {
          this.$emit('update:show', val);
        },
      },
    },
    watch: {
      visible(val) {
        if (val) {
          this.logInfo = this.info;
        }
      },
    },
    data() {
      return {
        logInfo: {},
      };
    },
    created() {},
    methods: {},
  };
</script>
<style lang="less" scoped>
  .operation_log_detail {
    .log_info {
      word-break: break-all;
      &.result {
        max-height: 300px;
        overflow: hidden;
        overflow-y: scroll;
      }
    }
    .ant-form {
      /deep/.ant-form-item-label {
        font-weight: bolder;
      }
    }
  }
</style>
