<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="wrapper">
      <div>
        <div class="left-icon" v-if="item.time">
          <u-icon name="/static/images/imgs/blue.png" size="16"></u-icon>
          <u-line v-if="index != list.length - 1" direction="col" color="#3888FF" length="170px"></u-line>
        </div>
        <div class="left-icon" v-else>
          <u-icon name="/static/images/imgs/grey.png" size="16"></u-icon>
          <u-line v-if="index != list.length - 1" direction="col" color="#DBDBDB" length="170px"></u-line>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="time">{{ item.time }}</div>
        <div class="content-item">
          <div class="item">审批部门：{{ item.section }}</div>
          <div class="item">审批人：{{ item.name }}</div>
        </div>
        <div>
          审批意见：
          <br />
          <div class="opinion">{{ item.reason }}</div>
        </div>
        <div v-if="item.turnDownReason">
          驳回原因：
          <br />
          <div class="opinion">{{ item.turnDownReason }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      userId: uni.getStorageSync('userInfo').userId,
      list: []
    }
  },
  mounted() {
    console.log('🚀 ~ mounted ~ this.data:', this.userId)
    setTimeout(() => {
      this.list = this.data
      console.log('🚀 ~ mounted ~ this.list:', this.list)
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: flex-start;

  .left-icon {
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    font-weight: 400;
    font-size: 12px;
    color: #494949;

    .time {
      margin-bottom: 8px;
      color: rgba(15, 39, 75, 0.5);
    }
    .content-item {
      .item {
        margin-bottom: 8px;
        width: 80vw;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
      }
    }

    .opinion {
      margin: 8px 0;
      max-height: 50px;
      overflow: auto;
      color: rgba(15, 39, 75, 0.5);
      text-indent: 1em;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>
