<template>
  <view class="page-container bg-f5f7fa" v-if="list">
    <!-- 金额卡片 -->
    <view class="amount-card bg-theme br-16 mx-32 mt-32 p-36 shadow-md">
      <view class="flex-column items-center">
        <view class="fs-26 color-fff mb-12">实付金额</view>
        <view class="flex-align-center">
          <text class="fs-44 color-fff mr-10">¥</text>
          <text class="fs-64 fw-600 color-fff lh-64">{{ price }}</text>
        </view>
        <view class="fs-22 color-fff opacity-80 mt-12" v-if="orderDetail">
          {{ orderDetail.chargeStatus === 2 ? '充电中' : '已完成' }}
        </view>
      </view>
    </view>
    
    <!-- 订单信息卡片 -->
    <view class="info-card bg-fff br-20 mx-32 mt-28 p-36 shadow-sm">
      <!-- 充电站点 -->
      <view class="info-item flex-align-center pb-32 border-b border-eee">
        <view class="info-icon flex-center w-56 h-56 bg-theme-light br-10 mr-20">
          <uni-icons type="location" size="26" color="#419D95"></uni-icons>
        </view>
        <view class="flex-grow">
          <view class="fs-24 color-999 mb-8">充电站点</view>
          <view class="fs-28 fw-500 color-333">{{ list[0]?.value }}</view>
        </view>
      </view>
      
      <!-- 充电详情 -->
      <view class="charge-detail mt-32">
        <view class="fs-28 fw-500 color-333 mb-24">充电详情</view>
        
        <view class="detail-grid">
          <!-- 累计充电量 -->
          <view class="detail-item flex-column items-center p-24 bg-f5f7fa br-12">
            <view class="fs-24 color-999 mb-8">累计充电量</view>
            <view class="fs-32 fw-600 color-333">{{ list[1]?.value }}</view>
          </view>
          
          <!-- 充电用时 -->
          <view class="detail-item flex-column items-center p-24 bg-f5f7fa br-12 ml-16">
            <view class="fs-24 color-999 mb-8">充电用时</view>
            <view class="fs-32 fw-600 color-333">{{ list[list.length - 2]?.value }}</view>
          </view>
        </view>
      </view>
      
      <!-- 订单信息列表 -->
      <view class="info-list mt-36">
        <block v-for="(item, index) in list" :key="index">
          <view 
            class="info-row flex-align-center justify-between py-20" 
            v-if="index > 1 && index < list.length - 2"
          >
            <view class="fs-26 color-666">
              {{ item.label }}
            </view>
            <view 
              class="fs-26" 
              :class="{ 'color-theme': item.color === '#F43636', 'color-333': !item.color }"
              :style="{ color: item.color ? '#419D95' : '' }"
            >
              {{ item.value }}
              <uni-icons 
                v-if="item.copy" 
                type="copy" 
                size="24" 
                color="#999" 
                class="ml-12"
                @click="copyText(item.value)"
              ></uni-icons>
            </view>
          </view>
        </block>
      </view>
      
      <!-- 优惠信息 -->
      <view class="discount-info mt-32 pt-32 border-t border-eee">
        <view 
          class="flex-align-center justify-between cursor-pointer" 
          @click="handleClickDesc"
          v-if="orderDetail && orderDetail.discountAmount > 0"
        >
          <view class="fs-26 color-666">优惠信息</view>
          <view class="flex-align-center">
            <view class="fs-26 color-theme mr-12">查看详情</view>
            <uni-icons type="right" size="24" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 优惠券详情组件 -->
    <order-coupon-detail ref="order_coupon_detail_ref"></order-coupon-detail>
  </view>
  
  <!-- 加载状态 -->
  <view class="loading-state flex-center" v-else>
    <uni-icons type="spinner" size="40" color="#419D95" class="loading-icon"></uni-icons>
    <view class="fs-28 color-999 ml-16">加载中...</view>
  </view>
</template>

<script setup lang="ts">
import { fetchOrder} from "../../api/user";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import OrderCouponDetail from "@/components/order-coupon-detail/order-coupon-detail.vue";
import { to } from "@/utils/navigate";

const list = ref<any[]>();
const price = ref();
const orderDetail = ref();
const order_coupon_detail_ref = ref();

const handleClickDesc = () => {
  console.log("handleClickDesc")
  let {startChargeSeq,discountType} = orderDetail.value;
  order_coupon_detail_ref.value?.open(startChargeSeq,discountType);
}

// 复制文本
const copyText = (text: string) => {
  uni.setClipboardData({
    data: text,
    success() {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 1500
      });
    }
  });
};



onLoad((options: any) => {
  fetchOrder(options.id)
    .then((res) => {
      orderDetail.value = res;
      const totalMoney = (res.totalMoney / 100).toFixed(2);
      const elecMoney = res.elecMoney ? (res.elecMoney / 100).toFixed(2) : '0.00';
      const serviceMoney = res.serviceMoney ? (res.serviceMoney / 100).toFixed(2) : '0.00';
      const discountAmount = (res.discountAmount / 100).toFixed(2);
      const discountAmountText = res.rightsDesc;
      const startChargeSeq = res.startChargeSeq;
      const reg = new RegExp("\B(?=(\d{3})+(?!\d))", "g");
      const start = new Date(res.startTime.replace(/-/g, "/"));
      const end = res.endTime
        ? new Date(res.endTime.replace(/-/g, "/"))
        : new Date();
      let diff = parseInt(`${(end.getTime() - start.getTime()) / 1000}`);
      if (diff <= 0) {
        diff = 60;
      }
      const min = parseInt(`${diff / 60}`);
      const time =
        min >= 60
          ? `${parseInt(`${min / 60}`)}小时${parseInt(
              `${min - parseInt(`${min / 60}`) * 60}`
            )}分钟`
          : `${parseInt(`${diff / 60}`)}分钟`;
      const _list = [
        {
          label: "充电站点",
          value: `${res.stationName}`,
        },
        {
          label: "累计充电量",
          value: `${res.totalPower}度`,
        },
        {
          label: "电费",
          value: `${elecMoney.replace(reg, ",")}元`,
        },
        {
          label: "服务费",
          value: `${serviceMoney.replace(reg, ",")}元`,
        },
        {
          label: "订单金额",
          value: `${totalMoney.replace(reg, ",")}元`,
        },
       /* {
          label: "折扣金额",
          value: `${discountAmount.replace(reg, ",")}元`,
          discount:true
        },*/
        {
          label: "开始时间",
          value: res.startTime,
          color: "",
        },
        {
          label: "结束时间",
          value: res.chargeStatus === 2 ? "充电中" : res.endTime,
        },
        {
          label: "充电用时",
          value: time,
        },  {
          label: "订单号",
          value: startChargeSeq,
          copy:true
        },
      ];
      if (Number(discountAmount) > 0) {
        _list.splice(2, 0, {
          label: "优惠金额",
          value: `${
            Number(discountAmount) <= 0 ? "" : "-"
          }${discountAmount}元${discountAmountText}`,
          color: "#F43636",
          discount:true
        });
      }
      list.value = _list;
      price.value = (res.payAmount / 100).toFixed(2);
    })
    .catch(() => {
      uni.showModal({
        content: "出现错误，请退出重进",
        success() {
          uni.navigateBack();
        },
      });
    });
});
</script>

<style lang="scss">
.page-container {
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 金额卡片 */
.amount-card {
  background: linear-gradient(135deg, #419D95 0%, #368a84 100%);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 24rpx rgba(65, 157, 149, 0.3);
  }
}

/* 信息卡片 */
.info-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
}

/* 充电详情网格 */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.detail-item {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
}

/* 操作按钮 */
.btn-theme {
  background: linear-gradient(135deg, #419D95 0%, #368a84 100%);
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(65, 157, 149, 0.3);
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 16rpx rgba(65, 157, 149, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 加载状态 */
.loading-state {
  min-height: 60vh;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 工具类 */
.bg-f5f7fa {
  background-color: #f5f7fa;
}

.bg-fff {
  background-color: #ffffff;
}

.bg-primary {
  background-color: #ff6b35;
}

.bg-primary-light {
  background-color: rgba(255, 107, 53, 0.1);
}

.bg-success {
  background-color: #4cd964;
}

.bg-success-light {
  background-color: rgba(76, 217, 100, 0.1);
}

.bg-theme {
  background-color: #419D95;
}

.bg-theme-light {
  background-color: rgba(65, 157, 149, 0.1);
}

.br-12 {
  border-radius: 12rpx;
}

.br-16 {
  border-radius: 16rpx;
}

.br-20 {
  border-radius: 20rpx;
}

.mx-32 {
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.mt-28 {
  margin-top: 28rpx;
}

.mt-32 {
  margin-top: 32rpx;
}

.mb-16 {
  margin-bottom: 16rpx;
}

.mb-24 {
  margin-bottom: 24rpx;
}

.mb-40 {
  margin-bottom: 40rpx;
}

.ml-12 {
  margin-left: 12rpx;
}

.ml-16 {
  margin-left: 16rpx;
}

.ml-24 {
  margin-left: 24rpx;
}

.mt-8 {
  margin-top: 8rpx;
}

.mt-16 {
  margin-top: 16rpx;
}

.p-24 {
  padding: 24rpx;
}

.p-36 {
  padding: 36rpx;
}

.p-40 {
  padding: 40rpx;
}

.pb-32 {
  padding-bottom: 32rpx;
}

.pt-32 {
  padding-top: 32rpx;
}

.py-20 {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.w-60 {
  width: 60rpx;
}

.h-60 {
  height: 60rpx;
}

.h-92 {
  height: 92rpx;
}

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

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-grow {
  flex-grow: 1;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.border-b {
  border-bottom: 1rpx solid #f0f0f0;
}

.border-t {
  border-top: 1rpx solid #f0f0f0;
}

.border-eee {
  border-color: #eeeeee;
}

.shadow-sm {
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.color-333 {
  color: #333333;
}

.color-666 {
  color: #666666;
}

.color-999 {
  color: #999999;
}

.color-fff {
  color: #ffffff;
}

.color-primary {
  color: #ff6b35;
}

.color-success {
  color: #4cd964;
}

.color-theme {
  color: #419D95;
}

.fs-24 {
  font-size: 24rpx;
}

.fs-26 {
  font-size: 26rpx;
}

.fs-28 {
  font-size: 28rpx;
}

.fs-32 {
  font-size: 32rpx;
}

.fs-48 {
  font-size: 48rpx;
}

.fs-72 {
  font-size: 72rpx;
}

.lh-72 {
  line-height: 72rpx;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.opacity-80 {
  opacity: 0.8;
}

.cursor-pointer {
  cursor: pointer;
}

.w-full {
  width: 100%;
}
</style>
