<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar" v-if="status === '待付款'">
      <view class="status">待付款</view>
      <view class="countdown">剩余支付时间: {{ countdown }}</view>
      <view class="tips">10分钟内未支付订单自动取消</view>
    </view>
    <view class="status-bar" v-if="status === '待发货'">
      <view class="status">待发货</view>
      <view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
      <view class="tips">商家正在加急打包中了，请耐心等候</view>
    </view>
    <view class="status-bar" v-if="status === '配送中'">
      <view class="status">待配送</view>
      <view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
      <view class="tips">
        配送司机：15901518415
        <img class="phone" src="http://localhost:8080/phone.png" />
      </view>
    </view>
    <view class="status-bar" v-if="status === '已完成' || status === '退款中'">
      <view class="status">已完成</view>
      <view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
      <view class="tips">感谢对我们的信任，期待下次光临</view>
    </view>
    <view class="status-bar" v-if="status === '已取消'">
      <view class="status">已取消</view>
      <view class="countdown">订单已取消</view>
      <view class="tips">您的订单已取消，再来一单吧</view>
    </view>
    <!-- <view class="status-bar" v-if="status === '退款中'">
      <view class="status">已完成</view>
      <view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
      <view class="tips">感谢对我们的信任，期待下次光临</view>
    </view> -->

    <view class="content">
      <!-- 订单金额 -->
      <view class="amount-section">
        <view v-if="status !== '退款中'">
          <view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
          <view class="original-price"
            >商品下单应付
            <text> ¥{{ orderInfo.originalPrice }}</text>
          </view>
        </view>
        <view
          class="goods-item"
          v-for="(item, index) in orderInfo.goodsList"
          :key="index"
        >
          <view class="goods-content">
            <image :src="item.image" class="goods-img"></image>
            <view class="goods-info">
              <view>
                <view class="goods-name">{{ item.name }}</view>
                <view class="goods-desc">{{ item.desc }}</view>
              </view>
              <view>
                <view class="goods-price">¥{{ item.price }}</view>
                <view class="goods-info-right"> x{{ item.quantity }}</view>
              </view>
            </view>
          </view>
          <view v-if="status === '退款中'" class="goods-info-tk">退款已完成</view>
        </view>
        <view class="hr"></view>
        <view class="info-item">
          <view class="info-label1"
            >下单总金额( ¥{{ orderInfo.orderAmount }} )</view
          >
          <view class="info-action">明细</view>
        </view>
        <view class="info-item">
          <view class="info-label">商品下单总金额</view>
          <view class="info-value">¥{{ orderInfo.goodsTotal }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">运费总计</view>
          <view class="info-value">¥{{ orderInfo.freight }}</view>
        </view>
      </view>

      <view v-if="status !== '退款中'">
        <!-- 配送信息 -->
        <view class="delivery-info">
          <view class="section-title">配送信息</view>
          <view class="info-item">
            <view class="info-label">配送方式</view>
            <view class="info-value">{{ orderInfo.deliveryType }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">预计配送时间</view>
            <view class="info-value">{{ orderInfo.deliveryTime }}</view>
          </view>
        </view>

        <!-- 收货信息 -->
        <view class="recipient-info">
          <view class="section-title">收货信息</view>
          <view class="info-item">
            <view class="info-label">收货人</view>
            <view class="info-value"
              >{{ orderInfo.recipientName }}
              <text> {{ orderInfo.recipientPhone }}</text>
            </view>
          </view>
          <view class="info-item">
            <view class="info-label">收货地址</view>
            <view class="info-value">{{ orderInfo.recipientAddress }}</view>
          </view>
        </view>

        <!-- 订单信息详情 -->
        <view class="order-detail-info">
          <view class="section-title">订单信息</view>
          <view class="info-item">
            <view class="info-label">订单编号</view>
            <view class="info-value">{{ orderInfo.orderNumber }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">支付方式</view>
            <view class="info-value">{{ orderInfo.paymentMethod }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">下单时间</view>
            <view class="info-value">{{ orderInfo.orderTime }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">备注</view>
            <view class="info-value">{{ orderInfo.remark }}</view>
          </view>
        </view>

        <!-- 底部操作按钮 -->
        <view class="bottom-buttons" v-if="status === '待付款'">
          <button class="cancel-btn" @click="cancelOrder">取消订单</button>
          <button class="yfd-btn" @click="cancelOrder">运费单</button>
          <button class="pay-btn" @click="gotoPayment">立即支付</button>
        </view>
        <view class="bottom-buttons" v-if="status === '待发货'">
          <button class="yfd-btn" @click="cancelOrder">运费单</button>
          <button class="cancel-btn" @click="cancelOrder">取消订单</button>
          <!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
        </view>
        <view class="bottom-buttons" v-if="status === '配送中'">
          <button class="cancel-btn" @click="checkLogistics">查看物流</button>
          <button class="yfd-btn" @click="cancelOrder">运费单</button>
          <button class="pay-btn" @click="gotoPayment">立即支付</button>
        </view>
        <view class="bottom-buttons" v-if="status === '已完成'">
          <button class="cancel-btn" @click="orderEvaluate">服务评价</button>
          <button class="yfd-btn" @click="cancelOrder">运费单</button>
          <button class="pay-btn" @click="gotoPayment">立即支付</button>
        </view>
        <view class="bottom-buttons" v-if="status === '已取消'">
          <button class="yfd-btn" @click="cancelOrder">运费单</button>
          <!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
          <button class="pay-btn" @click="gotoPayment">再来一单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { picUrl, NavgateTo } from "../../../utils";

export default {
  data() {
    return {
      status: "",
      countdown: "9:59:59",
      orderInfo: {
        totalAmount: "4704.00",
        payAmount: "4704.00",
        originalPrice: "4704.00",
        orderAmount: "290.00",
        goodsTotal: "4704.00",
        freight: "4704.00",
        deliveryType: "商家配送",
        deliveryTime: "2021-04-16 20:00-22:00",
        recipientName: "杜先生",
        recipientPhone: "15901518415",
        recipientAddress: "河北省衡水市桃城区上海公馆",
        orderNumber: "159144551545654",
        paymentMethod: "微信支付",
        orderTime: "2021-03-16 20:00-22:00",
        remark: "明天9点之前送到",
        goodsList: [
          {
            image: "http://localhost:8080/order_details.png",
            name: "泰国金枕榴莲",
            desc: "泰国金枕榴莲 软糯 香甜",
            price: "125.9",
            quantity: 1,
          },
          {
            image: "http://localhost:8080/order_details.png",
            name: "泰国金枕榴莲",
            desc: "泰国金枕榴莲 软糯 香甜",
            price: "125.9",
            quantity: 1,
          },
          {
            image: "http://localhost:8080/order_details.png",
            name: "泰国金枕榴莲",
            desc: "泰国金枕榴莲 软糯 香甜",
            price: "125.9",
            quantity: 1,
          },
        ],
      },
    };
  },
  onLoad(options) {
    // 启动倒计时
    options?.status === "待付款" ? this.startCountdown() : "";
    this.status = options?.status;
  },
  methods: {
    startCountdown() {
      // 实际项目中应该从服务器获取剩余时间
      // 这里使用模拟倒计时
      let seconds = 10 * 60; // 10分钟
      const timer = setInterval(() => {
        seconds--;
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;
        this.countdown = `${hours}:${minutes.toString().padStart(2, "0")}:${secs
          .toString()
          .padStart(2, "0")}`;
        if (seconds <= 0) {
          clearInterval(timer);
          // 倒计时结束，处理订单取消逻辑
          uni.showToast({ title: "订单已取消", icon: "none" });
          setTimeout(() => uni.navigateBack(), 1500);
        }
      }, 1000);
    },
    cancelOrder() {
      uni.showModal({
        title: "提示",
        content: "确定要取消订单吗？",
        success: (res) => {
          if (res.confirm) {
            // 调用取消订单API
            uni.showToast({ title: "订单已取消", icon: "none" });
            setTimeout(() => uni.navigateBack(), 1500);
          }
        },
      });
    },
    gotoPayment() {
      console.log("🚀 ~ gotoPayment ~ 去支付:");
      // 跳转到支付页面
      // uni.navigateTo({
      //   url: "/kitchen/pay/index",
      // });
    },
    checkLogistics() {
      NavgateTo(`/packages/myOrders/logistics/index`);
    },

    orderEvaluate(){
      NavgateTo(`/packages/myOrders/orderEvaluate/index`);
    }
  },
};
</script>
<style>
@import url("./index.css");
</style>