import { Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import IconFont from '@/components/iconfont/iconfont'
import { formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import PopupModal from '@/components/popupModal'
import { useCurrenCode } from '@/context/ContextCodeSetting'
import type { adjustType } from '@/common/enum'

interface Param {
  codeItem: any
  settingColorStatus?: boolean
}

type IndexParam = {
  onChange: (val: string) => void
  adjust_type: adjustType
  settingColorStatus: boolean
} & Param

export default (props: Param) => {
  const { codeItem, settingColorStatus = false } = props
  const { dispatch, productData } = useCurrenCode()
  const index = codeItem.index_str.split('_')
  const getNewName = useCallback((name) => {
    if (!productData.color_item_data) {
      const productInfo = productData.data.product_details[index[0]]
      const codeInfo = productInfo.product_color_details[index[1]]
      productData.data.product_details[index[0]].product_color_details[index[1]] = { ...codeInfo, product_color_name: name }
      productData.data.product_details[index[0]] = { ...productData.data.product_details[index[0]] }
      dispatch({ type: 'updateData', data: { ...productData.data }, update_status: 2 })
    }
    else {
      productData.color_item_data.product_color_details[index[1]] = { ...codeItem, product_color_name: name }
      dispatch({ type: 'updateColorData', data: { ...productData.color_item_data } })
    }
  }, [codeItem])

  return <>
    <Index codeItem={codeItem} onChange={getNewName} adjust_type={productData.adjust_type} settingColorStatus={settingColorStatus} />
  </>
}

const Index = memo((props: IndexParam) => {
  const { codeItem, adjust_type, settingColorStatus } = props
  const [showEdit, setShowEdit] = useState(false)
  const [title, setTitle] = useState('')
  console.log('codeItem内容：：：', codeItem)
  const countData = useMemo(() => {
    return {
      old: `重量:${formatWeightDiv(codeItem?.weight_setting)}kg` + `${codeItem.sale_mode === 0 ? `｜空差: ${formatWeightDiv(codeItem?.weight_error_setting)}kg` : ''}` + `｜单价：¥${formatPriceDiv(codeItem?.price_setting)}/kg`,
      new: `重量:${formatWeightDiv(codeItem?.original_weight)}kg` + `${codeItem.sale_mode === 0 ? `｜空差: ${formatWeightDiv(codeItem?.original_weight_error)}kg` : ''}` + `｜单价：¥${formatWeightDiv(codeItem?.original_price)}/kg`,
    }
  }, [codeItem])
  const onUpdate = () => {
    console.log('点击了')
    setTitle(codeItem.product_color_name)
    setShowEdit(true)
  }
  const onConfirm = (item) => {
    props.onChange?.(item)
  }
  const labAndImgData = useMemo(() => {
    return { lab: codeItem.lab, rgb: codeItem.rgb, texture_url: codeItem.texture_url }
  }, [codeItem])

  const number = useMemo(() => {
    return codeItem.sale_mode == 0 ? `${codeItem?.roll}条` : `${codeItem?.length / 100}米`
  }, [codeItem])
  return <View className={classNames(styles['product_list__item--con'], !settingColorStatus ? styles.product_list__item__bottom : styles.product_list_item_height)}>
    <View className={styles.item_image} >
      <LabAndImg value={labAndImgData} />
    </View>
    <View className={styles.item_desc}>
      <View className={styles.item_name_count}>
        <View className={styles.name} onClick={onUpdate}>
          <Text>{codeItem?.product_color_name}</Text>
          <IconFont name="icon-shuru" size={50} />
        </View>
        <View className={styles.number}>x{number}</View>
      </View>
      <View className={styles.item_specs_new}>{countData.old}</View>
      {!settingColorStatus && <View className={styles.item_specs_old}>{countData.new}</View>}
    </View>
    <View className="common_ellipsis"></View>
    <PopupModal show={showEdit} title="修改面料名称" defaultValue={title} onClose={() => setShowEdit(false)} onConfirm={onConfirm} />
  </View>
})
