import { Button, Canvas, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import './index.scss'
import classnames from 'classnames'
import { creditListApi } from '@/api/creditLine'
import InfiniteScrollPaging from '@/components/InfiniteScrollPaging'
import { formatDateTime, formatPriceDiv, toDecimal2 } from '@/common/fotmat'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import useLogin from '@/use/useLogin'

const CreditUsed = () => {
  useLogin()
  const { fetchData, state } = creditListApi()
  // 渲染（数据）
  const [data, setData] = useState({
    list: [],
    total: 0,
  })
  const handleChange = useCallback((result) => {
    setData({
      list: result.data.list,
      total: result.data.total,
    })
  }, [])

  return (
    <View className="credit-used">
      <InfiniteScrollPaging fetchData={fetchData} change={handleChange}>
        {
          (data as any)?.list?.map((item, index) => {
            return (
              <View key={index} className="credit-used-list">
                <View className="credit-used-list-top">
                  <View className="credit-used-list-type">{item.quota_order_status_name}</View>
                  <View className={classnames('credit-used-list-price', item.trans_type == 1 ? 'credit-used-list-price-add' : 'green')}>
                    {item.trans_type == 2 ? '-' : '+'}{toDecimal2(formatPriceDiv(item.amount)).toLocaleString()}
                  </View>
                </View>
                <View className="credit-used-list-bottom">
                  <View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
                  <View className="credit-used-list-orderno">订单号：{item.order_no}</View>
                </View>
              </View>
            )
          })
        }
        {/* {data.length>0&&<View className="credit-used-list"></View>} */}
        <View className="credit-used-list"></View>
      </InfiniteScrollPaging>
    </View>
  )
}

// export default ()=>{
//   useEffect(()=>{
//     refreshDataRef.current = refreshData;
//     dataRef.current = data;
//     getData({
//       moreStatus: true
//     },{
//       moreStatus: true
//     });
//   }, [])
//   const {fetchData, state} = creditListApi();
//   const getData = async (startStatus, endStatus)=>{
//     const tRefreshDataRef = refreshDataRef.current as any;
//     setRefreshData({
//       ...tRefreshDataRef,
//       ...startStatus
//     })
//     const result = await fetchData({
//       page: tRefreshDataRef.page,
//       size: tRefreshDataRef.size,
//     });
//     if(result.success){
//       if(result.data.total<=0){
//         setRefreshData({
//           ...tRefreshDataRef,
//           ...endStatus
//         })
//       }else{
//         setData({
//           list: result.data.list,
//           // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
//           total: result.data.total
//         })
//         setRefreshData({
//           ...tRefreshDataRef,
//           refreshStatus: false,
//           moreStatus: false
//         })
//       }
//     }
//   }
//   // 加载刷新数据
//   const [refreshData, setRefreshData] = useState({
//     refreshStatus: false,
//     moreStatus: false,
//     page: 1,
//     size: 10
//   })
//   const refreshDataRef = useRef({});
//   // 渲染（数据）
//   const [data, setData] = useState({
//     list: [],
//     total: 0
//   });
//   const dataRef = useRef({});
//   // 下拉刷新
//   const handleRefresh = async ()=>{
//     let tRefreshData = refreshDataRef.current as any;
//     setRefreshData({
//       ...tRefreshData,
//       page: 1,
//       size: 10,
//     })
//     getData({
//       refreshStatus: true,
//       moreStatus: false
//     },{
//       refreshStatus: false,
//       moreStatus: true
//     });
//   }
//   // 加载更多
//   const handleMoreLoad = async ()=>{
//     let t = (dataRef.current as any);
//     let tRefreshData = refreshDataRef.current as any;
//     if(t.list.length<t.total){
//       setRefreshData({
//         ...tRefreshData,
//         page: ++tRefreshData.page,
//         size: ++tRefreshData.page*tRefreshData.size,
//       })
//       getData({
//         moreStatus: true
//       },{
//         moreStatus: true
//       });
//     }
//   }
//   //数据加载状态
//   const statusMore = useMemo(() => {

//     return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.moreStatus})
//   }, [data])

//   return (
//     <View className="credit-used">
//       <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus}
//       selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
//         {
//           (data as any)?.list?.map((item,index)=>{
//             return (
//               <View key={index} className="credit-used-list">
//                 <View className="credit-used-list-top">
//                   <View className="credit-used-list-type">下单</View>
//                   <View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()}</View>
//                 </View>
//                 <View className="credit-used-list-bottom">
//                   <View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
//                   <View className="credit-used-list-orderno">订单号：{item.order_no}</View>
//                 </View>
//               </View>
//             )
//           })
//         }
//         {/* {data.length>0&&<View className="credit-used-list"></View>} */}
//         <View className="credit-used-list"></View>
//       </InfiniteScroll>
//     </View>
//   )
// }

export default CreditUsed
