import { CustomWrapper, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useContext, useEffect, useState } from 'react'
import classNames from 'classnames'
import ProductItem from '../../productItem'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import PopupModal from '@/components/popupModal'
import { useCurrenCode } from '@/context/ContextCodeSetting'

interface Parma {
  productInfo: any
  sale_mode_name: string
}

type IndexParam = {
  onChange: (val: string) => void
} & Parma

export default memo((props: Parma) => {
  const { productInfo } = props
  const { dispatch, productData } = useCurrenCode()
  const getNewName = useCallback((name) => {
    const index = productInfo.index_str.split('_')[0]
    productData.data.product_details[index] = {
      ...productData.data.product_details[index],
      product_name: name,
    }
    dispatch({ type: 'updateData', data: { ...productData.data }, update_status: 2 })
  }, [productInfo])
  return <>
    <Index {...props} onChange={getNewName} />
  </>
})

const Index = memo((props: IndexParam) => {
  const { productInfo, sale_mode_name } = props
  const [showEdit, setShowEdit] = useState(false)
  const [upStatus, setStatus] = useState(false)
  const [title, setTitle] = useState('')
  console.log('productInfo内容：：：', productInfo)
  const onUpdate = () => {
    setTitle(productInfo.product_name)
    setShowEdit(true)
  }
  const onConfirm = (item) => {
    props.onChange?.(item)
  }

  // const [height, setHeight] = useState('0rpx')
  // useEffect(() => {
  //   setTimeout(() => {
  //     Taro.nextTick(() => {
  //       const query = Taro.createSelectorQuery()
  //       query
  //         .select(`.product_list__item__con_${productInfo.}`)
  //         .boundingClientRect((rect) => {
  //           const clientHeight = rect.height
  //           setHeight(Taro.pxTransform(clientHeight))
  //         })
  //         .exec()
  //     })
  //   }, 100)
  // }, [productInfo])

  return <>
    <View key={productInfo.product_id} className={styles.product_list__item}>
      <View className={styles['product_list__item--title']} onClick={onUpdate}>
        <Text className={styles.product_title}>{productInfo.product_name}</Text>
        <IconFont name="icon-shuru" size={50} />
        <Text className={styles.mode_status}>{sale_mode_name}</Text>
      </View>
      <View className={classNames(styles['product_list__item--con'], upStatus && styles['product_list__item--con_close'])}>
        <View className={`product_list__item__con_${productInfo.product_id}`}>
          {productInfo?.product_color_details?.map(citem => <View key={citem?.product_color_id}><ProductItem codeItem={citem} /></View>)}
        </View>
      </View>
      <View className={styles.up_btn} onClick={() => setStatus(!upStatus)}>{upStatus ? '查看更多' : '收起'}<View className={classNames(styles.up_icon, upStatus ? styles.open_up_icon : styles.close_up_icon)}><IconFont name="icon-shangla" size={35} /></View></View>
    </View>
    <PopupModal show={showEdit} title="修改面料名称" defaultValue={title} onClose={() => setShowEdit(false)} onConfirm={onConfirm} />

  </>
})
