<template>
  <view class="return-container">
    <!-- 订单信息卡片 -->
    <view class="order-card">
      <view class="order-header">
        <text class="title">使用中</text>
        <text class="order-no">订单号：{{ orderInfo.orderId }}</text>
      </view>
      
      <view class="device-info">
        <text class="device-name">共享风扇</text>
        <text class="device-id">设备号：{{ deviceId }}</text>
      </view>

      <view class="time-info">
        <view class="time-item">
          <text class="label">开始时间</text>
          <text class="value">{{ orderInfo.startTime }}</text>
        </view>
        <view class="time-item">
          <text class="label">已使用时长</text>
          <text class="value highlight">{{ orderInfo.usedTime }}</text>
        </view>
        <view class="time-item">
          <text class="label">当前费用</text>
          <text class="value">￥{{ orderInfo.currentFee }}</text>
        </view>
      </view>
    </view>

    <!-- 归还说明 -->
    <view class="notice-card">
      <view class="notice-title">归还说明</view>
      <view class="notice-list">
        <view class="notice-item">
          <view class="dot"></view>
          <text>请确保设备完好无损</text>
        </view>
        <view class="notice-item">
          <view class="dot"></view>
          <text>请在指定区域内归还设备</text>
        </view>
        <view class="notice-item">
          <view class="dot"></view>
          <text>归还后押金将自动退还</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="unlock-btn" @click="handleUnlock" :disabled="unlocking">
        {{ unlocking ? '开锁中...' : '开锁归还' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceId: '',
      orderInfo: {
        orderId: '',
        startTime: '',
        usedTime: '',
        currentFee: '0.00'
      },
      unlocking: false,
      timer: null
    }
  },
  onLoad(options) {
    this.deviceId = options.deviceId
    this.getActiveOrder()
  },
  onUnload() {
    this.clearTimer()
  },
  methods: {
    // 获取进行中的订单信息
    async getActiveOrder() {
      try {
        uni.showLoading({ title: '加载中' })
        const result = await this.$api.getActiveOrder()
        
        if (result.success) {
          this.orderInfo = {
            orderId: result.data.orderId,
            startTime: result.data.startTime,
            usedTime: result.data.usedTime,
            currentFee: result.data.currentFee
          }
          this.startTimer()
        } else {
          uni.showToast({
            title: '没有进行中的订单',
            icon: 'none'
          })
          // 如果没有进行中的订单，返回首页
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/index'
            })
          }, 1500)
        }
      } catch (error) {
        uni.showToast({
          title: '获取订单信息失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 处理开锁请求
    async handleUnlock() {
      if (this.unlocking) return
      
      try {
        this.unlocking = true
        uni.showLoading({ title: '开锁中' })
        
        // 发送开锁请求
        const result = await this.$api.unlockDevice({
          deviceId: this.deviceId,
          orderId: this.orderInfo.orderId
        })
        
        if (result.success) {
          uni.showToast({
            title: '开锁成功',
            icon: 'success'
          })
          // 开锁成功后，可以添加其他逻辑，比如显示归还确认按钮等
        } else {
          throw new Error(result.message || '开锁失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '开锁失败，请重试',
          icon: 'none'
        })
      } finally {
        this.unlocking = false
        uni.hideLoading()
      }
    },
    
    // 更新使用时长
    startTimer() {
      this.timer = setInterval(async () => {
        try {
          const result = await this.$api.getOrderStatus(this.orderInfo.orderId)
          if (result.success) {
            this.orderInfo.usedTime = result.data.usedTime
            this.orderInfo.currentFee = result.data.currentFee
          }
        } catch (error) {
          console.error('更新订单状态失败:', error)
        }
      }, 60000) // 每分钟更新一次
    },
    
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.return-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
  padding-bottom: 180rpx;
  box-sizing: border-box;

  .order-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #1976D2;
      }

      .order-no {
        font-size: 24rpx;
        color: #999;
      }
    }

    .device-info {
      margin-bottom: 30rpx;

      .device-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-right: 20rpx;
      }

      .device-id {
        font-size: 24rpx;
        color: #666;
      }
    }

    .time-info {
      .time-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

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

        .label {
          font-size: 28rpx;
          color: #666;
        }

        .value {
          font-size: 28rpx;
          color: #333;

          &.highlight {
            color: #1976D2;
            font-weight: 500;
          }
        }
      }
    }
  }

  .notice-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

    .notice-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 24rpx;
    }

    .notice-list {
      .notice-item {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

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

        .dot {
          width: 12rpx;
          height: 12rpx;
          background: #1976D2;
          border-radius: 50%;
          margin-right: 16rpx;
        }

        text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.04);

    .unlock-btn {
      width: 80%;
      height: 88rpx;
      background: linear-gradient(135deg, #1976D2, #42A5F5);
      border-radius: 44rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;

      &:active {
        transform: scale(0.98);
      }

      &[disabled] {
        background: #ccc;
        transform: none;
      }
    }
  }
}
</style>