import Taro from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import type { FC } from 'react'
import { memo, useEffect, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import useUploadCDNImg from '@/use/useUploadImage'
import { formatImgUrl } from '@/common/fotmat'

// 图片列表
interface ImageParam {
  onChange?: (val: string[]) => void
  defaultList?: string[]
  onlyRead?: false | true
}
const PictureItem = ({ onChange, defaultList, onlyRead = false }: ImageParam) => {
  const { getWxPhoto } = useUploadCDNImg()
  const [imageList, setImageLise] = useState<string[]>([])

  useEffect(() => {
    setImageLise(defaultList || [])
  }, [defaultList])

  // 上传图片
  const uploadImage = async() => {
    const list: any = await getWxPhoto('after-sale', 5)
    const images: any[] = []
    list?.forEach((item) => {
      images.push(item.url)
    })
    setImageLise([...imageList, ...images])
  }
  // 删除图片
  const delImage = (index) => {
    imageList.splice(index, 1)
    setImageLise(() => [...imageList])
  }
  // 监听上传的图片变化
  useEffect(() => {
    onChange?.(imageList)
  }, [imageList])

  // 预览图片
  const showImage = () => {
    const list = imageList?.map((item) => {
      return formatImgUrl(item, '!w800')
    })
    Taro.previewImage({
      current: list[0], // 当前显示
      urls: list, // 需要预览的图片http链接列表
    })
  }

  return (
    <View className={styles.image_main}>
      {imageList?.map((item, index) => (
        <View className={styles.ImgItem} key={index}>
          <Image mode="aspectFill" src={formatImgUrl(item)} onClick={showImage}></Image>
          {!onlyRead && <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>}
        </View>
      ))}
      {!onlyRead && (
        <View className={styles.uploadImg} onClick={uploadImage}>
          <Text className={classnames(styles.miconfont, 'iconfont icon-shangchuanzhaopian')}></Text>
          <Text className={styles.uploadText}>上传照片</Text>
        </View>
      )}
    </View>
  )
}

export default memo(PictureItem)
