<template>
    <div class="tabMain">
          <div
            class="flowText"
            v-for="(item, index) in workFlowList"
            :key="index"
          >
            <div :class="[item.operateUserName ? 'borderText' : 'borderText1']">
              <p>{{ item.operateUserName + item.workTicketStatusDesc }}</p>
              <p>完成时间：{{ item.operateTime }}</p>
            </div>
            <p
              class="flowText"
              v-show="index !== workFlowList.length - 1"
            >
              <b>↑</b>
            </p>
          </div>
        </div>
</template>

<script>
export default {
  name: 'ProcessInformation',
  props: {
    workFlowList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.flowText {
  text-align: center;
  margin-top: 10px;
  span {
    border: 2px solid #1c4990;
    // background: #1c4990;
    color: #1c4990;
    border-radius: 3px;
    padding: 10px 20px;
    // font-weight: 600;
    font-size: 16px;
  }
  b {
    font-size: 20px;
    font-weight: 900;
    color: #1c4990;
  }
  .borderText {
  display: inline-block;
  border: 2px solid #1c4990;
  color: #1c4990;
  border-radius: 3px;
  padding: 5px 40px;
  // font-weight: 600;
  font-size: 16px;
  p {
    &:last-child {
      color: #969799;
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
.borderText1 {
  display: inline-block;
  border: 2px solid red;
  color: red;
  border-radius: 3px;
  padding: 5px 40px;
  // font-weight: 600;
  font-size: 16px;
  p {
    &:last-child {
      color: red;
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
}
</style>
