<template>
  <view class="service-records-page">
    <!-- 头部区域 -->
    <NavHeader title="服务记录" />

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'pending_payment' }"
        @click="switchTab('pending_payment')"
      >
        <text class="tab-text">待支付</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'pending_verification' }"
        @click="switchTab('pending_verification')"
      >
        <text class="tab-text">待核销</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'completed' }"
        @click="switchTab('completed')"
      >
        <text class="tab-text">已完成</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'cancelled' }"
        @click="switchTab('cancelled')"
      >
        <text class="tab-text">已取消</text>
      </view>
    </view>

    <!-- 列表内容 -->
    <scroll-view
      class="record-list"
      scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="handleRefresh"
      @scrolltolower="handleLoadMore"
      :lower-threshold="100"
    >
      <!-- 空数据提示 -->
      <view class="empty-state" v-if="!loading && currentList.length === 0">
        <image
          class="empty-icon"
          src="/static/home/entry_icon.png"
          mode="aspectFit"
        ></image>
        <text class="empty-text">暂无{{ getTabLabel() }}记录</text>
      </view>

      <!-- 记录列表项 -->
      <view
        class="record-item"
        v-for="(item, index) in currentList"
        :key="index"
        @click="handleRecordClick(item)"
      >
        <view class="record-header">
          <view class="record-title-row">
            <text class="record-title">{{ item.serviceName }}</text>
            <view class="status-badge" :class="getStatusClass(item.status)">
              <text class="status-text">{{ getStatusText(item.status) }}</text>
            </view>
          </view>
          <text class="record-time">{{ item.createTime }}</text>
        </view>

        <view class="record-content">
          <view class="record-info-row">
            <text class="info-label">服务类型：</text>
            <text class="info-value">{{ item.serviceType }}</text>
          </view>
          <view class="record-info-row">
            <text class="info-label">服务门店：</text>
            <text class="info-value">{{ item.storeName }}</text>
          </view>
          <view class="record-info-row">
            <text class="info-label">订单号：</text>
            <text class="info-value">{{ item.orderNo }}</text>
          </view>
          <view class="record-info-row">
            <text class="info-label">订单金额：</text>
            <text class="info-value price">¥{{ item.amount }}</text>
          </view>
        </view>

        <!-- 操作按钮区域 -->
        <view class="record-actions" v-if="item.status === 'pending_payment'">
          <button
            class="action-btn cancel-btn"
            @click.stop="handleCancel(item)"
          >
            取消订单
          </button>
          <button class="action-btn pay-btn" @click.stop="handlePay(item)">
            立即支付
          </button>
        </view>
        <view
          class="record-actions"
          v-else-if="item.status === 'pending_verification'"
        >
          <button
            class="action-btn detail-btn"
            @click.stop="handleViewDetail(item)"
          >
            查看详情
          </button>
        </view>
        <view class="record-actions" v-else-if="item.status === 'completed'">
          <button
            class="action-btn detail-btn"
            @click.stop="handleViewDetail(item)"
          >
            查看详情
          </button>
          <button
            class="action-btn review-btn"
            @click.stop="handleReview(item)"
          >
            评价
          </button>
        </view>
        <view class="record-actions" v-else-if="item.status === 'cancelled'">
          <button
            class="action-btn detail-btn"
            @click.stop="handleViewDetail(item)"
          >
            查看详情
          </button>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view class="load-more" v-if="currentList.length > 0">
        <text v-if="loadingMore" class="load-more-text">加载中...</text>
        <text v-else-if="!hasMore" class="load-more-text">没有更多数据了</text>
        <text v-else class="load-more-text">上拉加载更多</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavHeader from "@/components/NavHeader/NavHeader.vue";

export default {
  components: {
    NavHeader
  },
  data() {
    return {
      currentTab: "pending_payment", // 当前选中的 tab
      refreshing: false,
      loading: false,
      loadingMore: false,
      hasMore: true,
      pageNo: 1,
      pageSize: 10,
      // 假数据
      mockData: {
        pending_payment: [
          {
            id: 1,
            orderNo: "ORD20250101001",
            serviceName: "汽车维修保养",
            serviceType: "维修服务",
            storeName: "XX汽车维修中心",
            amount: "299.00",
            createTime: "2025-01-15 10:30:00",
            status: "pending_payment",
          },
          {
            id: 2,
            orderNo: "ORD20250101002",
            serviceName: "家电清洗服务",
            serviceType: "清洗服务",
            storeName: "XX家电清洗店",
            amount: "158.00",
            createTime: "2025-01-14 15:20:00",
            status: "pending_payment",
          },
          {
            id: 3,
            orderNo: "ORD20250101003",
            serviceName: "手机维修",
            serviceType: "维修服务",
            storeName: "XX手机维修店",
            amount: "199.00",
            createTime: "2025-01-13 09:15:00",
            status: "pending_payment",
          },
        ],
        pending_verification: [
          {
            id: 4,
            orderNo: "ORD20250101004",
            serviceName: "汽车维修保养",
            serviceType: "维修服务",
            storeName: "XX汽车维修中心",
            amount: "299.00",
            createTime: "2025-01-10 14:30:00",
            status: "pending_verification",
          },
          {
            id: 5,
            orderNo: "ORD20250101005",
            serviceName: "家电清洗服务",
            serviceType: "清洗服务",
            storeName: "XX家电清洗店",
            amount: "158.00",
            createTime: "2025-01-09 11:20:00",
            status: "pending_verification",
          },
        ],
        completed: [
          {
            id: 6,
            orderNo: "ORD20250101006",
            serviceName: "汽车维修保养",
            serviceType: "维修服务",
            storeName: "XX汽车维修中心",
            amount: "299.00",
            createTime: "2025-01-05 16:30:00",
            status: "completed",
          },
          {
            id: 7,
            orderNo: "ORD20250101007",
            serviceName: "家电清洗服务",
            serviceType: "清洗服务",
            storeName: "XX家电清洗店",
            amount: "158.00",
            createTime: "2025-01-04 10:20:00",
            status: "completed",
          },
          {
            id: 8,
            orderNo: "ORD20250101008",
            serviceName: "手机维修",
            serviceType: "维修服务",
            storeName: "XX手机维修店",
            amount: "199.00",
            createTime: "2025-01-03 08:15:00",
            status: "completed",
          },
        ],
        cancelled: [
          {
            id: 9,
            orderNo: "ORD20250101009",
            serviceName: "汽车维修保养",
            serviceType: "维修服务",
            storeName: "XX汽车维修中心",
            amount: "299.00",
            createTime: "2025-01-02 14:30:00",
            status: "cancelled",
          },
          {
            id: 10,
            orderNo: "ORD20250101010",
            serviceName: "家电清洗服务",
            serviceType: "清洗服务",
            storeName: "XX家电清洗店",
            amount: "158.00",
            createTime: "2025-01-01 11:20:00",
            status: "cancelled",
          },
        ],
      },
    };
  },
  computed: {
    currentList() {
      return this.mockData[this.currentTab] || [];
    },
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    // 切换 Tab
    switchTab(tab) {
      if (this.currentTab === tab) return;
      this.currentTab = tab;
      this.pageNo = 1;
      this.hasMore = true;
      this.loadData();
    },
    // 获取 Tab 标签文本
    getTabLabel() {
      const labels = {
        pending_payment: "待支付",
        pending_verification: "待核销",
        completed: "已完成",
        cancelled: "已取消",
      };
      return labels[this.currentTab] || "";
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        pending_payment: "待支付",
        pending_verification: "待核销",
        completed: "已完成",
        cancelled: "已取消",
      };
      return statusMap[status] || "";
    },
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        pending_payment: "status-pending",
        pending_verification: "status-verification",
        completed: "status-completed",
        cancelled: "status-cancelled",
      };
      return classMap[status] || "";
    },
    // 加载数据
    loadData() {
      this.loading = true;
      // 模拟数据加载
      setTimeout(() => {
        this.loading = false;
        this.refreshing = false;
        this.loadingMore = false;
        // 这里使用假数据，实际应该调用接口
      }, 500);
    },
    // 下拉刷新
    handleRefresh() {
      this.refreshing = true;
      this.pageNo = 1;
      this.hasMore = true;
      this.loadData();
    },
    // 上拉加载更多
    handleLoadMore() {
      if (this.hasMore && !this.loadingMore && !this.loading) {
        this.loadingMore = true;
        this.pageNo += 1;
        // 模拟加载更多
        setTimeout(() => {
          this.loadingMore = false;
          // 假数据没有更多了
          this.hasMore = false;
        }, 500);
      }
    },
    // 点击记录项
    handleRecordClick(item) {
      // 可以跳转到详情页
      console.log("点击记录:", item);
    },
    // 取消订单
    handleCancel(item) {
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "订单已取消",
              icon: "success",
            });
            // 这里应该调用接口取消订单，然后刷新列表
            // 暂时从待支付列表中移除
            const index = this.mockData.pending_payment.findIndex(
              (i) => i.id === item.id
            );
            if (index > -1) {
              this.mockData.pending_payment.splice(index, 1);
              // 添加到已取消列表
              this.mockData.cancelled.unshift({
                ...item,
                status: "cancelled",
              });
            }
          }
        },
      });
    },
    // 立即支付
    handlePay(item) {
      uni.showToast({
        title: "跳转支付页面",
        icon: "none",
      });
      // 这里应该跳转到支付页面
      // uni.navigateTo({
      //   url: `/pages/payment/payment?orderNo=${item.orderNo}&amount=${item.amount}`
      // });
    },
    // 查看详情
    handleViewDetail(item) {
      uni.showToast({
        title: "查看详情",
        icon: "none",
      });
      // 这里应该跳转到详情页面
      // uni.navigateTo({
      //   url: `/pages/order/detail?orderNo=${item.orderNo}`
      // });
    },
    // 评价
    handleReview(item) {
      uni.showToast({
        title: "跳转评价页面",
        icon: "none",
      });
      // 这里应该跳转到评价页面
      // uni.navigateTo({
      //   url: `/pages/order/review?orderNo=${item.orderNo}`
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.service-records-page {
  min-height: 100vh;
  background: #e2e8f1;
  display: flex;
  flex-direction: column;
}

/* Tab 切换栏 */
.tab-bar {
  display: flex;
  padding: 0 20rpx;

  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    position: relative;

    .tab-text {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }

    &.active {
      .tab-text {
        color: #004294;
        font-weight: 600;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: #004294;
        border-radius: 2rpx;
      }
    }
  }
}

/* 列表区域 */
.record-list {
  flex: 1;
  padding: 20rpx;
  height: 0; // 配合 flex: 1 使用
  box-sizing: border-box;

  /* 空数据提示 */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 200rpx 0;
    min-height: 500rpx;

    .empty-icon {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
      opacity: 0.5;
    }

    .empty-text {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }
  }

  /* 加载更多提示 */
  .load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 0;
    min-height: 80rpx;

    .load-more-text {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
    }
  }

  /* 记录项 */
  .record-item {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .record-header {
      margin-bottom: 24rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .record-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12rpx;

        .record-title {
          flex: 1;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #1a1819;
        }

        .status-badge {
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-size: 22rpx;

          .status-text {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
          }

          &.status-pending {
            background-color: rgba(255, 107, 0, 0.1);
            .status-text {
              color: #ff6b00;
            }
          }

          &.status-verification {
            background-color: rgba(0, 66, 148, 0.1);
            .status-text {
              color: #004294;
            }
          }

          &.status-completed {
            background-color: rgba(76, 175, 80, 0.1);
            .status-text {
              color: #4caf50;
            }
          }

          &.status-cancelled {
            background-color: rgba(158, 158, 158, 0.1);
            .status-text {
              color: #9e9e9e;
            }
          }
        }
      }

      .record-time {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #999999;
      }
    }

    .record-content {
      margin-bottom: 24rpx;

      .record-info-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16rpx;
        line-height: 1.5;

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

        .info-label {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #888888;
          margin-right: 8rpx;
          flex-shrink: 0;
        }

        .info-value {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          flex: 1;

          &.price {
            color: #d51c3c;
            font-weight: 600;
            font-size: 28rpx;
          }
        }
      }
    }

    .record-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;

      button{
        margin: 0;
        padding: 0;
      }

      .action-btn {
        width: 131rpx;
        height: 50rpx;
        border-radius: 10rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &.cancel-btn {
          background-color: #f5f5f5;
          color: #666666;
        }

        &.pay-btn {
          background-color: #004294;
          color: #ffffff;
        }

        &.detail-btn {
          background-color: #f5f5f5;
          color: #666666;
        }

        &.review-btn {
          background-color: #004294;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
