<template>
  <view class="order-api-demo">
    <view class="header">
      <text class="title">订单API使用示例</text>
    </view>

    <!-- 设备续费示例 -->
    <view class="section">
      <text class="section-title">设备续费</text>
      <view class="form-item">
        <text class="label">套餐ID:</text>
        <input v-model="renewData.suitId" placeholder="请输入套餐ID" />
      </view>
      <view class="form-item">
        <text class="label">应用ID:</text>
        <input v-model="renewData.appId" placeholder="请输入应用ID" />
      </view>
      <view class="form-item">
        <text class="label">支付金额:</text>
        <input v-model="renewData.payAmount" placeholder="请输入支付金额" />
      </view>
      <view class="form-item">
        <text class="label">渠道ID:</text>
        <input v-model="renewData.channelId" placeholder="请输入渠道ID" />
      </view>
      <view class="form-item">
        <text class="label">设备ID:</text>
        <input v-model="renewData.devId" placeholder="请输入设备ID" />
      </view>
      <button @click="handleRenew" class="btn">设备续费</button>
    </view>

    <!-- 创建订单示例 -->
    <view class="section">
      <text class="section-title">创建订单</text>
      <view class="form-item">
        <text class="label">设备类型:</text>
        <input v-model="orderData.deviceType" placeholder="请输入设备类型" />
      </view>
      <view class="form-item">
        <text class="label">租赁周期:</text>
        <input v-model="orderData.period" placeholder="请输入租赁周期" />
      </view>
      <view class="form-item">
        <text class="label">金额:</text>
        <input v-model="orderData.amount" placeholder="请输入金额" />
      </view>
      <button @click="handleCreateOrder" class="btn">创建订单</button>
    </view>

    <!-- 获取订单列表示例 -->
    <view class="section">
      <text class="section-title">获取订单列表</text>
      <view class="form-item">
        <text class="label">页码:</text>
        <input v-model="listParams.page" placeholder="请输入页码" />
      </view>
      <view class="form-item">
        <text class="label">每页数量:</text>
        <input v-model="listParams.size" placeholder="请输入每页数量" />
      </view>
      <button @click="handleGetOrderList" class="btn">获取订单列表</button>
    </view>

    <!-- 结果显示 -->
    <view class="result-section" v-if="result">
      <text class="result-title">API返回结果:</text>
      <text class="result-content">{{ JSON.stringify(result, null, 2) }}</text>
    </view>
  </view>
</template>

<script>
import {
  renewDevice,
  createOrder,
  getOrderList,
  getOrderDetail,
  cancelOrder,
  payOrder
} from '@/api/order/order.js'

export default {
  name: 'OrderApiDemo',
  data() {
    return {
      // 续费数据
      renewData: {
        suitId: '3',
        appId: '1',
        payAmount: '365',
        channelId: '2',
        devId: '1'
      },
      // 订单数据
      orderData: {
        deviceType: '',
        period: '',
        amount: ''
      },
      // 列表查询参数
      listParams: {
        page: 1,
        size: 10,
        status: ''
      },
      // API返回结果
      result: null
    }
  },
  methods: {
    // 设备续费
    async handleRenew() {
      try {
        console.log('🔍 发送续费请求:', this.renewData)
        const response = await renewDevice(this.renewData)
        this.result = response
        console.log('✅ 续费成功:', response)
        
        uni.showToast({
          title: '续费成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('❌ 续费失败:', error)
        this.result = { error: error.message }
        
        uni.showToast({
          title: error.message || '续费失败',
          icon: 'error'
        })
      }
    },

    // 创建订单
    async handleCreateOrder() {
      try {
        console.log('🔍 发送创建订单请求:', this.orderData)
        const response = await createOrder(this.orderData)
        this.result = response
        console.log('✅ 创建订单成功:', response)
        
        uni.showToast({
          title: '创建订单成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('❌ 创建订单失败:', error)
        this.result = { error: error.message }
        
        uni.showToast({
          title: error.message || '创建订单失败',
          icon: 'error'
        })
      }
    },

    // 获取订单列表
    async handleGetOrderList() {
      try {
        console.log('🔍 发送获取订单列表请求:', this.listParams)
        const response = await getOrderList(this.listParams)
        this.result = response
        console.log('✅ 获取订单列表成功:', response)
        
        uni.showToast({
          title: '获取订单列表成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('❌ 获取订单列表失败:', error)
        this.result = { error: error.message }
        
        uni.showToast({
          title: error.message || '获取订单列表失败',
          icon: 'error'
        })
      }
    },

    // 获取订单详情
    async getOrderDetail(orderId) {
      try {
        const response = await getOrderDetail(orderId)
        console.log('✅ 获取订单详情成功:', response)
        return response
      } catch (error) {
        console.error('❌ 获取订单详情失败:', error)
        throw error
      }
    },

    // 取消订单
    async cancelOrder(orderId) {
      try {
        const response = await cancelOrder(orderId)
        console.log('✅ 取消订单成功:', response)
        return response
      } catch (error) {
        console.error('❌ 取消订单失败:', error)
        throw error
      }
    },

    // 支付订单
    async payOrder(orderId, payMethod) {
      try {
        const response = await payOrder({
          orderId,
          payMethod
        })
        console.log('✅ 支付订单成功:', response)
        return response
      } catch (error) {
        console.error('❌ 支付订单失败:', error)
        throw error
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-api-demo {
  padding: 30rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .label {
    width: 160rpx;
    font-size: 28rpx;
    color: #666;
  }
  
  input {
    flex: 1;
    height: 70rpx;
    padding: 0 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
    
    &:focus {
      border-color: #007aff;
    }
  }
}

.btn {
  width: 100%;
  height: 80rpx;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 20rpx;
  
  &:active {
    background: #0056cc;
  }
}

.result-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  
  .result-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .result-content {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
  }
}
</style> 