<route lang="jsonc" type="page">
{
    "needLogin": false,
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}
</route>

<script lang="ts" setup>
import { useMessage } from 'wot-design-uni'
import PriceFormat from '@/components/PriceFormat.vue'
import { copy } from '@/utils/tools'

const OSS = inject('OSS')

// 消息提示框
const message = useMessage('wd-message-box-slot')

// 费用明细弹窗
const showCostDetailPopup = ref(false)

// 费用明细数据
const costDetail = ref({
  orderTotal: 828.90,
  serviceFee: 640.00,
  serviceFeePerHour: 160,
  serviceHours: 4,
  travelFee: 30.90,
  travelFeePerKm: 3.00,
  distance: 10.3,
  teaServiceFee: 178.00,
  teaName: '红茶/绿茶/福鼎白茶/铁观音',
  teaPrice: 158,
  teawarePrice: 20,
  discount: 20.00,
  couponDiscount: 20,
  deductFee: 130.00,
  platformFee: 130.00,
  actualIncome: 698.90,
})

// 订单数据
const orderData = ref({
  id: 1,
  serviceName: '苓苑共享茶室空间',
  serviceType: '到店服务',
  price: 212.20,
  appointmentTimeFull: '2025-03-18 09:00-12:00',
  duration: '3小时',
  servicePeople: 1,
  teaName: '福鼎白茶 (3泡)',
  teawareUsage: '客户自备',
  notes: '', // 如果为空则不显示备注卡片
  address: '青浦区仓桥路478号',
  orderSn: '7327328627526903',
  paymentMethod: '微信支付',
  createTime: '2019-05-16 12:20:26',
  payTime: '2019-05-16 13:20:26',
  // 倒计时相关（秒）
  countdownSeconds: 9 * 3600 + 30 * 60 + 48, // 09:30:48
})

// 倒计时
const countdownTime = ref('09:30:48')
let countdownTimer: any = null

// 格式化倒计时
function formatCountdown(seconds: number) {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}

// 开始倒计时
function startCountdown() {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }

  countdownTimer = setInterval(() => {
    if (orderData.value.countdownSeconds > 0) {
      orderData.value.countdownSeconds--
      countdownTime.value = formatCountdown(orderData.value.countdownSeconds)
    }
    else {
      clearInterval(countdownTimer)
      // 倒计时结束，可以触发自动取消逻辑
      console.log('订单自动取消')
    }
  }, 1000)
}

// 复制订单编号
function handleCopyOrderSn() {
  copy(orderData.value.orderSn)
  uni.showToast({
    title: '已复制',
    icon: 'success',
  })
}

// 导航
function handleNavigate() {
  // TODO: 实现导航功能
  console.log('导航到:', orderData.value.address)
  uni.showToast({
    title: '导航功能待实现',
    icon: 'none',
  })
}

// 价格点击（查看详情）
function handlePriceClick() {
  showCostDetailPopup.value = true
}

// 放弃接单
function handleDecline() {
  message.confirm({
    title: '确定放弃接单?',
    msg: '放弃接单后无法恢复,确认放弃吗?',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    cancelButtonProps: {
      customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
    },
    confirmButtonProps: {
      customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
    },
  }).then((res) => {
    if (res.action === 'confirm') {
      // TODO: 调用放弃接单的 API
      console.log('确认放弃接单')
      uni.showToast({
        title: '放弃接单成功',
        icon: 'success',
      })
      // 可以返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }).catch(() => {
    console.log('取消放弃接单')
  })
}

// 立即接单
function handleAccept() {
  // TODO: 调用接单的 API
  console.log('立即接单')
  uni.showToast({
    title: '接单成功',
    icon: 'success',
  })
  // 可以返回上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

onLoad((args) => {
  // 从路由参数获取订单ID
  if (args.id) {
    // TODO: 根据ID获取订单详情
    console.log('订单ID:', args.id)
  }
  // 初始化倒计时
  countdownTime.value = formatCountdown(orderData.value.countdownSeconds)
  startCountdown()
})

onUnload(() => {
  // 清理倒计时
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<template>
  <view class="pending-order-detail-page" :class="{ 'popup-open': showCostDetailPopup }">
    <!-- 消息提示框 -->
    <wd-message-box selector="wd-message-box-slot" />

    <!-- 导航栏 -->
    <navbar title="待接单" custom-class="!bg-[#F6F7F8]">
      <template #right>
        <view class="navbar-right-icons">
          <wd-icon name="more" size="40rpx" color="#303133" class="mr-24rpx" />
          <wd-icon name="eye" size="40rpx" color="#303133" />
        </view>
      </template>
    </navbar>

    <scroll-view class="content-scroll" scroll-y>
      <!-- 倒计时提示 -->
      <!-- <view class="countdown-tip">
        <text class="countdown-text">还剩</text>
        <text class="countdown-time">{{ countdownTime }}</text>
        <text class="countdown-text">订单自动取消</text>
      </view> -->

      <!-- 订单卡片 -->
      <view class="order-card" style="position: relative;">
        <view class="price-btn" @click.stop="handlePriceClick">
          <price-format
            color="#FFFFFF" :first-size="32" :second-size="32" :subscript-size="24"
            :price="orderData.price"
          />
          <wd-icon name="arrow-right" size="24rpx" color="#FFFFFF" class="ml-8rpx" />
        </view>
        <view class="order-card-header">
          <view class="order-icon-wrapper">
            <wd-img
              width="28rpx" height="28rpx" :src="`${OSS}images/chayishi/order-icon.png`"
              mode="aspectFill"
            />
          </view>
          <text class="order-card-title">订单</text>
        </view>
        <view class="order-card-content">
          <text class="service-name">{{ orderData.serviceName }}</text>
        </view>
      </view>

      <!-- 预约信息 -->
      <view class="info-card">
        <view class="info-card-title">
          预约信息
        </view>
        <view class="info-item">
          <text class="info-label">预约时间:</text>
          <text class="info-value">{{ orderData.appointmentTimeFull }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预约时长:</text>
          <text class="info-value">{{ orderData.duration }}</text>
        </view>
      </view>

      <!-- 茶艺服务 -->
      <view class="info-card">
        <view class="info-card-title">
          茶艺服务
        </view>
        <view class="info-item">
          <text class="info-label">服务人数</text>
          <text class="info-value">{{ orderData.servicePeople }}人</text>
        </view>
        <view class="info-item">
          <text class="info-label">预定茶叶</text>
          <text class="info-value">{{ orderData.teaName }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">茶具使用</text>
          <text class="info-value">{{ orderData.teawareUsage }}</text>
        </view>
      </view>

      <!-- 订单备注 -->
      <view v-if="orderData.notes" class="info-card">
        <view class="info-card-title">
          <wd-icon name="chat" size="32rpx" color="#303133" class="mr-8rpx" />
          订单备注
        </view>
        <view class="info-item">
          <text class="info-label">备注信息</text>
          <text class="info-value">{{ orderData.notes }}</text>
        </view>
      </view>

      <!-- 服务方式 -->
      <view class="info-card">
        <view class="info-card-title">
          服务方式
        </view>
        <view class="info-item">
          <text class="info-label">服务方式</text>
          <text class="info-value">{{ orderData.serviceType }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">服务地址</text>
          <view class="address-wrapper">
            <text class="info-value">{{ orderData.address }}</text>
            <wd-icon name="location" size="32rpx" color="#4C9F44" class="ml-16rpx" @click.stop="handleNavigate" />
          </view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="info-card">
        <view class="info-card-title">
          订单信息
        </view>
        <view class="info-item">
          <text class="info-label">订单编号</text>
          <view class="order-sn-wrapper">
            <text class="info-value">{{ orderData.orderSn }}</text>
            <text class="copy-text" @click.stop="handleCopyOrderSn">|复制</text>
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">交易方式</text>
          <text class="info-value">{{ orderData.paymentMethod }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ orderData.createTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">付款时间</text>
          <text class="info-value">{{ orderData.payTime }}</text>
        </view>
      </view>

      <!-- 底部占位，避免内容被按钮遮挡 -->
      <view class="bottom-placeholder" />
    </scroll-view>

    <!-- 费用明细弹窗 -->
    <wd-popup
      v-model="showCostDetailPopup"
      lock-scroll
      custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
      position="bottom"
      :z-index="200"
      :close-on-click-overlay="true"
    >
      <view class="cost-detail-popup">
        <!-- 关闭按钮 -->
        <view class="close-btn" @click="showCostDetailPopup = false">
          <wd-icon name="close" size="40rpx" color="#303133" />
        </view>

        <!-- 标题 -->
        <view class="popup-title">
          费用明细
        </view>

        <scroll-view class="cost-content" scroll-y>
          <!-- 订单总额 -->
          <view class="cost-item">
            <text class="cost-label">订单总额</text>
            <text class="cost-value">¥ {{ costDetail.orderTotal.toFixed(2) }}</text>
          </view>

          <!-- 服务费 -->
          <view class="cost-item">
            <text class="cost-label">服务费</text>
            <text class="cost-value">¥ {{ costDetail.serviceFee.toFixed(2) }}</text>
          </view>
          <view class="cost-sub-item">
            <text class="cost-sub-label">服务费 (¥ {{ costDetail.serviceFeePerHour }}元/小时)</text>
            <text class="cost-sub-value">x{{ costDetail.serviceHours }}</text>
          </view>

          <!-- 车马费 -->
          <view class="cost-item">
            <text class="cost-label">车马费</text>
            <text class="cost-value">¥ {{ costDetail.travelFee.toFixed(2) }}</text>
          </view>
          <view class="cost-sub-item">
            <text class="cost-sub-label">车马费 (¥ {{ costDetail.travelFeePerKm }}元/公里)</text>
            <text class="cost-sub-value">{{ costDetail.distance }}公里</text>
          </view>

          <!-- 茶艺服务 -->
          <view class="cost-item">
            <text class="cost-label">茶艺服务</text>
            <text class="cost-value">¥ {{ costDetail.teaServiceFee.toFixed(2) }}</text>
          </view>
          <view class="cost-sub-item">
            <text class="cost-sub-label">{{ costDetail.teaName }}</text>
            <text class="cost-sub-value">¥ {{ costDetail.teaPrice }}</text>
          </view>
          <view class="cost-sub-item">
            <text class="cost-sub-label">茶具使用</text>
            <text class="cost-sub-value">¥ {{ costDetail.teawarePrice }}</text>
          </view>

          <!-- 优惠 -->
          <view class="cost-item">
            <text class="cost-label">优惠</text>
            <text class="cost-value discount">- ¥ {{ costDetail.discount.toFixed(2) }}</text>
          </view>
          <view class="cost-sub-item">
            <text class="cost-sub-label">优惠券</text>
            <text class="cost-sub-value discount">- ¥ {{ costDetail.couponDiscount }}</text>
          </view>

          <!-- 分隔线 -->
          <view class="cost-divider" />

          <!-- 扣除费用区域 -->
          <view class="deduct-section">
            <view class="cost-item">
              <text class="cost-label">扣除费用</text>
              <text class="cost-value">¥ {{ costDetail.deductFee.toFixed(2) }}</text>
            </view>
            <view class="cost-sub-item">
              <text class="cost-sub-label">平台服务费</text>
              <text class="cost-sub-value">¥ {{ costDetail.platformFee.toFixed(2) }}</text>
            </view>
          </view>

          <!-- 实际收入 -->
          <view class="actual-income">
            <text class="actual-income-label">实际收入</text>
            <text class="actual-income-value">¥ {{ costDetail.actualIncome.toFixed(2) }}</text>
          </view>
        </scroll-view>
      </view>
    </wd-popup>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions" @click.stop>
      <wd-button
        type="default"
        plain
        custom-class="!border-[#dcdfe6] !text-[#909399] !bg-[#F6F7F8] !border-2rpx !text-32rpx !px-32rpx !h-88rpx !leading-88rpx !rounded-8rpx !flex-1"
        @click.stop="handleDecline"
      >
        放弃接单
      </wd-button>
      <wd-button
        type="primary"
        custom-class="!bg-[#4C9F44] !text-[#fff] !text-32rpx !px-32rpx !h-88rpx !leading-88rpx !rounded-8rpx !flex-1 !ml-20rpx"
        @click.stop="handleAccept"
      >
        立即接单
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f5f5f5;
  height: 100%;
}

.pending-order-detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.navbar-right-icons {
  display: flex;
  align-items: center;
}

.content-scroll {
  flex: 1;
  padding: 0 30rpx;
}

.countdown-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #303133;
}

.countdown-text {
  font-size: 28rpx;
  color: #303133;
}

.countdown-time {
  font-size: 32rpx;
  font-weight: 500;
  color: #ff5951;
  margin: 0 8rpx;
}

.order-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.order-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.order-icon-wrapper {
  position: relative;
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.order-icon-circle {
  width: 20rpx;
  height: 20rpx;
  border: 2rpx solid #4c9f44;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.order-icon-line {
  width: 2rpx;
  height: 12rpx;
  background-color: #4c9f44;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.order-card-title {
  font-size: 28rpx;
  color: #303133;
  font-weight: 500;
}

.order-card-content {
  display: flex;
  align-items: center;
}

.service-name {
  font-size: 30rpx;
  color: #303133;
  font-weight: 500;
  flex: 1;
}

.price-btn {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff5951;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 89, 81, 0.3);
  min-width: 140rpx;
}

.info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.info-card-title {
  font-size: 30rpx;
  color: #303133;
  font-weight: 500;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  line-height: 40rpx;

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

.info-label {
  color: #909399;
  margin-right: 16rpx;
  white-space: nowrap;
}

.info-value {
  color: #606266;
  flex: 1;
}

.address-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.order-sn-wrapper {
  display: flex;
  align-items: center;
}

.copy-text {
  color: #4c9f44;
  margin-left: 8rpx;
}

.bottom-placeholder {
  height: 120rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

// 当弹窗打开时，降低底部按钮的 z-index，确保被弹窗遮盖
.pending-order-detail-page.popup-open .bottom-actions {
  z-index: 50;
}

// 费用明细弹窗样式
.cost-detail-popup {
  position: relative;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 201;
}

.close-btn {
  position: absolute;
  top: 18rpx;
  right: 30rpx;
  z-index: 10;
  padding: 10rpx;
}

.popup-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #121212;
  line-height: 50rpx;
  padding: 50rpx 0 40rpx;
}

.cost-content {
  flex: 1;
  padding: 0 30rpx 30rpx;
  max-height: calc(80vh - 140rpx);
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.cost-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #303133;
  line-height: 42rpx;
}

.cost-value {
  font-size: 30rpx;
  font-weight: 500;
  color: #303133;
  line-height: 42rpx;

  &.discount {
    color: #4c9f44;
  }
}

.cost-sub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20rpx;
  margin-bottom: 16rpx;
}

.cost-sub-label {
  font-size: 28rpx;
  font-weight: 400;
  color: #909399;
  line-height: 40rpx;
}

.cost-sub-value {
  font-size: 28rpx;
  font-weight: 400;
  color: #303133;
  line-height: 40rpx;

  &.discount {
    color: #4c9f44;
  }
}

.cost-divider {
  height: 2rpx;
  background-color: #f6f7f9;
  margin: 30rpx 0;
}

.deduct-section {
  background-color: #f6f7f9;
  border-radius: 16rpx;
  padding: 20rpx;
  margin: 20rpx 0;
}

.actual-income {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
  padding-top: 30rpx;
}

.actual-income-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #303133;
  line-height: 42rpx;
}

.actual-income-value {
  font-size: 30rpx;
  font-weight: 500;
  color: #303133;
  line-height: 42rpx;
}
</style>
