<template>
  <view class="reim-detail-page">
    <view class="header-bar">
      <view class="title">报销详情</view>
    </view>
    <view class="detail-box">
      <view class="row">
        <view class="label">报销金额</view>
        <view class="value">￥{{ detail.amount }}</view>
      </view>
      <view class="row">
        <view class="label">报销描述</view>
        <view class="value">{{ detail.description }}</view>
      </view>
      <view class="row">
        <view class="label">发票/收据</view>
        <view class="value">
          <image v-if="detail.receipt_url && isImage(detail.receipt_url)" :src="detail.receipt_url" class="receipt-img" mode="aspectFit" />
          <view v-else-if="detail.receipt_url" class="file-link">{{ detail.receipt_url }}</view>
          <text v-else>无附件</text>
        </view>
      </view>
      <view class="row">
        <view class="label">状态</view>
        <view :class="['value', 'status-' + detail.status]">{{ statusMap[detail.status] || detail.status }}</view>
      </view>
      <view class="row">
        <view class="label">创建时间</view>
        <view class="value">{{ detail.created_at }}</view>
      </view>
      <view class="row">
        <view class="label">修改时间</view>
        <view class="value">{{ detail.updated_at }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      statusMap: {
        pending: '待审批',
        approved: '已批准',
        rejected: '已拒绝',
      },
    }
  },
  onLoad(options) {
    if (options.id) {
      this.fetchDetail(options.id);
    } else {
      uni.showToast({ title: '缺少报销ID', icon: 'none' });
      uni.navigateBack();
    }
  },
  methods: {
    fetchDetail(id) {
      // 模拟接口获取详情
      uni.showLoading({ title: '加载中...' });
      setTimeout(() => {
         const mockData = {
          id: id,
          amount: 300.00,
          description: '办公用品采购（已批准）',
          receipt_url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          status: 'approved',
          created_at: '2024-06-02 09:30',
          updated_at: '2024-06-03 12:00',
        };
        this.detail = mockData;
        uni.hideLoading();
      }, 500);
    },
    isImage(url) {
      if (!url) return false;
      return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url)
    }
  }
}
</script>

<style lang="less" scoped>
.reim-detail-page {
  min-height: 100vh;
  background: #292929;
}
.header-bar {
  padding: 32rpx 32rpx 0 32rpx;
  .title {
    font-size: 36rpx;
    color: #24BA9F;
    font-weight: bold;
  }
}
.detail-box {
  margin: 32rpx;
  background: #434544;
  border-radius: 18rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
}
.row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32rpx;
  .label {
    color: #aaa;
    font-size: 28rpx;
    width: 180rpx;
    flex-shrink: 0;
    margin-top: 10rpx;
  }
  .value {
    color: #fff;
    font-size: 28rpx;
    word-break: break-all;
  }
  .status-pending { color: #f0ad4e; }
  .status-approved { color: #24BA9F; }
  .status-rejected { color: #e74c3c; }
  .receipt-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background: #222;
    border: 1rpx solid #333;
  }
  .file-link {
    color: #24BA9F;
    font-size: 26rpx;
    word-break: break-all;
  }
}
</style> 