<!--
@name: 待审核-操作日志
@author: 张泽贤
@time: 2022-04-13
-->
<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.operateEvent }}</div>
          <div class="w-150">{{ item.userName }}</div>
          <div class="w-300">{{ item.operateDate }}</div>
        </a-timeline-item>

        <!-- <a-timeline-item>
        <div slot="dot">1</div>
        <div class="w-150">创建</div>
        <div class="w-150">大富</div>
        <div class="w-150">2020-03-23 00:00:00</div>
      </a-timeline-item>
      <a-timeline-item>
        <div slot="dot">2</div>
        <div class="w-150">提交</div>
        <div class="w-150">大富</div>
        <div class="w-150">2020-03-23 00:00:00</div>
      </a-timeline-item>
      <a-timeline-item>
        <div slot="dot">3</div>
        <div class="w-150">回退</div>
        <div class="w-150">大富</div>
        <div class="w-150">2020-03-23 00:00:00</div>
      </a-timeline-item>
      <a-timeline-item>
        <div slot="dot">4</div>
        <div class="w-150">修改</div>
        <div class="w-150">大富</div>
        <div class="w-150">2020-03-23 00:00:00</div>
      </a-timeline-item>
      <a-timeline-item>
        <div slot="dot">5</div>
        <div class="w-150">提交</div>
        <div class="w-150">大富</div>
        <div class="w-150">2020-03-23 00:00:00</div>
      </a-timeline-item>
      <a-timeline-item>
        <div slot="dot">6</div>
        <div class="w-150">审核</div>
        <div class="w-150">大富</div>
        <div class="w-150">2020-03-23 00:00:00</div>
      </a-timeline-item> -->
      </a-timeline>
      <a-empty v-else style="margin-top: 100px">
        <p slot="description">暂无数据</p>
        <p-button icon="reload" slot="description" @click="getList">重新加载</p-button>
      </a-empty>
    </a-skeleton>
  </div>
</template>

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

export default {
  props: {
    editId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      list: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      if (!this.editId) return
      operateLogView({ shipbillId: 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;
    width: 280px;
    padding-right: 20px;
  }

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

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