<template>
  <view class="approval-history">
    <view v-for="(item, index) in historyList" :key="index" class="approval-item">
      <view class="timeline">
        <view class="circle" :class="{ 'circle-submit': item.action !== 'PENDING' }"></view>
        <view class="line" v-if="index < historyList.length - 1" :class="{ 'line-submit': item.action !== 'PENDING' }">
        </view>
      </view>
      <view class="content">
        <view class="header">
          <text class="name">{{ item.operatorName }}</text>
          <text class="date">{{ item.operationTime }}</text>
        </view>
        <view v-if="item.comment" class="approval-content">{{ item.action === 'REJECT' ? `审批驳回：${item.comment}`
          : `${item.comment}` }}</view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="historyList.length === 0" class="empty-state">
      <text class="empty-text">暂无审批记录</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ApproveHistory',
  props: {
    // 审批历史数据列表
    historyList: {
      type: Array,
      default: () => []
    },
    // 是否显示空状态
    showEmpty: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    // 格式化后的历史数据
    formattedHistory() {
      return this.historyList.map(item => ({
        operatorName: item.operatorName || '未知用户',
        operationTime: item.operationTime || '',
        comment: item.comment || '',
        status: item.status || '',
        nodeName: item.nodeName || ''
      }))
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.approval-history {
  padding: 15px;

  .approval-item {
    display: flex;
    margin-bottom: 1rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .timeline {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 12px;

      .circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #409EFF;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px #409EFF;
      }

      .circle-submit {
        background-color: #909399 !important;
        box-shadow: 0 0 0 2px #909399 !important;
      }

      .line {
        width: 2px;
        flex: 1;
        background-color: #409EFF;
        margin-top: 4px;
      }

      .line-submit {
        background-color: #909399 !important;
      }
    }

    .content {
      flex: 1;
      position: relative;
      bottom: 8rpx;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .name {
          font-size: 14px;
          font-weight: 500;
          color: #333;
        }

        .date {
          font-size: 12px;
          color: #999;
        }
      }

      .approval-content {
        font-size: 13px;
        color: #666;
        border: 1px solid #DDDDDD;
        line-height: 1.5;
        background-color: #f8f9fa;
        padding: 10px;
        border-radius: 6px;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 40px 0;

    .empty-text {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>