import { Image, Text, View } from '@tarojs/components'
import type { FC } from 'react'
import { memo, useCallback } from 'react'
import styles from './index.module.scss'
import { formatHashTag, formatImgUrl } from '@/common/fotmat'
import Counter from '@/components/counter'
import MCheckbox from '@/components/checkbox'

interface OrderParam {
  list?: any[]
  sale_mode?: number
  sale_mode_name?: string
  unit?: string
  total_colors?: number
  total_fabrics?: number
  total_number?: number
  status?: number // 订单状态
  av_return_product?: any[] // 申请售后列表
}

interface Param {
  order: OrderParam
  onNumChange?: (val: any) => void
}

const KindeList: FC<Param> = ({ order, onNumChange }) => {
  // 计步器返回值
  const getCounterChange = useCallback((colorItem) => {
    return (number) => {
      onNumChange?.({ number, color_id: colorItem.product_color_id, sale_order_detail_id: colorItem.sale_order_detail_id })
    }
  }, [order])

  return (
    <View className={styles.apply_after_sales_list}>
      {order?.av_return_product?.map((item, index) => <View className={styles.apply_after_sales_item} key={index}>
        <View className={styles.apply_after_sales_title}>
          <View className={styles.tag}>{order.sale_mode_name}</View>
          <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
        </View>
        <View className={styles.color_list}>
          {item?.av_product_color?.map((colorItem, key) => <View className={styles.color_item} key={key}>
            <View className={styles.image}><Image src={formatImgUrl('')} /></View>
            <View className={styles.name_and_number}><Text>{`${colorItem.product_color_code} ${colorItem.product_color_name}`}</Text><Text>x {colorItem.roll}</Text></View>
            <View className={styles.btn_count}>
              <Counter maxNum={colorItem.roll} onChange={getCounterChange(colorItem)} />
            </View>
          </View>)}
        </View>
      </View>)}
    </View>
  )
}

export default memo(KindeList)
