import { View, PickerView, PickerViewColumn  } from "@tarojs/components"
import Taro from "@tarojs/taro"

export interface IndexProps {
  options: string[]
  headerTitle?: string
  selected: string
  showPicker: boolean
  setShowPicker: (show:boolean) => void
  onChange: (value: string) => void
  children: JSX.Element|JSX.Element[]
}

const Index = ({selected, showPicker, setShowPicker,onChange, options, headerTitle = '请选择', children }: IndexProps) => {
  
  
  
  

  // 处理选择变化
  const handleChange = (e:any) => {
    const { value } = e.detail
    onChange(options[value[0]])
  }

  // 确认选择
  const handleConfirm = () => {
    setShowPicker(false)
    Taro.showToast({
      title: `已选择: ${selected}`,
      icon: 'none'
    })
  }
  return <View>
    {children}
    {showPicker && (
            <View className='picker-modal'>
              <View className='picker-header'>
                <View className='picker-cancel' onClick={() => setShowPicker(false)}>
                  取消
                </View>
                <View className='picker-title'>{headerTitle}</View>
                <View 
                  className='picker-confirm' 
                  onClick={handleConfirm}
                  style={{ color: '#317CFA' }} // 直接修改确认按钮颜色
                >
                  确定
                </View>
              </View>

              {/* 单列 PickerView */}
              <PickerView
                className='picker-view'
                indicatorStyle='height: 50px;' // 选中项高亮样式
                style='width: 100%; height: 300px;'
                onChange={handleChange}
                value={[options.indexOf(selected)]} // 初始选中项索引
              >
                <PickerViewColumn>
                  {options.map((item) => (
                    <View key={item} className='picker-item'>
                      {item}
                    </View>
                  ))}
                </PickerViewColumn>
              </PickerView>
            </View>
          )}
  </View>
}

export default Index;