<template>
  <view class="page-container">
    <uv-navbar title="洗车订单" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
    <!-- 空状态 -->
    <view class="empty-wrapper" v-if="!loading && (!state.orderList || state.orderList.length === 0)">
      <uv-empty mode="order" text="暂无订单记录" :marginTop="200"></uv-empty>
    </view>

    <!-- 订单列表 -->
    <scroll-view
      v-else
      class="order-scroll"
      scroll-y="true"
      @scrolltolower="loadMore"
    >
      <view class="order-list">
        <view
          class="order-card"
          v-for="(item, index) in state.orderList"
          :key="index"
          @click="handleClickDetail(item)"
        >
          <view class="order-header">
            <view class="order-number">
              <uv-icon name="order" size="16" color="#C6171E"></uv-icon>
              <text class="number-text">{{ item.orderId }}</text>
              <text class="copy-btn" @click.stop="handleCopy(item.orderId)">复制</text>
            </view>
            <view
              class="order-status"
              :class="'status-' + (item.payStatus == 0 ? 'primary' : (item.payStatus == 1 ? 'success' : 'error'))"
            >
              {{ fmtDictName('Order.pay', item.payStatus) }}
            </view>
          </view>

          <view class="order-content">
            <view class="order-info">
              <view class="info-item" v-if="item.stationName">
                <uv-icon name="map" size="16" color="#909399"></uv-icon>
                <text class="info-label">消费站点</text>
                <text class="info-value">{{ item.stationName }}</text>
              </view>
              <view class="info-item">
                <uv-icon name="clock" size="16" color="#909399"></uv-icon>
                <text class="info-label">消费时间</text>
                <text class="info-value">{{ fmtDateTime(item.startTime) }}</text>
              </view>
            </view>

            <view class="order-amount">
              <text class="amount-label">支付金额</text>
              <view class="amount-value">
                <text class="amount-symbol">¥</text>
                <text class="amount-number">{{ (item.amount / 100).toFixed(2) }}</text>
              </view>
            </view>
          </view>

          <view class="order-footer">
            <view class="footer-detail">
              <text>查看详情</text>
              <uv-icon name="arrow-right" size="12" color="#C0C4CC"></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="load-more-wrapper">
        <uv-load-more
          :status="computedLoadMoreStatus"
          @loadmore="loadMore"
          :height="40"
        />
      </view>

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

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { onHide, onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { get } from "@/utils/https";
import { fmtDictName, fmtDateTime } from "@/utils/common";

const initState = () => ({
  orderList: [] as any[],
  query: {
    pageNum: 1,
    pageSize: 10
  },
  hasNext: false
});

const state = reactive(initState());
const loading = ref(false);

onShow(() => {
  const gd = getApp<any>().globalData;
  if (!gd.token) return;
  loadOrderList(true);
});

onHide(() => {
  Object.assign(state, initState());
});

const computedLoadMoreStatus = computed(() => {
  return state.hasNext ? 'loadmore' : 'nomore';
});

onPullDownRefresh(() => {
  loadOrderList(true);
});

onReachBottom(() => {
  loadMore();
});

const loadMore = () => {
  if (state.hasNext) {
    loadOrderList(false);
  }
};

const loadOrderList = (refresh: boolean) => {
  if (!refresh) {
    state.query.pageNum++;
  } else {
    state.query.pageNum = 1;
  }

  if (refresh) loading.value = true;

  get("/wash-order/listMyWashOrder", state.query)
    .then((res: any) => {
      if (res.list) {
        if (refresh) {
          state.orderList = res.list;
        } else {
          state.orderList = state.orderList.concat(res.list);
        }
        state.hasNext = res.pages > state.query.pageNum;
      }
    })
    .catch(() => {
      uni.showToast({ title: '加载失败', icon: 'none' });
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      loading.value = false;
    });
};

const handleClickDetail = (orderDetail: any) => {
  uni.navigateTo({
    url: `/pages-order/detail/index?id=${orderDetail.id}&type=3&orderNo=${orderDetail.orderId}`,
  });
};

const handleCopy = (orderId: string) => {
  if (!orderId) {
    uni.showToast({ title: '订单编号不存在', icon: 'none' });
    return;
  }
  // #ifdef MP-WEIXIN
  wx.setClipboardData({
    data: orderId,
    success: () => {
      wx.showToast({ title: '复制成功', icon: 'success', duration: 2000 });
    },
    fail: () => {
      uni.setClipboardData({
        data: orderId,
        success: () => uni.showToast({ title: '复制成功', icon: 'success' }),
        fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
      });
    }
  });
  // #endif
  // #ifndef MP-WEIXIN
  uni.setClipboardData({
    data: orderId,
    success: () => uni.showToast({ title: '复制成功', icon: 'success' }),
    fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
  });
  // #endif
};
</script>

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

.empty-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-scroll {
  flex: 1;
  height: 100%;
  width: 100%;
}

.order-list {
  padding: 24rpx 30rpx;
}

// 订单卡片
.order-card {
  margin-bottom: 24rpx;
  overflow: hidden;
  @include card-interactive(24rpx);

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

    .order-number {
      display: flex;
      align-items: center;
      gap: 8rpx;
      flex: 1;

      .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;
      }

      .number-text {
        font-size: 26rpx;
        color: $uni-text-color-dark;
        font-weight: $uni-font-weight-medium;
      }
    }

    .order-status {
      font-size: 24rpx;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      font-weight: $uni-font-weight-medium;
      flex-shrink: 0;

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

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

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

  .order-content {
    padding: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .order-info {
      flex: 1;

      .info-item {
        display: flex;
        align-items: center;
        gap: 8rpx;

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

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

    .order-amount {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8rpx;

      .amount-label {
        font-size: 24rpx;
        color: $uni-text-color-hint;
      }

      .amount-value {
        display: flex;
        align-items: baseline;
        gap: 4rpx;

        .amount-symbol {
          font-size: 26rpx;
          color: $uni-color-primary;
          font-weight: $uni-font-weight-medium;
        }

        .amount-number {
          font-size: 40rpx;
          color: $uni-color-primary;
          font-weight: $uni-font-weight-semibold;
          line-height: 1;
        }
      }
    }
  }

  .order-footer {
    padding: 16rpx 28rpx;
    border-top: 1rpx solid $uni-border-color-light;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .footer-detail {
      display: flex;
      align-items: center;
      gap: 4rpx;
      font-size: 26rpx;
      color: $uni-text-color-hint;
    }
  }
}

.load-more-wrapper {
  padding: 20rpx 0;
}
</style>
