<template>
  <view class="reim-list-page">
    <view class="header-bar">
      <view class="title">报销列表</view>
      <fui-button
        background="transparent"
        color="#24BA9F"
        borderColor="#24BA9F"
        width="180rpx"
        height="64rpx"
        radius="32rpx"
        @click="goAdd">
        新增报销
      </fui-button>
    </view>
    <view v-if="list.length === 0" class="empty-tip">暂无报销记录</view>
    <view v-for="item in list" :key="item.id" class="reim-card" @click="goDetail(item)">
      <view class="row">
        <view class="label">金额：</view>
        <view class="value">￥{{ item.amount }}</view>
      </view>
      <view class="row">
        <view class="label">描述：</view>
        <view class="value">{{ item.description }}</view>
      </view>
      <view class="row">
        <view class="label">发票/收据：</view>
        <view class="value">
          <image v-if="item.receipt_url" :src="item.receipt_url" class="receipt-img" mode="aspectFit" />
          <text v-else>无附件</text>
        </view>
      </view>
      <view class="row">
        <view class="label">状态：</view>
        <view :class="['value', 'status-' + item.status]">{{ statusMap[item.status] || item.status }}</view>
      </view>
      <view class="row">
        <view class="label">创建时间：</view>
        <view class="value">{{ item.created_at }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';
export default {
  data() {
    return {
      list: [],
      statusMap: {
        pending: '待审批',
        approved: '已批准',
        rejected: '已拒绝',
      },
    }
  },
  async onShow() {
    await this.reimbursementList();
  },
  methods: {
	async reimbursementList(){
		let res = await apiRoute.reimbursement_list({})
		this.list = res.data;
		
	},
    goAdd() {
      uni.navigateTo({
        url: '/pages/market/reimbursement/add'
      });
    },
    goDetail(item) {
      // 待审批状态可编辑，否则只能查看
      if (item.status === 'pending') {
        uni.navigateTo({
          url: `/pages/market/reimbursement/add?id=${item.id}`
        });
      } else {
        uni.navigateTo({
          url: `/pages/market/reimbursement/detail?id=${item.id}`
        });
      }
    }
  }
}
</script>

<style lang="less" scoped>
.reim-list-page {
  min-height: 100vh;
  background: #292929;
  padding-bottom: 120rpx;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 32rpx 0 32rpx;
  .title {
    font-size: 36rpx;
    color: #fff;
    font-weight: bold;
  }
}
.empty-tip {
  color: #888;
  text-align: center;
  margin: 80rpx 0;
}
.reim-card {
  background: #434544;
  border-radius: 18rpx;
  margin: 32rpx;
  margin-bottom: 0;
  padding: 32rpx 24rpx 24rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  .row {
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;
    .label {
      color: #aaa;
      font-size: 26rpx;
      width: 140rpx;
      flex-shrink: 0;
    }
    .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: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      background: #222;
      border: 1rpx solid #333;
    }
  }
}
</style> 