/**
 * 扫码页
 */
import { View, Text, Button } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { observer } from 'mobx-react'
import { useState } from 'react'
import { Dialog } from '@taroify/core'
import './index.scss'

const ScanIndex = observer(() => {
  const [showUnsettledDialog, setShowUnsettledDialog] = useState(false)

  useLoad(() => {
    console.log('扫码页面加载')
  })

  // 扫码
  const handleScan = () => {
    Taro.scanCode({
      success: (res) => {
        Taro.showToast({
          title: '扫码成功',
          icon: 'success',
        })
        console.log('扫码结果:', res)
      },
      fail: (err) => {
        console.error('扫码失败:', err)
      }
    })
  }

  // 去开台
  const handleStartTable = () => {
    Taro.navigateTo({
      url: '/pageScan/startTable/index'
    })
  }

  // 关台-开台人员扫码
  const handleCloseTableOwner = () => {
    Taro.navigateTo({
      url: '/pageScan/closeTable/index?type=owner'
    })
  }

  // 关台-非开台人扫码
  const handleCloseTableGuest = () => {
    Taro.navigateTo({
      url: '/pageScan/closeTable/index?type=guest'
    })
  }

  // 打开未结算订单弹窗
  const handleUnsettledOrders = () => {
    setShowUnsettledDialog(true)
  }

  // 去结算
  const handleGoToSettle = () => {
    setShowUnsettledDialog(false)
    Taro.navigateTo({
      url: '/pagesUser/unsettledOrders/index'
    })
  }

  return (
    <View className="scan-page">
      <View className="header">
        <Text className="title">扫码开台</Text>
      </View>
      <View className="content">
        <Button className="scan-btn" onClick={handleScan}>
          点击扫码
        </Button>
        <Button className="start-table-btn" onClick={handleStartTable}>
          开台
        </Button>
        <Button className="close-table-btn" onClick={handleCloseTableOwner}>
          关台-开台人员扫码
        </Button>
        <Button className="close-table-btn" onClick={handleCloseTableGuest}>
          关台-非开台人扫码
        </Button>
        <Button className="unsettled-orders-btn" onClick={handleUnsettledOrders}>
          未结算订单
        </Button>
      </View>

      {/* 未结算订单提示弹窗 */}
      <Dialog 
        open={showUnsettledDialog} 
        onClose={() => setShowUnsettledDialog(false)}
        className="unsettled-dialog"
      >
        <Dialog.Header>温馨提示</Dialog.Header>
        <Dialog.Content>
          <View className="dialog-content">
            您有1笔消费未结算，请先结算。
          </View>
        </Dialog.Content>
        <Dialog.Actions>
          <Button className="cancel-btn" onClick={() => setShowUnsettledDialog(false)}>
            取消
          </Button>
          <Button className="confirm-btn" onClick={handleGoToSettle}>
            去结算
          </Button>
        </Dialog.Actions>
      </Dialog>
    </View>
  )
})

export default ScanIndex