<!--
@name:日志
@author:
-->
<template>
  <div class="nodeTracking">


    <a-skeleton :loading="loading" active :rows="5" :paragraph="{ rows: 10 }">
      <a-timeline v-if="list.length > 0">
        <a-timeline-item v-for="(item, index) in list" :key="index">
          <div slot="dot">{{ index + 1 }}</div>
          <div class="w-300">{{ item.operateDate }}</div>
          <div class="w-150">{{ item.createperson }}</div>
          <div class="w-300">{{item.operateEvent   }}</div>
        </a-timeline-item>

      </a-timeline>
      <a-empty v-else >
        <p slot="description">暂无数据</p>
        <p-button icon="reload" slot="description" @click="getList">重新加载</p-button>
      </a-empty>
    </a-skeleton>
  </div>
</template>

<script>
import { operateLogView } from '../api'

export default {
  props: {
    editId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      list: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      if (!this.editId) return
      this.loading = true
      operateLogView(this,{ containerId: this.editId })
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.list = [...res.data]
          } else {
            this.$exception(res)
          }
        })
        .catch((res) => {
          this.$exception(res)
        })
    },
  },
}
</script>

<style lang="less">
.nodeTracking {
  padding-left: 20px;

  .w-300 {
    display: inline-block;
    padding-right: 20px;
  }

  .w-150 {
    display: inline-block;
    width: 130px;
    padding-right: 20px;
  }

  .ant-timeline-item-head-custom {
    top: 4px;
  }
}
</style>