<template>
  <view class="order-item">
    <view class="flex-row-between order-title" @click="jumpToDetails">
      <text class="fs-24 app-fc-normal">
        订单编号：{{ data.order_no || "-" }}
      </text>
      <!-- 待支付状态：显示倒计时横幅 -->
      <view
        v-if="
          data.status === SHOP_ORDER_UNPAY &&
          !data.tui_status &&
          countDownTime > 0
        "
        class="order-status-banner"
      >
        <view class="status-banner-left">
          <text class="status-text">等待付款</text>
        </view>
        <view class="status-banner-right">
          <text class="countdown-text">{{
            formatCountdown(countDownTime)
          }}</text>
        </view>
      </view>
      <!-- 其他状态：显示原有样式 -->
      <view
        v-else-if="
          ([
            SHOP_ORDER_CANCEL,
            SHOP_ORDER_UNPAY,
            SHOP_ORDER_UNSLIVER,
            SHOP_ORDER_UNRECEIVE,
            SHOP_ORDER_DONE,
            SHOP_ORDER_UNREMARK,
          ].includes(data.status) &&
            !data.tui_status) ||
          [SHOP_ORDER_AFTERSALE_REJECT].includes(data.tui_status)
        "
        class="flex-center fs-24 order-btn"
        :class="[
          ![SHOP_ORDER_DONE, SHOP_ORDER_CANCEL, SHOP_ORDER_UNREMARK].includes(
            data.status
          )
            ? 'app-fc-mark confirm'
            : 'cancel',
        ]"
      >
        {{ orderStatus }}
      </view>
      <view
        v-if="
          [SHOP_ORDER_AFTERSALE, SHOP_ORDER_AFTERSALE_DONE].includes(
            data.tui_status
          )
        "
        class="flex-center fs-24 order-btn cancel"
      >
        {{ refundOrderStatus }}
      </view>
    </view>
    <view
      class="order-content"
      :class="{ 'split-border': showStatusBtn }"
      @click="jumpToDetails"
    >
      <good-info :data="data.items" :actual_price="data.actual_price" />
      <view
        v-if="data.type && data.type !== 1"
        class="fs-24 app-fc-mark order-type"
      >
        随车订单
      </view>
    </view>
    <view v-if="showStatusBtn" class="order-btns">
      <!-- 待支付 -->
      <template v-if="[SHOP_ORDER_UNPAY].includes(data.status)">
        <view
          class="flex-center fs-24 app-fc-main cancel-order-btn"
          @click.stop="$emit('cancelOrder', data)"
        >
          取消订单
        </view>
        <view class="order-btns-right">
          <!-- 		<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('concactService', data)">
						联系客服
					</view> -->
          <view
            class="flex-center fs-24 app-fc-white status-btn confirm"
            @click.stop="$emit('pay', data)"
          >
            立即支付
          </view>
        </view>
      </template>

      <!-- 待预约 -->
      <template v-if="[SHOP_ORDER_UNSLIVER].includes(data.status)">
        <view class="order-btns-right">
          <view
            class="flex-center fs-24 app-fc-main status-btn"
            @click.stop="remindRefund(data.order_id)"
          >
            申请退款
          </view>
          <view
            class="flex-center fs-24 app-fc-white status-btn confirm"
            @click.stop="jumpToReservation"
          >
            立即预约
          </view>
        </view>
      </template>

      <!-- 待收货 -->
      <template v-if="[SHOP_ORDER_UNRECEIVE].includes(data.status)">
        <!-- 		<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('concactService', data)">
					联系客服
				</view> -->

        <view
          class="flex-center fs-24 app-fc-main status-btn"
          @click.stop="$emit('afterSale', data)"
        >
          申请售后
        </view>
        <!-- 随车订单不显示物流 -->
        <!-- <view v-if="data.pay_type !== pay_type_BYCAR" class="flex-center fs-24 app-fc-main status-btn"
					@click.stop="$emit('checkSliver', data)">
					查看物流
				</view> -->
        <view
          class="flex-center fs-24 app-fc-white status-btn confirm"
          @click.stop="$emit('confirmSliver', data)"
        >
          确认收货
        </view>
      </template>

      <!-- 已签收未评价 -->
      <template v-if="[SHOP_ORDER_UNREMARK].includes(data.status)">
        <!-- 		<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('concactService', data)">
					联系客服
				</view> -->
        <view
          class="flex-center fs-24 app-fc-white status-btn confirm"
          @click.stop="$emit('remark', data)"
        >
          立即评价
        </view>
      </template>

      <!-- 已完成 -->
      <template v-if="[SHOP_ORDER_DONE].includes(data.status)">
        <!-- 			<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('concactService', data)">
					联系客服
				</view> -->
        <view
          class="flex-center fs-24 app-fc-white status-btn confirm"
          style="visibility: hidden"
        >
        </view>
      </template>
      <template v-if="[SHOP_ORDER_DONE].includes(data.status)">
        <!-- 			<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('concactService', data)">
					联系客服
				</view> -->
        <view
          class="flex-center fs-24 app-fc-white status-btn confirm"
          @click.stop="$emit('remarkDetails', data)"
        >
          查看评价
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import PopUpModal from "@/components/PopUpModal.vue";
import GoodInfo from "./GoodInfo.vue";
import { walletTransaction, cancelPetOrderMall } from "../../../../api/login";

import {
  SHOP_ORDER_STATUS,
  SHOP_ORDER_UNPAY,
  SHOP_ORDER_UNSLIVER,
  SHOP_ORDER_UNRECEIVE,
  SHOP_ORDER_DONE,
  SHOP_ORDER_CANCEL,
  SHOP_ORDER_AFTERSALE,
  SHOP_ORDER_AFTERSALE_DONE,
  SHOP_ORDER_AFTERSALE_REJECT,
  SHOP_ORDER_AFTERSALE_STATUS,
  SHOP_ORDER_UNREMARK,
  pay_type_ADDRESS,
  pay_type_BYCAR,
  pay_type_BYPET,
} from "@/constants/app.business";

export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      pay_type_ADDRESS,
      pay_type_BYCAR,
      pay_type_BYPET,
      SHOP_ORDER_STATUS,
      SHOP_ORDER_UNPAY,
      SHOP_ORDER_UNSLIVER,
      SHOP_ORDER_UNRECEIVE,
      SHOP_ORDER_DONE,
      SHOP_ORDER_CANCEL,
      SHOP_ORDER_AFTERSALE,
      SHOP_ORDER_AFTERSALE_DONE,
      SHOP_ORDER_AFTERSALE_REJECT,
      SHOP_ORDER_UNREMARK,
      showCancelModal: false,
      countDownTime: 0,
      countDownTimer: null,
    };
  },
  components: {
    GoodInfo,
    PopUpModal,
  },
  options: {
    styleIsolation: "shared",
  },
  computed: {
    // 抖音退款组件需要的订单ID
    orderId() {
      return this.data.order_id || this.data.order_no || "";
    },
    // 抖音退款组件需要的订单状态（1=待核销/待发货，2=已核销/已发货）
    orderStatusForSDK() {
      // 根据你的业务状态映射到抖音SDK需要的状态
      // SHOP_ORDER_UNSLIVER = 待发货 -> 映射为 1
      if (this.data.status === SHOP_ORDER_UNSLIVER) {
        return 1;
      }
      // SHOP_ORDER_UNRECEIVE = 待收货 -> 映射为 2
      if (this.data.status === SHOP_ORDER_UNRECEIVE) {
        return 2;
      }
      return 1;
    },
    // 订单总金额（单位：分）
    orderTotalAmount() {
      const price = this.data.actual_price || 0;
      // 转换为分
      return Math.round(parseFloat(price) * 100);
    },
    // UniApp 需要传入的退款参数对象
    refundParams() {
      return {
        reasonCode: [410],
        note: "用户申请退款",
        applySource: 101,
        afterSaleType: 3,
        needRefundPackFee: true,
      };
    },
    orderStatus() {
      return SHOP_ORDER_STATUS[this.data.status] || "";
    },
    refundOrderStatus() {
      return SHOP_ORDER_AFTERSALE_STATUS[this.data.tui_status] || "";
    },
    showStatusBtn() {
      return (
        ([
          SHOP_ORDER_UNPAY,
          SHOP_ORDER_UNSLIVER,
          SHOP_ORDER_UNRECEIVE,
          SHOP_ORDER_DONE,
          SHOP_ORDER_UNREMARK,
        ].includes(this.data.status) &&
          !this.data.tui_status) ||
        [SHOP_ORDER_AFTERSALE_REJECT].includes(this.data.tui_status)
      );
    },
  },
  watch: {
    showCancelModal(val) {
      this.$emit("disableScroll", val);
    },
    "data.daojishi"(newVal) {
      if (this.data.status === this.SHOP_ORDER_UNPAY && newVal) {
        this.countDownTime = newVal;
        this.startCountDown();
      }
    },
    "data.status"(newVal) {
      if (newVal === this.SHOP_ORDER_UNPAY && this.data.daojishi) {
        this.countDownTime = this.data.daojishi;
        this.startCountDown();
      } else {
        this.stopCountDown();
      }
    },
  },
  mounted() {
    // console.log(this.data,'--=')
    if (this.data.status === SHOP_ORDER_UNPAY && this.data.daojishi) {
      this.countDownTime = this.data.daojishi;
      this.startCountDown();
    }
  },
  beforeDestroy() {
    this.stopCountDown();
  },
  methods: {
    remindRefund(id) {
      const data = {
        id: Number(id),
      };
      uni.showLoading({
        icon: "none",
        title: "处理中",
        mask: true,
      });
      cancelPetOrderMall(data)
        .then((res) => {
          uni.hideLoading();
          const plugin = tt.requirePlugin("lifeServicePlugin");
          let res1 = {
            code: 0,
            result: "success",
            msg: "success",
            data: {
              outOrderNo: "DYG177556196373493862814838179",
              refundInfo: {
                reason:["计划有变，暂时不需要了"],
                reasonCode:[401],
              },
              goodsList: [
                { goodsId: "7625832097692813354", goodsType: 1, quantity: 1 },
              ],
            },
          };
          plugin.applyRefund({
            goodsList: res1.data.goodsList,
            outOrderNo: res1.data.outOrderNo,
            refundInfo: res1.data.refundInfo,
            success: (res) => {
              uni.showToast({
                title: "退款申请已提交",
                icon: "success",
              });
              this.$emit("refund", this.data);
            },
            fail: (err) => {
              console.log("退款失败:", err);
              // 处理session过期错误
              if (err && err.errMsg && err.errMsg.includes("session已过期")) {
                uni.showModal({
                  title: "提示",
                  content: "会话已过期，请重新登录后再试",
                  showCancel: false,
                  confirmText: "确定",
                  success: () => {
                    // 清除当前用户信息并跳转到登录页
                    this.$store.dispatch("user/deleteToken");
                    this.$store.dispatch("user/clearUserInfo");
                    uni.clearStorageSync();
                    uni.reLaunch({
                      url: "/pages/client/auth/index",
                    });
                  },
                });
              } else {
                uni.showToast({
                  title: err?.errMsg || err?.msg || "退款失败，请重试",
                  icon: "none",
                });
              }
            },
          });
        })
        .catch((err) => {
          uni.hideLoading();
          console.error("获取退款信息失败:", err);
          uni.showToast({
            title: err?.msg || "获取退款信息失败",
            icon: "none",
          });
        });
    },
    // 退款回调（组件触发）
    handleRefund(event) {
      const { status, result, outOrderNo } = event.detail;
      console.log("退款回调:", { status, result, outOrderNo });

      if (status === "success") {
        uni.showToast({
          title: "退款申请已提交",
          icon: "success",
        });
        this.$emit("refund", this.data);
      } else {
        uni.showToast({
          title: result?.errMsg || "退款失败，请稍后重试",
          icon: "none",
        });
      }
    },

    // 错误处理
    handleError(event) {
      console.error("退款组件报错:", event.detail);
      uni.showToast({
        title: "组件加载失败，请稍后重试",
        icon: "none",
      });
    },

    startCountDown() {
      this.stopCountDown();
      if (this.countDownTime > 0) {
        this.countDownTimer = setInterval(() => {
          if (this.countDownTime > 0) {
            this.countDownTime--;
          } else {
            this.stopCountDown();
            // 倒计时结束，可以触发刷新
            this.$emit("countdownEnd", this.data);
          }
        }, 1000);
      }
    },
    stopCountDown() {
      if (this.countDownTimer) {
        clearInterval(this.countDownTimer);
        this.countDownTimer = null;
      }
    },
    formatCountdown(seconds) {
      const hour = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds - hour * 3600) / 60);
      return `${hour}小时${minutes}分钟`;
    },
    orderCancel() {
      this.showCancelModal = false;
    },
    cancel() {
      this.showCancelModal = false;
    },
    jumpToDetails() {
      this.$emit("jumpToDetails", this.data);
    },
    jumpToReservation() {
      uni.reLaunch({
        url: "/pages/client/index/index?activePageId=reservationPage",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-item {
  width: calc(100vw - 40rpx);
  background: #fff;
  margin: 20rpx;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 0;

  .order-title {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ececec;

    .order-btn {
      width: 104rpx;
      height: 48rpx;
      border-radius: 48rpx;

      &.confirm {
        background: #fef6ff;
      }

      &.cancel {
        background: #f7f7f7;
        color: #afa5ae;
      }
    }

    .order-status-banner {
      display: flex;
      align-items: center;
      border-radius: 48rpx;
      overflow: hidden;

      .status-banner-left {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: #ff19a0;
        padding: 8rpx;
        flex-shrink: 0;
        border-radius: 10px 0px 10px 10px;

        .status-text {
          font-size: 20rpx;
          color: #ffffff;
        }
      }

      .status-banner-right {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: #fff0f8;
        padding: 8rpx;
        flex-shrink: 0;

        .countdown-text {
          font-size: 20rpx;
          color: #ff19a0;
        }
      }
    }
  }

  .order-btns {
    padding-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .cancel-order-btn {
      font-size: 24rpx;
      color: #9b939a;
      padding: 16rpx 0;
    }

    .order-btns-right {
      display: flex;
      align-items: center;
    }

    .status-btn {
      width: 70px;
      height: 34px;
      // padding: 16rpx 20rpx;
      border-radius: 64rpx;
      border: 1px solid #ff19a0;
      margin-left: 20rpx;

      &.confirm {
        color: $app_color_main;
        border: 1px solid $app_color_main;
      }
    }
  }

  ::v-deep {
    .good-info-multi {
      padding-top: 20rpx;
    }
  }
}
</style>
