import { Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import AmountShow from '../amountShow'
import styles from './index.module.scss'

interface Param {
  style?: Object
  number?: number|string
  title?: string
  titleStatus?: true|false // true 标题加大加深
  numberStatus?: 0|1|2 // 数字尺寸
  messageTitle?: string
  messageWidth?: number
  messageShow?: true|false
  numberFormat?: 'number'|'text' // 数字还是字符串
}
const EstimatedAmount = ({ number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageWidth = 430, messageShow = false, numberFormat = 'number' }: Param) => {
  const [show, setShow] = useState(messageShow)
  const onClose = () => {
    setShow(false)
  }
  const openShow = () => [
    setShow(true),
  ]

  const [style, setStyle] = useState<{ top: string }>()

  // 设置弹出层高度
  const getDomDes = (id) => {
    setTimeout(() => {
      const query = Taro.createSelectorQuery()
      query.select(id).boundingClientRect((rect) => {
        const height = rect.height * 2 + 15
        setStyle(e => ({ ...e, top: `-${height}rpx`, opacity: 1 }))
      }).exec()
    }, 0)
  }

  useEffect(() => {
    if (show) {
      getDomDes('#message')
    }
    else {
      setStyle(() => ({ top: '0' }))
    }
  }, [show])
  return (
    <>
      <View className={styles.order_price}>
        <View className={classnames(styles.order_price_text, titleStatus && styles.emphasis)} onClick={() => openShow()}>
          <Text>{title}</Text>
          <View className={styles.iconfont_msg}>
            {show && <View style={{ ...style, width: `${messageWidth}rpx` }} id="message" className={classnames(styles.message)}>{messageTitle}</View>}
            <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
          </View>
        </View>
        {numberFormat == 'number' && <AmountShow status={numberStatus} number={(number as number / 100)} />}
        {(numberFormat == 'text') && <View className={styles.refund_destination}>{number}</View>}
        {show && <View className={styles.close} catchMove onClick={onClose}></View>}
      </View>
    </>
  )
}
export default memo(EstimatedAmount)