
<template>
  <view class="vertical-timeline">
    <uni-section :title="sectionTitle" type="line" padding>
      <view v-if="flatSteps.length > 0">
        <uni-steps
          :options="flatSteps"
          :active="activeStep"
          direction="column"
        />
      </view>
      <view v-else class="no-record">
        <uni-icons type="flag-filled" size="60" color="#ccc"></uni-icons>
        <text>暂无打卡记录</text>
      </view>
    </uni-section>
  </view>
</template>

<script>
export default {
  name: 'VerticalTimeline',
  props: {
    records: {
      type: Array,
      default: () => []
    },
    sectionTitle: {
      type: String,
      default: '打卡记录'
    },
    statusColorMap: {
      type: Object,
      default: () => ({
        正常: '#67C23A',
        迟到: '#F56C6C',
        早退: '#E6A23C',
        异常: '#909399'
      })
    }
  },
  computed: {
    activeStep() {
      return this.flatSteps.length - 1
    },
    flatSteps() {
      if (!this.records || this.records.length === 0) return []
      
      // 提取items数组并排序
      const items = this.records[0]?.items || []
      const sorted = [...items].sort((a, b) => 
        new Date(a.checkInTime) - new Date(b.checkInTime)
      )

      return sorted.map(item => ({
        title: this.formatTime(item.checkInTime),
        desc: `${this.getTypeText(item.checkInType)} - ${item.checkInPosition}`,
        color: this.getStatusColor(item)
      }))
    }
  },
  methods: {
    formatTime(timeStr) {
      // return timeStr ? timeStr.split(' ')[1].substr(0,5) : '--:--'
      return timeStr
    },
    getTypeText(type) {
      const map = {
        CLOCK_IN: '上班打卡',
        CLOCK_OUT: '下班打卡'
      }
      return map[type] || type
    },
    getStatusColor(item) {
      // 可根据实际业务逻辑判断状态
      return this.statusColorMap.正常
    }
  }
}
</script>

<style lang="scss" scoped>
.vertical-timeline {
  background-color: #fff;
  border-radius: 12px;
  padding: 10px 0;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.no-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;

  text {
    margin-top: 8px;
    font-size: 14px;
  }
}
</style>
