<template>
  <div class="processTimeLine">
    <el-steps
      direction="vertical"
      :active="options.length"
      :space="80"
      :finish-status="finishStatus"
      :process-status="finishStatus"
    >
      <el-step
        v-for="(item, index) in options"
        :key="item.time + index"
        icon="el-icon-success"
        :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
          v-if="index + 1 !== options.length"
          slot="description"
          style="padding: 20px 0 0 0"
        >
          <p class="name">
            &nbsp;操&nbsp;作&nbsp;人&nbsp;：
            {{ item.action_name ? item.action_name : "未知" }}
          </p>
          <!-- <p class="item">
            账号来源：
            {{ item.source + "" === "2" ? "供应商端" : "采销平台" }}
          </p> -->
          <p class="item">
            账号来源：
            {{ item.level + "" === "1" ? "超管账号" : item.level + "" === "2" ? "业务公司账号" : "供应商账号" }}
          </p>
          <p class="time">
            {{ item.addtime }}
          </p>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import asyncRequest from '@/apis/components/process-time-line'
import resToken from '@/mixins/resToken'
export default {
  name: 'ProcessTimeLine',
  mixins: [resToken],
  props: ['type', 'orderCode', 'newTime'],
  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
        })
        if (res && res.code === 0 && res.data) {
          this.options = res.data
        } else {
          this.options = []
        }
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss">
.date-picker.el-input {
  // width: 150px !important;
}
</style>
