<template>
  <view class="order-detail">
    <!-- 顶部导航栏 -->
		<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>

    <!-- 订单信息卡片 -->
    <view class="order-card">
      <view class="shop-info">
        <text class="shop-name">【{{orderInfo.storeName == null ? '--' : orderInfo.storeName}}】</text>
        <text class="status" style="color: #fff;">
		<text v-if="orderInfo.status == 'CANCELED'">已取消</text>
		<text v-if="orderInfo.status == 'FINISHED'">已完成</text>
		<text v-if="orderInfo.status == 'WAIT_PAY'">待支付</text>
		<text v-if="orderInfo.status == 'REFUNDED'">已退款</text>
		</text>
      </view>
      <view class="order-amount">
        <view class="amount-item">
          <text>使用次数</text>
          <text>{{orderInfo.suitNum == null ? '--' : orderInfo.suitNum}}次</text>
        </view>
		<view class="amount-item">
		  <text>退还次数</text>
		  <text>{{orderInfo.refundNum == null ? '--' : orderInfo.refundNum}}次</text>
		</view>
        <view class="amount-item">
          <text>金额</text>
          <text>¥ {{orderInfo.suitAmount == null ? '--' : orderInfo.suitAmount}}</text>
        </view>
        <!-- <view class="amount-item">
          <text>合计</text>
          <text>¥ {{orderInfo.total}}</text>
        </view> -->
        <view class="amount-item">
          <text>退款金额</text>
          <text>¥ {{orderInfo.payRefunded == null ? '--' : orderInfo.payRefunded}}</text>
        </view>
      </view>
      <view class="total-amount">
        <text>实付：</text>
        <text class="price">¥ {{orderInfo.payedAmount == null ? '--' : orderInfo.payedAmount}}</text>
      </view>
    </view>

    <!-- 订单明细 -->
    <view class="order-info">
      <view class="info-title">订单明细</view>
      <view class="info-item">
        <text>订单编号</text>
        <text>{{orderInfo.orderNo == null ? '--' : orderInfo.orderNo}}</text>
      </view>
      <view class="info-item">
        <text>订单类型</text>
        <text>充值订单</text>
      </view>
      <view class="info-item">
        <text>支付方式</text>
        <text>微信支付</text>
      </view>
      <view class="info-item">
        <text>下单时间</text>
        <text>{{orderInfo.createTime == null ? '--' : orderInfo.createTime}}</text>
      </view>
      <view class="info-item">
        <text>下单手机号</text>
        <text>{{orderInfo.phoneNumber == null ? '--' : orderInfo.phoneNumber}}</text>
      </view>
    </view>

    <!-- 使用记录 -->
    <!-- <view class="usage-record">
      <view class="record-title">使用记录</view>
      <view class="record-list">
        <view v-for="(record, index) in usageRecords" :key="index" class="record-item">
          <view class="record-date">{{record.date}}</view>
          <view class="record-content">
            <text class="record-desc">{{record.description}}</text>
            <text class="record-time">{{record.time}}</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 底部退款按钮 -->
    <view class="footer">
      <view class="refund-btn" @click="showRefundPopup">
        申请退款
      </view>
    </view>

    <!-- 退款弹窗 -->
    <u-popup v-model="showRefund" mode="center" border-radius="8" width="600rpx">
      <view class="refund-popup">
        <view class="popup-title">退款申请</view>
        <view class="popup-content">
          <view class="amount-info">
            <view class="total-amount">
              <text>订单总金额</text>
              <text class="amount">¥{{orderInfo.realAmount == null ? '0' : orderInfo.realAmount}}</text>
            </view>
			<view class="total-amount">
			  <text>订单总次数</text>
			  <text class="amount">{{orderInfo.suitNum == null ? '0' : Number(orderInfo.suitNum) - Number(orderInfo.refundNum) }}次</text>
			</view>
			<view class="refund-amount">
			  <text>退还次数</text>
			  <view class="amount-input">
			    <text class="currency" style="margin-bottom: 0;"></text>
			    <u-input
			      v-model="number"
			      type="number"
			      :border="false"
			      placeholder="请输入退还次数"
			      :maxlength="10"
			    ></u-input>
			  </view>
			</view>
            <view class="refund-amount" style="margin-top: 20rpx;">
              <text>退款金额</text>
              <view class="amount-input">
                <text class="currency" style="margin-bottom: 0;">¥</text>
                <u-input
                  v-model="refundAmount"
                  type="number"
                  :border="false"
                  placeholder="请输入退款金额"
                  :maxlength="10"
                ></u-input>
              </view>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="cancel-btn" @click="closeRefundPopup">取消</view>
          <view class="confirm-btn" @click="submitRefund">确认退款</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
        bgc: {
			backgroundColor: "#1a1a1a",
		},
      orderInfo: {},
      usageRecords: [
        {
          date: '2025-03-12',
          description: '用户在【C-1】停好3次',
          time: '18:22:56'
        }
      ],
      // 退款相关数据
      showRefund: false,
      refundAmount: '', // 退款金额字段
	  orderid:'',
	  number:'',
	  flag:true
    }
  },
  onLoad(option) {
  	 this.orderid = option.orderid
	 this.getxq()
  },
  methods: {
	 // 请求订单详情
	 getxq(){
		 this.$u.get(`/bst/order/${this.orderid}`).then(res =>{
		 	if(res.code == 200){
		 	   this.orderInfo = res.data
			}	
		 })
	 },
    goBack() {
      uni.navigateBack()
    },
    // 显示退款弹窗
    showRefundPopup() {
      this.showRefund = true
      this.refundAmount = this.orderInfo.actualAmount // 默认显示实际支付金额
    },

    // 关闭退款弹窗
    closeRefundPopup() {
      this.showRefund = false
      this.refundAmount = ''
    },

    // 提交退款申请
    submitRefund() {
      if (!this.refundAmount || isNaN(this.refundAmount) || Number(this.refundAmount) <= 0) {
        uni.showToast({
          title: '请输入有效的退款金额',
          icon: 'none'
        })
        return
      }
      if (Number(this.refundAmount) > Number(this.orderInfo.realAmount == null ? 0 : this.orderInfo.realAmount)) {
        uni.showToast({
          title: '退款金额不能大于实付金额',
          icon: 'none'
        })
        return
      }
	  if(this.flag == true){
		  this.flag = false
		  uni.showLoading({
		    title: '提交中...'
		  })
		  let data = {
		  		  orderId:this.orderid,
		  		  amount:this.refundAmount,
		  		  Number:this.number
		  }
		  this.$u.put(`/bst/order/refund`,data).then(res =>{
		  	  if(res.code == 200){
		  	    setTimeout(() => {
		  	      uni.hideLoading()
		  	      uni.showToast({
		  	        title: '退款申请已提交',
		  	        icon: 'success'
		  	      })
				  this.flag = true
		  	      this.closeRefundPopup()
		  	    }, 2000)
		  	  }else{
				uni.hideLoading()
		  		uni.showToast({
		  		  title: res.msg,
		  		  icon: 'none',
		  		  duration:2000
		  		})
				setTimeout(()=>{
					this.flag = true
				},2000)
		  	  }
		  })
	  }
    }
  }
}
</script>

<style lang="scss" scoped>
	/deep/ .u-input__input{
		color: #fff !important;
	}
.order-detail {
  padding-bottom: 200rpx;
  box-sizing: border-box;
  background-color: #1a1a1a;
  height: 100vh;
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 16px 10px;
    background-color: #1a1a1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .title {
      font-size: 17px;
      font-weight: 500;
      color: #fff;
    }
    
    .back-icon, .right-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }

  .order-card {
    margin: 12px;
    padding: 16px;
    background-color: #242424;
    border-radius: 8px;
    
    .shop-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      
      .shop-name {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
      }
      
      .status {
        color: #666;
      }
    }
    
    .order-amount {
      .amount-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        color: #999;
        
        text:last-child {
          color: #fff;
        }
      }
    }
    
    .total-amount {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
      border-top: 1px dashed rgba(255, 255, 255, 0.1);
      padding-top: 16px;
      
      text {
        color: #999;
      }
      
      .price {
        color: #ff4d4f;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }

  .order-info {
    margin: 12px;
    padding: 16px;
    background-color: #242424;
    border-radius: 8px;
    
    .info-title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 16px;
    }
    
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      
      text:first-child {
        color: #999;
      }
      
      text:last-child {
        color: #fff;
      }
    }
  }

  .usage-record {
    margin: 12px;
    padding: 16px;
    background-color: #242424;
    border-radius: 8px;
    .record-title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 16px;
    }
    
    .record-list {
      .record-item {
        margin-bottom: 16px;
        
        .record-date {
          color: #666;
          margin-bottom: 8px;
        }
        
        .record-content {
          display: flex;
          justify-content: space-between;
          background-color: #1a1a1a;
          padding: 12px;
          border-radius: 4px;
          
          .record-desc {
            color: #fff;
          }
          
          .record-time {
            color: #666;
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background-color: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    .refund-btn {
      height: 44px;
      line-height: 44px;
      text-align: center;
      background-color: #ff4d4f;
      color: #fff;
      border-radius: 22px;
      font-size: 16px;
    }
  }

  .refund-popup {
    background-color: #242424;
    padding: 20px;
    
    .popup-title {
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .popup-content {
      .amount-info {
        .total-amount {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding: 12px;
          background-color: #1a1a1a;
          border-radius: 4px;

          text {
            color: #999;
          }

          .amount {
            color: #ff4d4f;
            font-size: 18px;
            font-weight: 500;
          }
        }

        .refund-amount {
          text {
            display: block;
            color: #999;
            margin-bottom: 8px;
          }

          .amount-input {
            display: flex;
            align-items: center;
            background-color: #1a1a1a;
            padding: 8px 12px;
            border-radius: 4px;

            .currency {
              color: #fff;
              margin-right: 8px;
            }
          }
        }
      }
    }
    
    .popup-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      
      .cancel-btn, .confirm-btn {
        width: 45%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
      }
      
      .cancel-btn {
        background-color: #333;
        color: #fff;
      }
      
      .confirm-btn {
        background-color: #ff4d4f;
        color: #fff;
      }
    }
  }
}
</style>
