<template>
  <div class="ob-log-content">
    <el-timeline>
      <el-timeline-item v-for="item in data" :key="item.SpanId" :timestamp="getTime(item.Timestamp)" placement="top">
        <el-card class="ob-log-card">
          <el-tag v-if="item.Level == 'WARNING'" type="warning">WARNING</el-tag>
          <el-tag v-else-if="item.Level == 'ERROR'" type="danger">ERROR</el-tag>
          <el-tag v-else-if="item.Level == 'INFO'" type="info">INFO</el-tag>
          <div class="ob-log-box">
            <div class="ob-log-title">Body：</div>
            {{ item.Body }}</div>
          <div class="ob-log-box">
            <div class="ob-log-title">LogAttributes：</div>
            <div v-for="(value, key, index) in item.LogAttributes" :key="index">{{ key }}: {{ value }}</div>
          </div>
        </el-card>
      </el-timeline-item>

    </el-timeline>
  </div>
</template>
<script >
import { dataList, dataList2 } from './data.js'
import moment from 'moment'
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: dataList
    }
  },
  created() {
    if (this.type === '片段日志') {
      this.data = JSON.parse(JSON.stringify(dataList2))
    } else {
      this.data = JSON.parse(JSON.stringify(dataList))
    }
  },
  methods: {
    getTime(timestamp) {
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang="scss" scoped>
.ob-log-box{
  margin-top:20px;
}
.ob-log-title{
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}
.ob-log-card{
  max-height: 250px;
  overflow: overlay;
}
</style>
