<template>
  <div>

    <el-row style="padding: 10px 0px;">
      <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="right" label-width="80px" inline class="demo-table-expand">
              <el-form-item label="日志类型">
                <el-tag type="danger">{{ props.row.type }}</el-tag>
              </el-form-item>
              <el-form-item v-if="props.row.logFrom === '1' || !props.row.logFrom" label="请求地址">
                <span class="code">{{ props.row.requestUrl }}</span>
              </el-form-item>
              <el-form-item v-if="props.row.logFrom === '2'" label="错误页面">
                <span class="code">{{ props.row.requestUrl }}</span>
              </el-form-item>
              <el-form-item v-if="props.row.logFrom === '1' || !props.row.logFrom" label="类路径">
                <span class="code">{{ props.row.className }}</span>
              </el-form-item>
              <el-form-item v-if="props.row.logFrom === '1' || !props.row.logFrom" label="请求方法">
                <span class="code">{{ props.row.method }}</span>
              </el-form-item>
              <el-form-item v-if="props.row.logFrom === '1' || !props.row.logFrom" label="请求参数">
                <span class="code">{{ props.row.request }}</span>
              </el-form-item>
              <el-form-item label="异常详细">
                <div class="code">
                  <span>{{ props.row.exceptionDetail }}</span>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="username" label="昵称" show-overflow-tooltip />
        <el-table-column prop="remarks" label="描述" show-overflow-tooltip />
        <el-table-column prop="ip" label="IP" width="115" />
        <el-table-column prop="ipAddress" label="地址" show-overflow-tooltip />
        <el-table-column label="系统-浏览器-版本号" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.os }} - {{ scope.row.browser }} - {{ scope.row.browserVersion }}
          </template>
        </el-table-column>
        <el-table-column label="请求耗时" width="80" align="center">
          <template slot-scope="scope">
            <label v-if="!scope.row.time"> - </label>
            <el-tag v-else-if="scope.row.time <= 500" type="success">{{ scope.row.time }} ms</el-tag>
            <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }} ms</el-tag>
            <el-tag v-else type="danger">{{ scope.row.time }} ms</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="错误来源" width="80" align="center">
          <template slot-scope="scope">
            <label v-if="!scope.row.logFrom"> - </label>
            <el-tag v-if="scope.row.logFrom === '1'" type="info">后端</el-tag>
            <el-tag v-else-if="scope.row.logFrom === '2'">前端</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createAt" label="创建日期" width="135" />
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ErrorLog',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [{
        }]
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {}
}

</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 70px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.demo-table-expand .el-form-item__content {
  font-size: 12px;
}
.code {
  color: #505050;
  padding: .25rem .5rem;
  margin: 0;
  font-size: .85em;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}
</style>
