import { View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import React, { ReactNode, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { alert } from '@/common/common'
import { formatDateTime, formatPriceDiv, formatWeightDiv } from '@/common/format'
import { EnumPurchaserType } from '@/api/order'
import DropDownItem from '@/components/dropDown-item'
import { MpPurchaserList } from '@/api/customer'

interface Props {
  handType: (any) => void
  handTags: (any) => void
  value?: any
  onCloseOverlay?: () => void
}
const Tag = (props: Props, ref) => {
  const DropDownItemRef = useRef<any>()
  useImperativeHandle(
    ref,
    () => {
      return {
        show: DropDownItemRef?.current?.show,
        showPopup: DropDownItemRef?.current.showPopup,
        closePopup: DropDownItemRef?.current?.closePopup,
      }
    },
    [DropDownItemRef?.current],
  )
  const [currentValue, setCurrentValue] = useState<number>(-1)

  const [list, setlist] = useState<any[]>([
    {
      name: '二批',
      id: 0,
      checked: false,
    },
    {
      name: '制衣厂',
      id: 1,
      checked: false,
    },
    {
      name: '布行',
      id: 2,
      checked: false,
    },
  ])

  const { fetchData: fetchPurchaserType } = EnumPurchaserType()
  const { fetchData } = MpPurchaserList()
  const [taglist, settaglist] = useState<any[]>([])
  const getList = async() => {
    const res = await fetchData()
    const purchaserType = await fetchPurchaserType()
    if (res.data) {
      settaglist([...res.data.list])
      setlist([...purchaserType.data.list])
    }
  }
  useEffect(() => {
    getList()
  }, [])

  const handItem = (it) => {
    list.map((item) => {
      if (item.id == it.id) {
        item.checked = true
      }
      else {
        item.checked = false
      }
      return item
    })
    setlist([...list])
    props.handType(list)
  }

  const handTag = (it) => {
    taglist.map((item) => {
      if (item.id == it.id) {
        item.checked = !item.checked
      }
      return item
    })
    settaglist([...taglist])
    props.handTags(taglist)
  }

  return (
    <DropDownItem ref={DropDownItemRef} title="自定标签" value={currentValue} activeColor="#337fff" onCloseOverlay={props?.onCloseOverlay}>
      <View className={styles.mainBox}>
        <View className={styles.pussTitle}>客户类型</View>
        <View className={classnames(styles.pussBox)}>
          {
            list.map((item, index) => {
              return (
                <View key={index} className={classnames(item.checked && styles.active, styles.itemFlex)} onClick={() => handItem?.(item)}>{item.name}</View>
              )
            })
          }
        </View>
        <View className={styles.pussTitle}>自定义标签</View>
        <View className={classnames(styles.pussBox)}>
          {
            taglist.map((item, index) => {
              return (
                <View key={index} className={classnames(item.checked ? styles.itemactiveFlex : styles.itemFlex)} onClick={() => handTag?.(item)}>{item.name}</View>
              )
            })
          }
        </View>
      </View>
    </DropDownItem>
  )
}
export default memo(forwardRef(Tag))
