<template>
  <el-dialog :title="$t('ec.errorLog.title')" :visible.sync="visible" width="60%" class="error-dialog">
    <el-form>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.user')">
            <ec-user-modal :value="formItem.userId" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.tenant')">
            <ec-tenant :value="formItem.tenantId" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.app')">
            <ec-register-app
              :value="formItem.appId"
              :tenantId="formItem.tenantId"
              readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.serverHost')"><span>{{ formItem.serverHost }}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.serverIp')"><span>{{ formItem.serverIp }}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.remoteIp')"><span>{{ formItem.remoteIp }}</span></el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.exceptionName')"><span>{{ formItem.exceptionName }}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.method')"><span>{{ formItem.method }}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.createTime')"><span>{{ dateFormat(formItem.createTime) }}</span></el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('ec.errorLog.requestUri')"><span>{{ formItem.requestUri }}</span></el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item :label="$t('ec.errorLog.methodName')">
            <span>{{ formItem.methodClass + '.' + formItem.methodName + ':' + formItem.lineNumber}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item :label="$t('ec.errorLog.stackTrace')">
        <el-input type="textarea" :value="formItem.stackTrace" readonly :autosize="{minRows: 5, maxRows: 30}" />
      </el-form-item>
      <el-form-item :label="$t('ec.errorLog.userAgent')"><span>{{ formItem.userAgent }}</span></el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('ec.table.close' )}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { findByPrimaryKey } from 'ecip-web/api/vue/log/ecipErrorLogApi'
import XEUtils from "xe-utils";

export default {
  name: "ErrorLogDialog",
  data() {
    return {
      visible: false,
      formItem: {}
    }
  },
  methods: {
    async show({id}) {
      const { data } = await findByPrimaryKey(id)
      this.formItem = data
      this.visible = true
    },
    dateFormat(date) {
      return XEUtils.toDateString(date, 'yyyy-MM-dd HH:mm:ss')
    },
  }
}
</script>

<style scoped lang="scss">
.error-dialog ::v-deep .el-form-item {
  margin-bottom: 0;
}
.error-dialog ::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
