<template>
  <view class="after-sale-list">
    <!-- 状态筛选 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view
          class="filter-tab"
          :class="{ active: currentStatus === item.value }"
          v-for="item in statusOptions"
          :key="item.value"
          @click="changeStatus(item.value)"
        >
          <text class="tab-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 售后列表 -->
    <scroll-view
      class="list-scroll"
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      :refresher-enabled="true"
      :refresher-triggered="refresherTriggered"
    >
      <view class="list-content">
        <view
          class="after-sale-item"
          v-for="item in afterSaleList"
          :key="item.id"
          @click="goToDetail(item)"
        >
          <!-- 商品信息 -->
          <view class="product-info">
            <image
              class="product-image"
              :src="item.productImage"
              mode="aspectFill"
            />
            <view class="product-details">
              <text class="product-title">{{ item.productTitle }}</text>
              <text class="product-spec">{{ item.productSpec }}</text>
              <view class="product-meta">
                <text class="order-number">订单号：{{ item.orderNumber }}</text>
                <text class="create-time">{{
                  formatTime(item.createTime)
                }}</text>
              </view>
            </view>
          </view>

          <!-- 售后信息 -->
          <view class="after-sale-info">
            <view class="info-row">
              <text class="info-label">售后类型：</text>
              <text class="info-value">{{ item.type }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">售后原因：</text>
              <text class="info-value">{{ item.reason }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">申请时间：</text>
              <text class="info-value">{{ formatTime(item.createTime) }}</text>
            </view>
          </view>

          <!-- 状态和操作 -->
          <view class="status-section">
            <view class="status-badge" :class="[getStatusClass(item.status)]">
              {{ getStatusText(item.status) }}
            </view>
            <view class="action-buttons">
              <button
                class="action-btn"
                @click.stop="cancelAfterSale(item)"
                v-if="item.status === 'pending'"
              >
                取消申请
              </button>
              <button class="action-btn primary" @click.stop="goToDetail(item)">
                查看详情
              </button>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMore">
          <text class="load-text">加载中...</text>
        </view>
        <view class="no-more" v-else>
          <text class="no-more-text">没有更多数据了</text>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="afterSaleList.length === 0 && !loading">
          <image
            class="empty-image"
            :src="showImg('/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png')"
            mode="aspectFit"
          />
          <text class="empty-text">暂无售后记录</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStatus: "all",
      statusOptions: [
        { text: "全部", value: "all" },
        { text: "待处理", value: "pending" },
        { text: "处理中", value: "processing" },
        { text: "已完成", value: "completed" },
        { text: "已取消", value: "cancelled" },
      ],
      afterSaleList: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      refresherTriggered: false,
    };
  },
  onLoad() {
    this.loadAfterSaleList();
  },
  onShow() {
    // 页面显示时刷新数据
    this.refreshList();
  },
  methods: {
    // 切换状态筛选
    changeStatus(status) {
      if (this.currentStatus === status) return;
      this.currentStatus = status;
      this.resetList();
      this.loadAfterSaleList();
    },

    // 重置列表
    resetList() {
      this.afterSaleList = [];
      this.page = 1;
      this.hasMore = true;
    },

    // 加载售后列表
    async loadAfterSaleList() {
      if (this.loading || !this.hasMore) return;

      try {
        this.loading = true;

        const params = {
          page: this.page,
          pageSize: this.pageSize,
          status: this.currentStatus === "all" ? "" : this.currentStatus,
        };

        this.Post(params, "/framework/afterSale/list", "DES")
          .then((res) => {
            this.loading = false;
            if (res.code === 200) {
              const newList = res.data.list || [];

              if (this.page === 1) {
                this.afterSaleList = newList;
              } else {
                this.afterSaleList.push(...newList);
              }

              this.hasMore = newList.length === this.pageSize;
              this.page++;
            } else {
              uni.showToast({
                title: res.msg || "加载失败",
                icon: "none",
              });
            }
          })
          .catch((error) => {
            this.loading = false;
            console.error("加载售后列表失败:", error);
            uni.showToast({
              title: "加载失败",
              icon: "none",
            });
          });
      } catch (error) {
        this.loading = false;
        console.error("加载售后列表失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      }
    },

    // 上拉加载更多
    loadMore() {
      this.loadAfterSaleList();
    },

    // 下拉刷新
    onRefresh() {
      this.refresherTriggered = true;
      this.resetList();
      this.loadAfterSaleList().finally(() => {
        this.refresherTriggered = false;
      });
    },

    // 刷新列表
    refreshList() {
      this.resetList();
      this.loadAfterSaleList();
    },

    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPackages/afterSale/detail?id=${item.id}`,
      });
    },

    // 取消售后申请
    cancelAfterSale(item) {
      uni.showModal({
        title: "确认取消",
        content: "确定要取消这个售后申请吗？",
        success: (res) => {
          if (res.confirm) {
            this.Post({ id: item.id }, "/framework/afterSale/cancel", "DES")
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({
                    title: "取消成功",
                    icon: "success",
                  });
                  this.refreshList();
                } else {
                  uni.showToast({
                    title: res.msg || "取消失败",
                    icon: "none",
                  });
                }
              })
              .catch((error) => {
                console.error("取消售后申请失败:", error);
                uni.showToast({
                  title: "取消失败",
                  icon: "none",
                });
              });
          }
        },
      });
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        pending: "待处理",
        processing: "处理中",
        completed: "已完成",
        cancelled: "已取消",
      };
      return statusMap[status] || "未知状态";
    },

    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        pending: "status-pending",
        processing: "status-processing",
        completed: "status-completed",
        cancelled: "status-cancelled",
      };
      return classMap[status] || "status-default";
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return "";
      const date = new Date(time);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.after-sale-list {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 筛选区域
.filter-section {
  background-color: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.filter-tabs {
  display: flex;
  justify-content: space-around;
  padding: 0 30rpx;
}

.filter-tab {
  padding: 16rpx 24rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;

  &.active {
    background-color: #007aff;

    .tab-text {
      color: #fff;
    }
  }
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

// 列表区域
.list-scroll {
  height: calc(100vh - 120rpx);
}

.list-content {
  padding: 0 20rpx;
}

.after-sale-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

// 商品信息
.product-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.product-spec {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.order-number {
  font-size: 24rpx;
  color: #999;
}

.create-time {
  font-size: 24rpx;
  color: #999;
}

// 售后信息
.after-sale-info {
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 24rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;

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

.info-label {
  font-size: 26rpx;
  color: #666;
  min-width: 140rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

// 状态和操作
.status-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;

  &.status-pending {
    background-color: #ff9500;
  }

  &.status-processing {
    background-color: #007aff;
  }

  &.status-completed {
    background-color: #34c759;
  }

  &.status-cancelled {
    background-color: #999;
  }

  &.status-default {
    background-color: #999;
  }
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: 1rpx solid #ddd;
  background-color: #fff;
  color: #666;
  min-width: 120rpx;

  &.primary {
    background-color: #007aff;
    color: #fff;
    border-color: #007aff;
  }
}

// 加载更多
.load-more,
.no-more {
  text-align: center;
  padding: 30rpx;
}

.load-text,
.no-more-text {
  font-size: 26rpx;
  color: #999;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

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