import React, { useState } from 'react'
import { View, Button } from '@tarojs/components'
import DateTimePicker from './DateTimePicker'

const DateTimePickerExample: React.FC = () => {
  const [visible, setVisible] = useState(false)
  const [selectedDate, setSelectedDate] = useState('')

  const handleOpen = () => {
    setVisible(true)
  }

  const handleClose = () => {
    setVisible(false)
  }

  const handleConfirm = (year: number, month: number) => {
    setSelectedDate(`${year}年${month}月`)
    console.log('选择的日期:', year, month)
  }

  return (
    <View style={{ padding: '20px' }}>
      <Button onClick={handleOpen}>选择年月</Button>
      
      {selectedDate && (
        <View style={{ marginTop: '20px', fontSize: '16px' }}>
          已选择: {selectedDate}
        </View>
      )}

      <DateTimePicker
        visible={visible}
        onClose={handleClose}
        onConfirm={handleConfirm}
        defaultYear={2025}
        defaultMonth={11}
        minYear={2020}
        maxYear={2030}
      />
    </View>
  )
}

export default DateTimePickerExample