<!-- 审批历史 -->
<template>
  <div class="history-detail">
    <div class="history-item" v-for="(item, index) in historyData" :key="index" :class="{ hidden: !isOpen && index }">
      <div class="dot"></div>
      <div class="info-box">
        <span style="font-weight: 600; flex: 1 0 33%">{{ item.node_desc }}</span>
        <span style="flex: 1 0 33%; text-align: center;">{{ item.action_type_desc }}</span>
        <span style="font-size: 0.24rem;flex: 1 0 33%;  text-align: right;">{{ item.create_date_fmt.split(' ')[0] }}</span>
        <!-- <span style="flex: 1 0 100%">{{ item.comment_text }}</span> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'isOpen',
    'historyData'
  ],
  data() {
    return {
      // historyData: [
      //   {
      //     title: '20主机厂初审中',
      //     date: '2023/1/4 18:01:43',
      //     remark: ''
      //   },
      //   {
      //     title: '20主机厂初审中',
      //     date: '2023/1/4 18:01:43',
      //     remark: ''
      //   },
      //   {
      //     title: '20主机厂初审中',
      //     date: '2023/1/4 18:01:43',
      //     remark: ''
      //   },
      //   {
      //     title: '20主机厂初审中',
      //     date: '2023/1/4 18:01:43',
      //     remark: ''
      //   },
      // ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.history-detail {
  color: white;
  padding: 10px 10px 0;
  font-size: 0.26rem;

  .history-item {
    display: flex;
    justify-content: space-around;
    height: 70px;

    &:last-child .dot {
      background-repeat: no-repeat;
    }

    &:nth-child(1) .dot {
      background-repeat: repeat;
    }
  }
}

.dot {
  height: 70px;
  width: 2px;
  z-index: 0;
  background: linear-gradient(to top, #fff, #fff 0.05rem, transparent 0.05rem, transparent);
  background-size: 100% 0.16rem;

  &::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    transform: translateX(-0.11rem);
    z-index: 11;
    background-color: #a8a9aa;
  }
}


.hidden {
  visibility: hidden;
}

.info-box {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 60%;
  max-width: 85%;
}
</style>