import Taro from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
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/format'
import Popup from '@/components/popup'
import IconFont from '@/components/iconfont/iconfont'
// 图片列表
interface ImageParam {
  onChange?: (val: string[]) => void
  defaultList?: string[]
  onlyRead?: boolean
}
const PictureItem = ({ onChange, defaultList, onlyRead = false }: ImageParam) => {
  const { getWxPhoto, getChatPhoto } = useUploadCDNImg()

  const [imageList, setImageLise] = useState<string[]>([])
  // 筛选内容展示
  const [showPopup, setshowPopup] = useState(false)
  const [List, setList] = useState<any[]>([{ id: 1, name: '手机相册', check: false }, { id: 2, name: '从微信对话选择', check: false }])
  useEffect(() => {
    setImageLise(defaultList || [])
  }, [defaultList])

  // 上传图片
  const uploadImage = async() => {
    setshowPopup(true)
  }

  // 上传图片逻辑
  const handPic = async(id) => {
    let list: any
    // let resArr = List.filter(item => {
    //   return item.check
    // })
    if (id == 1) {
      list = await getWxPhoto('after-sale', 5)
    }
    else {
      list = await getChatPhoto('after-sale', 5)
    }
    const images: any[] = []
    list?.forEach((item) => {
      images.push(item.url)
    })
    setImageLise([...imageList, ...images])
    setshowPopup(false)
  }

  // 删除图片
  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链接列表
    })
  }

  // 点击选择的方式
  const handItem = (item) => {
    List.map((it) => {
      if (item.id == it.id) {
        it.check = true
      }
      else {
        it.check = false
      }
      return it
    })
    setList([...List])
    handPic(item.id)
  }

  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)}>
              <IconFont name="icon-guanbi" size={30} customClassName={styles.miconfont_close} color="#ffffff"></IconFont>
            </View>}
          </View>
        ))}
        {!onlyRead && (
          <View className={styles.uploadImg} onClick={uploadImage}>
            <IconFont name="icon-xinzeng" size={100} color="#d8d8d8"></IconFont>
            {/* <Text className={classnames(styles.miconfont, 'iconfont icon-xinzeng')}></Text> */}
            {/* <Text className={styles.uploadText}>上传照片</Text> */}
          </View>
        )}

      </View>
      <Popup title="选择方式" show={showPopup} onClose={() => setshowPopup(false)} isFixed>
        <View className={styles.bigBoxThree}>
          {
            List.map((item, index) => {
              return (
                <View className={styles.itemBox} key={index} onClick={() => handItem(item)}>{item.name}</View>
              )
            })
          }
        </View>

      </Popup>
    </>
  )
}

export default memo<ImageParam>(PictureItem)
