/**
 * 开台页面
 */
import { View, Text, Image } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import './index.scss'

// 使用本地图片资源
const phoneIcon = require('./images/phone.png')

// 开台方式列表
const startTableMethods = [
  {
    id: 1,
    title: '自助开台',
    description: '会员余额>押金直接开台或支付开台',
  },
  {
    id: 2,
    title: '定时开台',
    description: '设定开台时长',
  },
  {
    id: 3,
    title: '信用开台',
    description: '信用分≥550，直接开台，关台时结账',
  },
  {
    id: 4,
    title: '团购券开台',
    description: '使用美团、抖音等团购券开台',
  },
]

const StartTable = () => {
  useLoad(() => {
    console.log('开台页面加载')
  })

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

  // 去开台
  const handleStartTable = (method: any) => {
    console.log('选择开台方式:', method)
    
    // 如果是自助开台，跳转到自助开台页面
    if (method.id === 1) {
      Taro.navigateTo({
        url: '/pageScan/selfStart/index'
      })
      return
    }
    
    // 如果是定时开台，跳转到定时开台页面
    if (method.id === 2) {
      Taro.navigateTo({
        url: '/pageScan/timedStart/index'
      })
      return
    }
    
    // 其他方式暂时提示功能开发中
    Taro.showToast({
      title: '功能开发中',
      icon: 'none',
      duration: 2000
    })
  }

  return (
    <View className="start-table-page">
      {/* 内容区域 */}
      <View className="content-area">
        {/* 台球桌信息卡片 */}
        <View className="table-card">
          {/* 顶部：店名和电话 */}
          <View className="card-header">
            <Text className="store-name">北京黑八大师联盟球厅店</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">
            <Text>[中式台球]来力.山岩-A03/3号球桌</Text>
          </View>

          {/* 价格信息 */}
          <View className="price-info">
            <View className="price-item">
              <Text className="price-value">¥28.80</Text>
              <Text className="price-label">/小时</Text>
            </View>
            <View className="price-item">
              <Text className="price-label">押金</Text>
              <Text className="price-value">¥100.00</Text>
            </View>
            <View className="vip-price">
              <Text className="vip-text">VIP ¥20.00</Text>
            </View>
          </View>

          {/* 价格时段 */}
          <View className="time-period">
            <Text>价格时段：00:00-24:00</Text>
          </View>
        </View>

        {/* 开台方式列表 */}
        <View className="methods-list">
          {startTableMethods.map((method) => (
            <View key={method.id} className="method-item">
              <View className="method-left">
                <Text className="method-title">{method.title}</Text>
                <Text className="method-desc">{method.description}</Text>
              </View>
              <View className="method-right">
                <View 
                  className="start-btn" 
                  onClick={() => handleStartTable(method)}
                >
                  <Text className="btn-text">去开台</Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    </View>
  )
}

export default StartTable