import type { BaseEventOrig } from '@tarojs/components'
import { Button, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useMemo } from 'react'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import IconFont from '@/components/iconfont/iconfont'
import { formatHashTag } from '@/common/fotmat'
import useLogin from '@/use/useLogin'
import { alert } from '@/common/common'

interface DataType {
  product_screw_id: number
  product_screw_name: string
  product_screw_code: string
  screw_rgb: { r: number; g: number; b: number }
  screw_lab: { l: number; a: number; b: number }
  screw_texture_url: string
}
interface ParamType {
  onClick?: (id: number) => void
  data: DataType
  is_authorize_phone?: string
}
export default memo((props: ParamType) => {
  const { onClick, data } = props
  const labAndImgObj = useMemo(
    () => {
      return { lab: data?.screw_lab, rgb: data?.screw_rgb, texture_url: data?.screw_texture_url }
    },
    [data],
  )

  const { getPhoneNumber, userInfo } = useLogin()
  const getPhone = async(e) => {
    if (!e.detail.code) { return alert.error('请授权手机号') }
    try {
      await getPhoneNumber(e.detail.code)
    }
    catch (msg) {
      Taro.showToast({
        icon: 'none',
        title: msg,
      })
      return false
    }
  }
  return <View className={styles.recommend} >
    <View className={styles.con} onClick={() => onClick?.(data?.product_screw_id)}>
      <View className={styles.recommend_title}>螺纹配套</View>
      <View className={styles.recommend_con}>
        <View className={styles.img}>
          <LabAndImg value={labAndImgObj} customImageStyle={{ borderRadius: 0 }} />
        </View>
        <View className={styles.con}>
          <Text>{formatHashTag(data?.product_screw_code, data?.product_screw_name)}</Text>
          <Text>管家建议选择配套商品</Text>
        </View>
        <View className={styles.open_select}>
          <Text>去选购</Text>
          <IconFont name="icon-rukou" size={37} />
        </View>
      </View>
    </View>
    {(!userInfo.adminUserInfo?.is_authorize_phone && <Button className={styles.wxBtn} open-type="getPhoneNumber" onGetPhoneNumber={e => getPhone(e)}></Button>)}
  </View>
})