<template>
  <view class="order-page-container">
    <scroll-view class="tab-view" scroll-x="true" :show-scrollbar="false">
      <view class="tab-view-content">
        <view class="tab-item" v-for="item in tabList" :key="item.value" @click.stop="selectOrderStatus(item)">
          <text class="fs-28 app-fc-normal" :class="{ 'tab-text ali-puhui-bold': item.value === currentStatus }">
            {{ item.label }}
          </text>
          <view class="tab-line" :class="{ 'tab-selected-line': item.value === currentStatus }" />
        </view>
      </view>
    </scroll-view>
    <view class="order-content">
      <view class="status-view-container" v-if="isLoading">
        <uni-load-more status="loading" />
      </view>
      <view class="status-view-container" v-if="!isLoading && orderList.length === 0">
        <uni-load-more status="noMore" />
      </view>
      <scroll-view 
        class="scroll-view" 
        scroll-y 
        v-if="!isLoading && orderList.length" 
        refresher-enabled
        :refresher-triggered="isRefresh" 
        @refresherrefresh="refresherAction" 
        @scrolltolower="loadMoreAction"
        refresher-background="transparent"
      >
        <!-- 根据 source 字段动态渲染不同的组件 -->
        <block v-for="(item, index) in orderList" :key="item.order_id || index">
          <!-- source 为 'pet_order' 时使用 reservation 组件 -->
          <reservation 
            v-if="item.source === 'pet_order'"
            :order-info="item"
            @refresh-list="refresherAction"
            @cancel-order="handleCancelOrder"
          />
          <!-- source 为 'home_service' 时使用 home-service-order-item 组件 -->
          <home-service-order-item 
            v-else-if="item.source === 'home_service'"
            :order-info="item"
            @refresh-list="refresherAction"
            @cancel-order="handleCancelOrder"
          />
          <!-- source 为 'home_training' 时使用 home-training-order-item 组件 -->
          <home-training-order-item 
            v-else-if="item.source === 'home_training'"
            :order-info="item"
            @refresh-list="refresherAction"
            @pay-now="handlePayNow"
            @buy-course="handleBuyCourse"
            @cancel-order="handleCancelOrder"
            @view-contract="handleViewContract"
            @goto-evaluate="handleGotoEvaluate"
          />
        </block>
      </scroll-view>
    </view>
    
    <!-- 取消预约确认弹窗 - 放在父组件中避免被 overflow: hidden 裁剪 -->
    <pop-up-modal 
      v-if="isShowCancelModal" 
      content="确定要取消预约吗？" 
      @confirm="confirmCancelOrder"
      @cancel="isShowCancelModal = false" 
    />
  </view>
</template>

<script>
import Reservation from './reservation.vue';
import HomeServiceOrderItem from './home-service-order-item.vue';
import HomeTrainingOrderItem from './home-training-order-item.vue';
import { showOrderStatus } from "@/pageHome/constants/home";
import { getOrderList, cancelHomeOrder, cancelTrainingOrder } from "@/api/order";
import { cancelPetOrderRefund } from "@/api/login";
import PopUpModal from "@/components/PopUpModal.vue";

export default {
  name: 'index',
  components: {
    Reservation,
    HomeServiceOrderItem,
    HomeTrainingOrderItem,
    PopUpModal
  },
  data() {
    return {
      tabList: showOrderStatus,
      currentStatus: 0,
      isLoading: true,
      orderList: [],
      pageNumber: 1,
      pageSize: 10,
      isRefresh: false,
      isLoadMore: false,
      isNoMore: false,
      isShowCancelModal: false,
      cancelOrderInfo: null,
    };
  },
  onLoad(options) {
    // 如果从外部传入状态，设置当前状态
    if (options.status !== undefined) {
      this.currentStatus = parseInt(options.status) || 0;
    }
  },
  mounted() {
    uni.$on("createRemarkSuccess", this.refresherAction);
    uni.$on("refreshOrderList", this.refresherAction);
    this.initData();
  },
  destroyed() {
    uni.$off("createRemarkSuccess", this.refresherAction);
    uni.$off("refreshOrderList", this.refresherAction);
  },
  watch: {
    currentStatus: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal && oldVal !== undefined) {
          this.initData();
        }
      },
      immediate: false
    }
  },
  methods: {
    selectOrderStatus(status) {
      if (this.currentStatus === status.value) {
        return;
      }
      this.currentStatus = status.value;
    },
    initData() {
      this.isLoading = true;
      this.pageNumber = 1;
      this.isRefresh = false;
      this.isLoadMore = false;
      this.isNoMore = false;
      this.orderList = [];
      this.getData();
    },
    refresherAction() {
      if (this.isRefresh) {
        return;
      }
      this.pageNumber = 1;
      this.isRefresh = true;
      this.isLoadMore = false;
      this.isNoMore = false;
      this.getData();
    },
    loadMoreAction() {
      console.log(this.isNoMore)
      if (this.isNoMore) {
        return;
      }
      this.pageNumber++;
      this.getData();
    },
    getData() {
      const value = uni.getStorageSync("userInfo");
      const params = {
        user_id: value.user_id,
        status: this.currentStatus || 0,
        page: this.pageNumber,
        page_size: this.pageSize
      };
      getOrderList(params)
        .then((res) => {
          let list = res?.data || [];
          if (this.pageNumber === 1) {
            this.orderList = list;
          } else {
            this.orderList = [...this.orderList, ...list];
          }
          this.isRefresh = false;
          this.isLoading = false;
          this.isLoadMore = false;
          this.isNoMore = list.length < 9;
        })
        .catch(() => {
          if (this.pageNumber !== 1) {
            this.pageNumber--;
          }
          this.isLoading = false;
          this.isRefresh = false;
          this.isLoadMore = false;
        });
    },
    handleBookAgain(orderInfo) {
      // 处理再次预约的逻辑
      // 可以跳转到预约页面
      console.log('再次预约', orderInfo);
      // 例如：uni.navigateTo({ url: '/pageHome/service/feeding?orderId=' + orderInfo.order_id });
    },
    handleViewReport(orderInfo) {
      // 处理查看宠物报告的逻辑
      console.log('查看宠物报告', orderInfo);
      // 可以跳转到报告详情页面
      // uni.navigateTo({ url: '/pages/client/report/detail?orderId=' + orderInfo.order_id });
    },
    handleBuyGoods(orderInfo) {
      // 处理随车购商品的逻辑
      uni.navigateTo({
        url: `/pages/client/category/index?petOrderId=${orderInfo.order_id}&addressId=${orderInfo.address_id}`,
      });
    },
    handleAddService(orderInfo) {
      // 处理添加附加项的逻辑
      console.log('添加附加项', orderInfo);
      // 可以跳转到添加附加项页面或显示弹窗
    },
    handleCancelOrder(orderInfo) {
      // 显示取消预约确认弹窗
      this.cancelOrderInfo = orderInfo;
      this.isShowCancelModal = true;
    },
    confirmCancelOrder() {
      // 确认取消订单
      if (!this.cancelOrderInfo) {
        this.isShowCancelModal = false;
        return;
      }
      const orderInfo = this.cancelOrderInfo;
      this.isShowCancelModal = false;
      uni.showLoading({
        title: "正在取消订单",
        mask: true,
      });
      
      // 根据订单类型调用不同的取消接口
      let cancelPromise;
      if (orderInfo.source === 'home_service') {
        // 上门服务订单使用 cancelHomeOrder 接口
        const orderId = orderInfo.home_service_order?.id;
        cancelPromise = cancelHomeOrder(orderId);
      } else if (orderInfo.source === 'pet_order') {
        // pet_order 类型订单使用 cancelPetOrderRefund 接口
        const orderId = orderInfo.pet_order?.order_id || orderInfo.order_id;
        cancelPromise = cancelPetOrderRefund({ order_id: Number(orderId) });
      } else {
        // 上门训练订单使用 cancelTrainingOrder 接口
        const orderId = orderInfo.home_training_order?.id;
        cancelPromise = cancelTrainingOrder({ order_id: Number(orderId) });
      }
      
      cancelPromise
        .then((res) => {
          uni.hideLoading();
          // 判断是否成功：result === 'success'
          if (res.result === 'success') {
            this.cancelOrderInfo = null;
            uni.showToast({
              title:"取消成功",
              icon: "success",
            });
            // 刷新订单列表
            this.refresherAction();
          } else {
            // 失败：弹出错误信息
            this.cancelOrderInfo = null;
            uni.showToast({
              title: res.msg || res.message || "取消订单失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          this.cancelOrderInfo = null;
          // 捕获异常时显示错误信息
          const errorMsg = err?.msg || err?.message || err || "取消订单失败，请稍后重试";
          uni.showToast({
            title: errorMsg,
            icon: "none",
          });
        });
    },
    handlePayNow(orderInfo) {
      // 处理立即支付
      console.log('立即支付', orderInfo);
      // TODO: 实现支付逻辑
      uni.showToast({
        title: '支付功能开发中',
        icon: 'none'
      });
    },
    handleBuyCourse(orderInfo) {
      // 处理购买课程
      console.log('购买课程', orderInfo);
      // TODO: 实现购买课程逻辑
      uni.showToast({
        title: '购买课程功能开发中',
        icon: 'none'
      });
    },
    handleViewContract(orderInfo) {
      // 处理查看合同
      console.log('查看合同', orderInfo);
      // TODO: 实现查看合同逻辑，可能需要跳转到合同详情页
      uni.showToast({
        title: '查看合同功能开发中',
        icon: 'none'
      });
    },
    handleGotoEvaluate(orderInfo) {
      // 处理去评价
      const orderId = orderInfo.order_id || orderInfo.home_training_order?.order_id;
      const pinglunId = orderInfo.pinglun_id;
      
      if (pinglunId) {
        // 如果已有评价，跳转到评价详情
        uni.navigateTo({
          url: `/pages/client/remark/details?remarkId=${pinglunId}`,
        });
      } else {
        // 跳转到评价页面
        // TODO: 确认订单类型常量
        uni.navigateTo({
          url: `/pages/client/order/remark?orderId=${orderId}&orderType=3`, // 3 可能是 home_training 的订单类型
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
}

.tab-view {
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  white-space: nowrap;
  border-top: 2rpx solid #f4f4f4;
  flex-shrink: 0;

  .tab-view-content {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 20rpx;
  }

  .tab-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20rpx;
    flex-shrink: 0;
    white-space: nowrap;
    transition: 0.2ms all;

    .tab-text {
      color: $app_fc_main;
      white-space: nowrap;
      font-size: 32rpx;
    }
  }

  .tab-line {
    width: 24rpx;
    height: 10rpx;
    background-color: transparent;
    margin-top: 18rpx;
    border-radius: 100px;
  }

  .tab-selected-line {
    background-color: $app_color_main;
  }
}

.order-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.status-view-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-view {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-bottom: 32rpx;
}
</style>
