/**
 * 订单详情页面
 */
import { View, Text, Image } from '@tarojs/components'
import Taro, { useLoad, useRouter } from '@tarojs/taro'
import { useState } from 'react'
import { ArrowDown } from '@taroify/icons'
import './index.scss'

// 使用本地图片资源
const phoneIcon = require('../../pageScan/startTable/images/phone.png')
const locationIcon = require('../../assets/icon/locationIcon.png')
const tableBgImg = require('../../pageScan/startTable/images/startBiliardCardBg.png')

const OrderDetail = () => {
  const router = useRouter()
  const { orderId } = router.params as { orderId?: string }
  const [expanded, setExpanded] = useState(false) // 订单详情是否展开
  const [couponExpanded, setCouponExpanded] = useState(false) // 优惠券详情是否展开
  const [priceExpanded, setPriceExpanded] = useState(false) // 收费标准详情是否展开

  useLoad(() => {
    console.log('订单详情页面加载，订单ID:', orderId)
  })

  // 拨打电话
  const handlePhoneCall = () => {
    Taro.makePhoneCall({
      phoneNumber: '100-666-XXXX',
    }).catch((err) => {
      console.error('拨打电话失败:', err)
    })
  }

  // 切换展开/收起
  const handleToggleExpand = () => {
    setExpanded(!expanded)
  }

  return (
    <View className="order-detail-page">
      {/* 内容区域 */}
      <View className="content-area">
        {/* 台球桌信息卡片 */}
        <View className="table-card" style={{ backgroundImage: `url(${tableBgImg})` }}>
          {/* 顶部：类型和店名 */}
          <View className="card-header">
            <Text className="table-type">中式台球</Text>
            <View className="phone-box" onClick={handlePhoneCall}>
              <Image className="phone-icon" src={phoneIcon} mode="aspectFit" />
              <Text className="phone-text">联系店长</Text>
            </View>
          </View>

          {/* 台球桌标题和使用状态 */}
          <View className="table-title-row">
            <Text className="table-title">来力.山岩-A03/3号球桌</Text>
            <Text className="table-status">已完成</Text>
          </View>

          {/* 位置信息 */}
          <View className="location-info">
            <Image className="location-icon" src={locationIcon} mode="aspectFit" />
            <Text className="location-text">北京黑八大师联盟球厅店</Text>
          </View>
        </View>

        {/* 开台订单信息卡片 */}
        <View className="order-info-card">
          {/* 顶部：开台方式和详情按钮 */}
          <View className="order-header" onClick={handleToggleExpand}>
            <View className="order-tag">
              <Text className="tag-text">开台方式</Text>
            </View>
            <View className="detail-btn">
              <Text className="detail-text">详情</Text>
              <ArrowDown 
                className={`arrow-icon ${expanded ? 'expanded' : ''}`} 
                size="16px" 
                color="#646566"
              />
            </View>
          </View>

          {/* 订单统计 */}
          <View className="order-stats">
            <View className="stat-item">
              <Text className="stat-value">1小时56分</Text>
              <Text className="stat-label">已消费时长</Text>
            </View>
            <View className="stat-item">
              <Text className="stat-value">100.00元</Text>
              <Text className="stat-label">已消费金额</Text>
            </View>
          </View>

          {/* 收费规则 */}
          <View className="pricing-rules">
            <View className="rules-content">
              <Text className="rules-title">收费规则</Text>
              <View className="price-row">
                <View className="price-item">
                  <Text className="price-label">价格：</Text>
                  <Text className="price-value">90.00元/小时</Text>
                </View>
                <View className="price-item">
                  <Text className="price-label">折扣价：</Text>
                  <Text className="price-value">80.00元/小时</Text>
                </View>
              </View>
            </View>
          </View>
        </View>

        {/* 展开的详细信息 */}
        {expanded && (
          <>
            {/* 支付信息卡片 */}
            <View className="info-card">
                <Text className="card-title">支付信息</Text>
                
                <View className="info-row">
                  <Text className="info-label">在线总支付：</Text>
                  <View className="info-value-box">
                    <Text className="info-desc">0元</Text>
                  </View>
                </View>

                <View className="info-row">
                  <Text className="info-label">押金</Text>
                  <Text className="info-value">0元</Text>
                </View>

                <View className="info-row">
                  <Text className="info-label">订单原价</Text>
                  <Text className="info-value">92.80元</Text>
                </View>

                {/* 优惠券抵扣 - 可展开 */}
                <View className="info-row expandable" onClick={() => setCouponExpanded(!couponExpanded)}>
                  <Text className="info-label">优惠券抵扣</Text>
                  <View className="info-right">
                    <Text className="info-desc">不可用</Text>
                    <Text className="info-value">-96.00元</Text>
                    <ArrowDown 
                      className={`arrow-icon ${couponExpanded ? 'expanded' : ''}`}
                      size="16px"
                      color="#646566"
                    />
                  </View>
                </View>

                {/* 优惠券展开内容 */}
                {couponExpanded && (
                  <View className="expand-content coupon">
                    <Text className="expand-text">美团：2小时通用券（新人奖励）</Text>
                    <Text className="expand-value">-96.00元</Text>
                  </View>
                )}

                <View className="info-row total">
                  <Text className="info-label">待结算：</Text>
                  <Text className="info-value">92.8元</Text>
                </View>
              </View>

              {/* 开台信息卡片 */}
              <View className="info-card">
                <Text className="card-title">开台信息</Text>

                <View className="info-row">
                  <Text className="info-label">门店信息</Text>
                  <Text className="info-value">XXXXXX店</Text>
                </View>

                <View className="info-row">
                  <Text className="info-label">桌台信息</Text>
                  <Text className="info-value">中式台球 来力.山岩-A03/3号球桌</Text>
                </View>

                <View className="info-row">
                  <Text className="info-label">开始时间</Text>
                  <Text className="info-value">2025-01-01 00:00:00</Text>
                </View>

                <View className="info-row">
                  <Text className="info-label">使用时长</Text>
                  <Text className="info-value">1小时56分</Text>
                </View>

                <View className="info-row">
                  <Text className="info-label">订单编号</Text>
                  <Text className="info-value">987654321012345678</Text>
                </View>

                {/* 收费标准 - 可展开 */}
                <View className="info-row expandable" onClick={() => setPriceExpanded(!priceExpanded)}>
                  <Text className="info-label">收费标准</Text>
                  <View className="info-right">
                    <Text className="info-value">80元/小时</Text>
                    <ArrowDown 
                      className={`arrow-icon ${priceExpanded ? 'expanded' : ''}`}
                      size="16px"
                      color="#646566"
                    />
                  </View>
                </View>

                {/* 收费标准展开内容 */}
                {priceExpanded && (
                  <View className="expand-content">
                    <Text className="expand-text">1分钟以内不计费，超过1分钟按6.67元/5分钟计费</Text>
                    <Text className="expand-text">• 00:00-11:00  原价90元/小时，折扣价80元/小时</Text>
                    <Text className="expand-text">• 11:00-24:00  原价100元/小时，折扣价90元/小时</Text>
                  </View>
                )}

                <View className="info-row">
                  <Text className="info-label">支付方式</Text>
                  <Text className="info-value">微信支付</Text>
                </View>
              </View>
            </>
          )}
      </View>
    </View>
  )
}

export default OrderDetail