import { Text, View } from '@tarojs/components'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import Popup from '@/components/popup'
import './SelectEnterpriseType.scss'
import { certificationTypeListApi } from '@/api/certification'

interface Params{
  confirm?: (selected: any) => void // 确定
}
const SelectEnterpriseType = (props: Params, ref) => {
  const [modalShow, setModalShow] = useState(false)
  // 获取认证信息
  const { fetchData, state } = certificationTypeListApi()
  useEffect(() => {
    fetchData()
  }, [])
  const [selected, setSelected] = useState({})
  // 确定
  const handleSelect = (item) => {
    setSelected(item)
  }
  // 设置弹窗是否显示
  const setShow = (ev) => {
    setModalShow(ev)
  }
  useImperativeHandle(ref, () => ({
    setShow,
  }))
  // 确定
  const handleConfirm = () => {
    props.confirm && props.confirm(selected)
    setModalShow(false)
  }

  return (
    <View className="select-enterprise-type">
      <Popup showTitle={false} show={modalShow} onClose={() => setModalShow(false)}>
        <View className="select-enterprise-type-btn">
          <View onClick={() => setModalShow(false)}>取消</View>
          <View onClick={handleConfirm}>确定</View>
        </View>
        <View className="select-enterprise-type-content">
          {
            state.data?.list?.map((item, index) => {
              return <View onClick={() => handleSelect(item)} key={index}>
                <Text>{item.name}</Text>
                {item.id == (selected as any).id ? <Text className="iconfont icon-tick" /> : <Text />}
              </View>
            })
          }
        </View>
      </Popup>
    </View>
  )
}
export default forwardRef(SelectEnterpriseType)
