<template>
  <div class="processTimeLine">
    <el-steps
      direction="vertical"
      :active="options.length"
      :space="80"
      :finish-status="finishStatus"
      :process-status="finishStatus"
    >
      <el-step
        icon="el-icon-success"
        v-for="(item, index) in options"
        :key="item.time + index"
        :finish-status="finishStatus"
        :process-status="finishStatus"
        style="margin: 0 0 0 150px; position: relative"
      >
        <div
          slot="title"
          style="position: absolute; width: 142px; left: -150px; text-align: right"
        >
          {{ item.status_name }}
        </div>
        <div slot="description">
          <p class="name">操作人： {{ item.action_name ? item.action_name : "未知" }}</p>
          <!-- <p class="item">
            {{ item.action_name?item.action_name:'未知'}}
          </p> -->
          <p class="time">
            {{ item.addtime }}
          </p>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import asyncRequest from "./http";
import resToken from "@/mixins/resToken";
export default {
  name: "processTimeLine",
  props: ["type", "orderCode", "newTime"],
  mixins: [resToken],
  data() {
    return {
      options: [],
      loading: false,
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.getList();
      }
    },
  },
  mounted() {
    this.getList();
  },

  methods: {
    async getList() {
      if (!this.loading) {
        this.loading = true;
        this.options = [];
        const res = await asyncRequest.list({
          type: this.type,
          orderCode: this.orderCode,
        });
        const { code, data } = await this.useResHandle(res);
        if (code === 0) {
          this.options = data;
        } else {
          this.options = [];
        }
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss">
.date-picker.el-input {
  // width: 150px !important;
}
</style>
