import { View, Input, Button, ScrollView } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
import Search from '@/components/search'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
import ItemList from './components/itemList'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import {
    mpreturnApplyOrderlist,
    mpenumreturnStage,
    mpenumreturnType
} from "@/api/refound"
import Tabs from "./components/tabs"
import TimePickerPopup from '@/components/timePickerPopup'
import dayjs from 'dayjs'
import IconFont from '@/components/iconfont/iconfont'
export default () => {
    //页码和页数

    const [searchField, setSearchField] = useState<
        {
            status: number | unknown;
            page: number;
            size: number;
            name: string;
            sale_mode: number | string;
            stage: number | string;
            return_type: number | string;
            sale_start_time: number | string;
            sale_end_time: number | string;
        }>({
            status: 1,
            page: 1,
            size: 10,
            name: '',
            sale_mode: '不限',
            stage: '不限',
            return_type: '不限',
            sale_start_time: '',
            sale_end_time: ''
        })
    const pageNum = useRef({ size: searchField.size, page: searchField.page })

    //监听筛选条件变化
    useEffect(() => {
        getOrderList()
    }, [searchField.size, searchField.name, searchField.status])

    //获取订单列表
    const { fetchData: listFetchData, state: orderState } = mpreturnApplyOrderlist()
    const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
    const getOrderList = async () => {
        let res = await listFetchData({
            ...searchField
            // ...getFilterData(searchField),
            // ...getFilterData(searchObj)
        })
        setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
        // setshowPopup(false)
        setRefresherTriggeredStatus(false)
    }





    //输入了搜索关键字
    const getSearchData = useCallback((e) => {
        pageNum.current.page = 1
        setOrderData(() => ({ list: [], total: 0 }))
        setSearchField((val) => ({ ...val, name: e, size: 10 }))
    }, [])

    //列表下拉刷新
    const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
    const getRefresherRefresh = async () => {
        pageNum.current.size = 1
        setRefresherTriggeredStatus(true)
        setSearchField((val) => ({ ...val, size: 10 }))
        getOrderList()
    }
    //数据加载状态
    const statusMore = useMemo(() => {
        return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
    }, [orderData, orderState])

    //上拉加载数据
    const getScrolltolower = useCallback(() => {
        if (orderData.list.length < orderData.total) {
            pageNum.current.page++
            const size = pageNum.current.size * pageNum.current.page
            setSearchField({ ...searchField, size })
        }
    }, [orderData])


    //顶部栏
    const [TarBarList, setTarBarList] = useState<any[]>([{ id: 1, name: '售后申请', showBorder: true }, { id: 2, name: '申请记录', showBorder: false }])
    const handChose = (item) => {
        if (item.id === searchField.status) return
        TarBarList.map(it => {
            if (it.id === item.id) {
                it.showBorder = true
            } else {
                it.showBorder = false
            }
            setTarBarList([...TarBarList])
            pageNum.current.page = 1
            setOrderData(() => ({ list: [], total: 0 }))
            setSearchField((val) => ({ ...val, size: 10, status: item.id }))
            // getOrderList()
        })
    }

    //筛选内容展示
    const [showPopup, setshowPopup] = useState(false)
    const showSelctPopup = () => {
        setshowPopup(true)
    }

    //关闭筛选内容展示
    const closePopup = () => {
        setshowPopup(false)
    }

    //订单类型
    const [modeList, setModeList] = useState<any[]>([{ id: '', name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }])
    //选择订单类型
    const handCheckMode = (item) => {
        modeList.map(it => {
            if (it.id === item.id) {
                it.checked = true
            } else {
                it.checked = false
            }
            return it
        })
        setModeList([...modeList])
        setSearchField((e) => ({ ...e, sale_mode: item.id, }))
    }
    useEffect(() => {
        getStagelist()
        getTypeList()
    }, [])



    //售后状态
    const [stageList, setStageList] = useState<any[]>([])
    const { fetchData: stageFetch } = mpenumreturnStage()
    const getStagelist = async () => {
        const res = await stageFetch()
        if (res.data) {
            res.data.list.unshift({ id: '', name: '不限', checked: false })
            res.data.list.map(it => {
                it.checked = false
                return it
            })
            setStageList([...res.data.list])

        }
    }

    //选择售后状态
    const handCheckStange = (item) => {
        stageList.map(it => {
            if (it.id === item.id) {
                it.checked = true
            } else {
                it.checked = false
            }
            return it
        })
        setStageList([...stageList])
        setSearchField((val) => ({ ...val, stage: item.id }))
    }



    //退款类型
    const [typeList, setTypeList] = useState<any[]>([])
    const { fetchData: typeFetch } = mpenumreturnType()
    const getTypeList = async () => {
        const res = await typeFetch()
        if (res.data) {
            res.data.list.unshift({ id: '', name: '不限', checked: false })
            res.data.list.map(it => {
                it.checked = false
                return it
            })
            setTypeList([...res.data.list])
        }
    }

    //选择售后类型
    const handType = (item) => {
        typeList.map(it => {
            if (it.id === item.id) {
                it.checked = true
            } else {
                it.checked = false
            }
            return it
        })
        setTypeList([...typeList])
        setSearchField((val) => ({ ...val, return_type: item.id }))
    }

    //是否不允许确认筛选
    const isDisabled = useMemo(() => {
        if (searchField.stage !== '不限' ||
            searchField.sale_mode !== '不限' ||
            searchField.return_type !== '不限' ||
            searchField.sale_start_time !== '' ||
            searchField.sale_end_time !== ''
        ) {
            return false
        } else {
            return true
        }
    }, [searchField])


    //重置
    const handReset = () => {
        const arrOne = resetArr(modeList)
        setModeList([...arrOne])
        const arrTwo = resetArr(typeList)
        setTypeList([...arrTwo])
        const arrThree = resetArr(stageList)
        setStageList([...arrThree])
        setSearchField((e) => ({
            ...e,
            sale_mode: '不限',
            stage: '不限',
            return_type: '不限',
            sale_start_time: '',
            sale_end_time: '',
        }))
        setStart(myDate.toLocaleDateString())
        getOrderList()
        setEnd('')
    }

    //数组重置
    const resetArr = (arr) => {
        arr.map(it => {
            it.checked = false
            return it
        })
        return arr
    }

    //展示时间筛选
    const [showTime, setShowTime] = useState(false)
    //关闭时间筛选
    const handClose = () => {
        setShowTime(false)
    }
    let myDate = new Date();
    const [start, setStart] = useState<any>(myDate.toLocaleDateString())
    const [end, setEnd] = useState<any>('')
    //选择时间
    const handTime = (eq) => {
        //直接进来点确定的时候做处理
        if (Object.keys(eq).length === 0) {
            let obj = {
                start: '',
                end: ''
            }
            obj.start = `${dayjs(new Date(myDate?.toLocaleDateString() + ' ' + '00:00:00',)).format('YYYY-MM-DD')} 00:00:00`,
                obj.end = `${dayjs(new Date(obj?.start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
            eq.value = obj
        }
        setSearchField((val) => ({ ...val, sale_start_time: eq?.value?.start, sale_end_time: eq?.value?.end, size: 10 }))
        setStart(eq?.value?.start)
        setEnd(eq?.value?.end)
        setShowTime(false)
    }

    const timeArea = useMemo(() => {
        if (end !== '') {
            return start + '   ' + '-' + '  ' + end
        } else {
            return '自定义起始时间'
        }
    }, [end])

    const handSure = () => {
        pageNum.current.page = 1
        setSearchField((val) => ({ ...val, size: 10 }))
        setshowPopup?.(false)
        getOrderList()
    }

    useEffect(() => {
        setSearchField(searchField)
    }, [searchField])



    return (
        <>
            <View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
                <Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
                    <View className={styles.flexBox} onClick={() => showSelctPopup()}>
                        <IconFont name='icon-shaixuan' size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles['activeshaixuan']} />
                        {/* <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View> */}
                        <View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
                    </View>
                </Search>
            </View>
            <Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
            <View className={styles.order_list}>
                <InfiniteScroll
                    statusMore={statusMore}
                    selfonScrollToLower={getScrolltolower}
                    refresherEnabled={true}
                    refresherTriggered={refresherTriggeredStatus}
                    selfOnRefresherRefresh={getRefresherRefresh}>
                    {orderData?.list?.map((item, index) => {
                        return (
                            <View key={item.id} className={styles.order_item_con}>
                                <ItemList
                                    obj={item}
                                    key={index}
                                ></ItemList>
                            </View>
                        )
                    })}
                </InfiniteScroll>
                <View className={styles.kongboxTwo}></View>
            </View>
            <Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
                <View className={styles.popupBox}>
                    <ScrollView className={styles.scrllStyle} scrollY>
                        <View className={styles.thirdBox}>
                            <View className={styles.thirdTopfont}>售后状态</View>
                            <View className={styles.flexModebox}>
                                {
                                    stageList.map((item, index) => {
                                        return (
                                            <View onClick={() => { handCheckStange(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                        <View className={styles.thirdBox}>
                            <View className={styles.thirdTopfont}>订单类型</View>
                            <View className={styles.flexModebox}>
                                {
                                    modeList.map((item, index) => {
                                        return (
                                            <View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                        <View className={styles.thirdBox}>
                            <View className={styles.thirdTopfont}>退款类型</View>
                            <View className={styles.flexModebox}>
                                {
                                    typeList.map((item, index) => {
                                        return (
                                            <View onClick={() => { handType(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                        <View className={styles.thirdBox}>
                            <View className={styles.thirdTopfont}>售后时间</View>
                            <View className={styles.timeBox2} onClick={() => { setShowTime(true) }}>{timeArea}
                                <View className={styles.more}>
                                    {
                                        timeArea == '自定义起始时间' &&
                                        <IconFont name={'icon-chakanquanbukehu'} color={'#000000'} size={40} customClassName={styles['more']}></IconFont>
                                    }
                                </View>
                            </View>
                        </View>
                        <View className={styles.safeBox}></View>

                        <View className={styles.bottomBox}>

                            <Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
                            <Button className={classnames(isDisabled ? styles.button2 : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认</Button >
                        </View>
                    </ScrollView>
                    {/* <View className={styles.areaBox}></View> */}
                </View>
            </Popup>
            <TimePickerPopup
                start={start}
                end={end}
                showTime={showTime}
                closePopup={handClose}
                onSelectDate={(e) => handTime(e)}
            ></TimePickerPopup>
        </>
    )
}