<template>
  <view class="page-container">
    <uv-navbar title="订单详情" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
    <scroll-view class="content-scroll" scroll-y="true" :enhanced="true" :show-scrollbar="false">
      <!-- 金额概览 -->
      <view class="summary-card">
        <view class="summary-left">
          <text class="summary-label">支付金额</text>
          <view class="summary-amount">
            <text class="summary-symbol">¥</text>
            <text class="summary-number">{{ ((state.detail.amount) / 100).toFixed(2) }}</text>
          </view>
        </view>
        <view class="summary-right">
          <view
            class="summary-badge"
            :class="'badge-' + (state.detail.payStatus == 0 ? 'primary' : (state.detail.payStatus == 1 ? 'success' : 'error'))"
          >
            {{ fmtDictName('Order.pay', state.detail.payStatus) }}
          </view>
        </view>
      </view>

      <!-- 订单信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <view class="header-dot"></view>
          <text class="header-title">订单信息</text>
        </view>

        <view class="info-list">
          <view class="info-item">
            <text class="info-label">订单编号</text>
            <view class="info-value-wrap">
              <text class="info-value">{{ state.detail.orderId }}</text>
              <view class="copy-btn" @click.stop="handleCopy">
                <text>复制</text>
              </view>
            </view>
          </view>

          <view class="info-item" v-if="state.detail.stationName">
            <text class="info-label">消费站点</text>
            <text class="info-value">{{ state.detail.stationName }}</text>
          </view>

          <view class="info-item">
            <text class="info-label">开始时间</text>
            <text class="info-value">{{ fmtDateTime(state.detail.startTime) }}</text>
          </view>

          <view class="info-item">
            <text class="info-label">结束时间</text>
            <text class="info-value">{{ fmtDateTime(state.detail.endTime) }}</text>
          </view>

          <view class="info-item">
            <text class="info-label">订单状态</text>
            <text
              class="info-value"
              :class="'status-' + (state.detail.orderStatus == 0 ? 'primary' : (state.detail.orderStatus == 1 ? 'success' : 'error'))"
            >
              {{ fmtDictName('Order.status', state.detail.orderStatus) }}
            </text>
          </view>

          <view class="info-item" v-if="state.detail.remark">
            <text class="info-label">备注</text>
            <text class="info-value">{{ state.detail.remark }}</text>
          </view>
        </view>
      </view>

      <!-- 费用明细卡片 -->
      <view class="fee-card">
        <view class="card-header">
          <view class="header-dot"></view>
          <text class="header-title">费用明细</text>
        </view>

        <view class="fee-list">
          <view class="fee-item" v-for="item in state.detail.orderItems" :key="item.name">
            <view class="fee-item-top">
              <text class="fee-name">{{ item.name }}</text>
              <text class="fee-amount">¥{{ item.amount }}</text>
            </view>
            <view class="fee-item-bottom">
              <text class="fee-meta">单价 ¥{{ item.price }}</text>
              <text class="fee-meta">{{ item.seconds }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 支付明细卡片 -->
      <view class="pay-card">
        <view class="card-header">
          <view class="header-dot"></view>
          <text class="header-title">支付明细</text>
        </view>

        <view class="pay-list">
          <view class="pay-item">
            <text class="pay-label">总消费金额</text>
            <text class="pay-value primary">-¥{{ ((state.detail.amount) / 100).toFixed(2) }}</text>
          </view>
          <view class="pay-item">
            <text class="pay-label">充值款支付</text>
            <text class="pay-value primary">-¥{{ ((state.detail.rechargePayment) / 100).toFixed(2) }}</text>
          </view>
          <view class="pay-item">
            <text class="pay-label">赠款支付</text>
            <text class="pay-value primary">-¥{{ ((state.detail.grantsPayment) / 100).toFixed(2) }}</text>
          </view>
          <view class="pay-item" v-if="state.detail.discountMoney > 0">
            <text class="pay-label">优惠金额</text>
            <text class="pay-value success">-¥{{ ((state.detail.discountMoney) / 100).toFixed(2) }}</text>
          </view>
        </view>
      </view>

      <!-- 客服入口 -->
      <button class="service-card" open-type="contact" send-message-title="YesWash洗车客服" session-from="order_detail">
        <view class="service-left">
          <view class="service-icon">
            <uv-icon name="kefu-ermai" color="#FFFFFF" size="18"></uv-icon>
          </view>
          <text class="service-text">联系客服</text>
        </view>
        <uv-icon name="arrow-right" color="#C0C4CC" size="14"></uv-icon>
      </button>

      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { get } from "@/utils/https";
import { fmtDictName, fmtDateTime, fmtDuration, fmtMoney } from "@/utils/common";

const initState = () => ({
  detail: {
    orderItems: [] as any[],
    orderId: '',
  } as any,
});

const state = reactive(initState());
const orderNo = ref('');
let loaded = false;

function loadData() {
  const user = getApp<any>().globalData.user;
  if (!user || !user.id) {
    uni.showToast({ title: '请先登录', icon: 'none' });
    setTimeout(() => {
      uni.redirectTo({ url: '/pages/index/index' });
    }, 200);
    return;
  }

  get(`/wash-order/detailWashOrder?userId=${user.id}&orderId=${orderNo.value}`)
    .then((res: any) => {
      state.detail = { ...state.detail, ...res };

      if (res.orderId) {
        state.detail.orderId = res.orderId;
      } else if (res.id) {
        state.detail.orderId = res.id;
      } else if (res.orderNo) {
        state.detail.orderId = res.orderNo;
      }

      state.detail.orderItems = (res.detail || [])
        .filter((k: any) => k.amount > 0 || k.seconds > 0)
        .map((s: any) => ({
          name: fmtDictName('Order.feeType', s.name),
          seconds: fmtDuration(s.seconds * 1000),
          price: fmtMoney(s.price),
          amount: fmtMoney(s.amount),
        }));
    })
    .catch(() => {
      uni.showToast({ title: '加载失败', icon: 'none' });
    });
}

onLoad((options: any) => {
  orderNo.value = options.orderNo || '';
  if (orderNo.value) {
    state.detail.orderId = orderNo.value;
  }
  loadData();
  loaded = true;
});

onShow(() => {
  if (loaded) {
    loadData();
  }
});

const handleCopy = () => {
  const orderId = String(
    state.detail?.orderId || state.detail?.orderNo || state.detail?.id || ''
  );

  if (!orderId) {
    uni.showToast({ title: '订单编号不存在', icon: 'none' });
    return;
  }

  // #ifdef MP-WEIXIN
  wx.setClipboardData({
    data: orderId,
    success: () => wx.showToast({ title: '复制成功', icon: 'success' }),
    fail: () => fallbackCopy(orderId),
  });
  // #endif
  // #ifndef MP-WEIXIN
  fallbackCopy(orderId);
  // #endif
};

const fallbackCopy = (orderId: string) => {
  uni.setClipboardData({
    data: orderId,
    success: () => uni.showToast({ title: '复制成功', icon: 'success' }),
    fail: () => uni.showToast({ title: '复制失败', icon: 'none' }),
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100vw;
  height: 100vh;
  background: $uni-bg-color-page;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-scroll {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}

// 金额概览卡片
.summary-card {
  margin: 24rpx 30rpx;
  background: $uni-bg-color-card;
  border-radius: 24rpx;
  padding: 36rpx 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .summary-left {
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .summary-label {
      font-size: 26rpx;
      color: $uni-text-color-hint;
    }

    .summary-amount {
      display: flex;
      align-items: baseline;

      .summary-symbol {
        font-size: 32rpx;
        color: $uni-text-color-dark;
        font-weight: $uni-font-weight-semibold;
        margin-right: 4rpx;
      }

      .summary-number {
        font-size: 60rpx;
        color: $uni-text-color-dark;
        font-weight: $uni-font-weight-bold;
        line-height: 1;
      }
    }
  }

  .summary-right {
    .summary-badge {
      padding: 10rpx 24rpx;
      border-radius: 20rpx;
      font-size: 26rpx;
      font-weight: $uni-font-weight-medium;
      white-space: nowrap;

      &.badge-primary {
        background: rgba($uni-color-primary, 0.08);
        color: $uni-color-primary;
      }

      &.badge-success {
        background: rgba($uni-color-success, 0.08);
        color: $uni-color-success;
      }

      &.badge-error {
        background: rgba($uni-color-error, 0.08);
        color: $uni-color-error;
      }
    }
  }
}

// 卡片通用
.info-card,
.fee-card,
.pay-card {
  margin: 24rpx 30rpx;
  background: $uni-bg-color-card;
  border-radius: 24rpx;
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 28rpx;
    border-bottom: 1rpx solid $uni-border-color-light;

    .header-dot {
      width: 10rpx;
      height: 10rpx;
      background: $uni-color-primary;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .header-title {
      font-size: 30rpx;
      font-weight: $uni-font-weight-semibold;
      color: $uni-text-color-dark;
    }
  }
}

// 订单信息
.info-list {
  padding: 0 28rpx;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid $uni-border-color-light;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 26rpx;
      color: $uni-text-color-hint;
      flex-shrink: 0;
    }

    .info-value-wrap {
      display: flex;
      align-items: center;
      gap: 12rpx;
      flex: 1;
      justify-content: flex-end;

      .info-value {
        font-size: 26rpx;
        color: $uni-text-color-dark;
        text-align: right;
      }

      .copy-btn {
        font-size: 24rpx;
        color: $uni-color-primary;
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        background: rgba($uni-color-primary, 0.06);
        flex-shrink: 0;

        &:active {
          background: rgba($uni-color-primary, 0.12);
        }
      }
    }

    .info-value {
      font-size: 26rpx;
      color: $uni-text-color-dark;
      text-align: right;
      flex: 1;
      margin-left: 40rpx;

      &.status-primary {
        color: $uni-color-primary;
      }

      &.status-success {
        color: $uni-color-success;
      }

      &.status-error {
        color: $uni-color-error;
      }
    }
  }
}

// 费用明细
.fee-list {
  padding: 0 28rpx;

  .fee-item {
    padding: 24rpx 0;
    border-bottom: 1rpx solid $uni-border-color-light;

    &:last-child {
      border-bottom: none;
    }

    .fee-item-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;

      .fee-name {
        font-size: 28rpx;
        color: $uni-text-color-dark;
        font-weight: $uni-font-weight-medium;
      }

      .fee-amount {
        font-size: 30rpx;
        color: $uni-color-primary;
        font-weight: $uni-font-weight-semibold;
      }
    }

    .fee-item-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .fee-meta {
        font-size: 26rpx;
        color: $uni-text-color-hint;
      }
    }
  }
}

// 支付明细
.pay-list {
  padding: 0 28rpx;

  .pay-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid $uni-border-color-light;

    &:last-child {
      border-bottom: none;
    }

    .pay-label {
      font-size: 26rpx;
      color: $uni-text-color-hint;
    }

    .pay-value {
      font-size: 28rpx;
      color: $uni-text-color-dark;
      font-weight: $uni-font-weight-medium;

      &.primary {
        color: $uni-color-primary;
      }

      &.success {
        color: $uni-color-success;
      }
    }
  }
}

// 客服入口
.service-card {
  margin: 24rpx 30rpx;
  background: $uni-bg-color-card;
  border-radius: 24rpx;
  padding: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  width: auto;
  line-height: inherit;
  font-size: inherit;
  box-sizing: border-box;

  &::after {
    border: none;
  }

  .service-left {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .service-icon {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background: #C6171E;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .service-text {
      font-size: 28rpx;
      color: $uni-text-color-dark;
      font-weight: $uni-font-weight-medium;
    }
  }
}
</style>
