import { ScrollView, Text, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Popup from '@/components/popup'

// 原因选择
interface Param { id: number; name: string; typle?: number }
interface ReasonInfoParam {
  show?: boolean // 显示
  onClose?: () => void // 关闭
  title?: string // 标题
  list?: { id: number; name: string; typle?: number; children?: Param[] }[] // 数据列表
  onSelect?: (val: object) => void // 选择
  defaultValue?: number // 默认选中
}
export default memo(({ show = false, onClose, title = '', list = [], onSelect, defaultValue }: ReasonInfoParam) => {
  const [hasNextData, setHasNextData] = useState(true) // 是否有下一级数据
  const [selectData, setSelectData] = useState()
  const [headerList, setHeaderList] = useState<{ id: number; name: string }[]>([])
  const onSelectData = (item) => {
    setHeaderList(e => [...e, { id: item.id, name: item.name }])
  }
  useEffect(() => {
    console.log('headerList::', headerList)
  }, [headerList])
  return (
    <Popup showIconButton={false} show={show} title={title} onClose={onClose} >
      <View className={styles.reason_return_con}>
        <View className={styles.reason_title}>
          {headerList.map((item) => {
            return <Text key={item.id}>{item.name}</Text>
          })}
          {hasNextData && <Text>请选择</Text>}
        </View>
        <ScrollView scrollY className={styles.reason_scroll}>
          <View className={styles.reason_list}>
            {list.map(item => <View onClick={() => onSelectData(item)} key={item.id} className={classnames(styles.reason_item, item.id == defaultValue && styles.select_item)}>{item.name}</View>)}
          </View>
        </ScrollView>
      </View>
    </Popup>
  )
})
