import { DelFavoriteApi, FavoriteListApi } from "@/api/favorite";
import { alert } from "@/common/common";
import { getFilterData } from "@/common/util";
import Product from "@/components/product";
import Search from "@/components/search"
import { Text, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useRef, useState } from "react";
import CreatePopup from "./components/createPopup";
import UpdatePopup from "./components/updatePopup";
import styles  from './index.module.scss'
export default () => {

    const changeOpenCon = (item) => {
      item.openStatus = !item.openStatus
      setList((e) => [...e])
    }
    //获取搜索数据
    const [searchData, setSearchData] = useState('')
    const onSearch = useCallback((e) => {
      setSearchData(() => e)
    }, [])
    useEffect(() => {
      getFavoriteList()
    }, [searchData])

    //获取列表
    const [list, setList] = useState([])
    const {fetchData: fetchDataList} = FavoriteListApi()
    const getFavoriteList = async () => {
      let res = await fetchDataList(getFilterData({name: searchData}))
      setList(() => res.data.list)
    }
    useEffect(() => {
      getFavoriteList()
    }, [])

    //创建收藏夹
    const [collectioinShow, setCollectioinShow] = useState(false)
    const closeCollection = useCallback(() => {
      setCollectioinShow(false)
    }, [])

    //创建成功
    const onCreatSuccess = useCallback(() => {
      getFavoriteList()
    }, [])

    //更多编辑
    const selectInfo = useRef<any>(null)
    const [updateShow, setUpdateShow] = useState(false)
    const closeUpdate = useCallback(() => {
      setUpdateShow(false)
    }, [])
    const moreUpdate = (item,e) => {
      e.stopPropagation()
      selectInfo.current = item
      setUpdateShow(true)
    }

    //删除改收藏夹
    const {fetchData: delFetchData} = DelFavoriteApi()
    const onDeleteCollect = useCallback(() => {
        if(!selectInfo.current.id) return alert.error('参数不正确！')
        if(selectInfo.current.id == 1)  return alert.none('删除失败,该文件夹不能删除!')
        Taro.showModal({
          content: '确认删除该文件夹?',
          success: async function (res) {
            if (res.confirm) {
              let res = await delFetchData({id: selectInfo.current.id})
              if(res.success) {
                alert.success('删除成功')
                getFavoriteList()
              } else {
                alert.error('删除失败')
              }
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
        closeUpdate()
    }, [])

    //编辑
    const onUpdate = useCallback(() => {

    }, [])

    return (
      <View className={styles.collection_main}>
        <View className={styles.search}>
          <Search  style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" />
          <View className={styles.miconfont_con} onClick={() => setCollectioinShow(true)}><Text className={classnames(styles.miconfont, 'iconfont icon-jia')}></Text></View>
        </View>
        <View className={styles.class_list}>
          {list?.map((item:any) => <View className={styles.class_item}>
            <View key={item.id} className={styles.class_title} onClick={() => changeOpenCon(item)}>
              <Text className={classnames(styles.miconfont_left, 'iconfont icon-a-moreback', item.openStatus?styles.miconfont_open:styles.miconfont_close)}></Text>
              <View className={styles.title}>{item.name}
                {item.product_color_list&&<><Text className={styles.fg}>·</Text><Text className={styles.num}>{item.product_color_list.length}</Text></>}
              </View>
              <View className={styles.more} onClick={(e) => moreUpdate(item,e)}>更多</View>
            </View>
            <View className={styles.class_con} style={item.openStatus?{maxHeight: 10*260 + 'rpx'}:{maxHeight: 0}} >
              <Product productList={new Array(10).fill('')}/>
            </View>
          </View>)}
        </View>
        <CreatePopup show={collectioinShow} onClose={closeCollection} onSuccess={onCreatSuccess}/>
        <UpdatePopup show={updateShow} onClose={closeUpdate} onDelete={onDeleteCollect} onUpdate={onUpdate}/>
      </View>
    )
  }