import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import InfiniteScroll from 'react-infinite-scroll-component'

import { List, Spin } from 'antd'

import { IMyCollectionItem, IOrderListItem, PersonalService } from 'Personal/Personal.service'
import ArticleCard from 'Indepth/components/ArticleCard'
import styles from '../css/PersonalIndex.module.scss'

/**支付订单 */
const OrderComponent: React.FC = () => {
  const pageSize = 10
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [hasMore, setHasMore] = useState<boolean>(false) // 列表加载更多
  const [listData, setListData] = useState<IOrderListItem[]>([])
  const [orderType, setOrderType] = useState<number>(1) // 订单类型 1：畅读卡订单，2：单场付费订单

  // 报告
  const { loading: listLoading, run: getOrderList } = useRequest(PersonalService.getOrderList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setListData([...listData, ...(res?.List || [])])
      setHasMore(res ? !res?.Paging?.IsEnd : false)
    }
  })

  useEffect(() => {
    setListData([])
    getOrderList(pageSize, currentPage, orderType)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleGetMore = () => {
    console.log(listLoading, hasMore)
    if (listLoading || !hasMore) return
    setCurrentPage(currentPage + 1)
    getOrderList(pageSize, currentPage + 1, orderType)
  }

  const orderTypeList = [
    { key: 1, value: '畅读卡订单' },
    { key: 2, value: '单场付费订单' }
  ]

  // 切换tab
  const handleChangeOrderType = (type: number) => {
    setOrderType(type)
    setListData([])
    setCurrentPage(1)
    getOrderList(pageSize, 1, type)
  }
  const handleToDetail = (item: IOrderListItem) => {
    if (orderType === 1) return
    if (item.Source === 'activity') {
      // 活动
      window.open(`${window.location.origin}/activity/detail/${item?.SourceId}`)
    }
  }
  return (
    <Spin spinning={listLoading}>
      <div className={`${styles['collection-wrapper']}`}>
        <div className={styles['order-tab-wrapper']}>
          {orderTypeList.map(item => (
            <div
              key={item.key}
              className={`order-tab-item ${orderType === item.key ? 'order-tab-act' : ''}`}
              onClick={handleChangeOrderType.bind(this, item.key)}
            >
              {item.value}
            </div>
          ))}
        </div>
        <InfiniteScroll
          dataLength={listData?.length || 0}
          next={handleGetMore}
          hasMore={hasMore}
          loader={null}
          scrollableTarget="scrollableDiv"
        >
          <List
            dataSource={listData || []}
            renderItem={(item: IOrderListItem) => (
              <div className={styles['order-list-item']}>
                <div className="order-item-title g-flex g-flex-between g-flex-v-center">
                  <div className="order-name">{item.LabelKeyword}</div>
                  <div className="order-status">{item.OrderStatusText}</div>
                </div>
                <div
                  className={`order-content ${orderType === 2 ? 'order-buy-title' : ''}`}
                  onClick={handleToDetail.bind(this, item)}
                >
                  {orderType === 1
                    ? item.OrderStatus === 2
                      ? `有效期：${item.StartDate}~${item.EndDate}`
                      : ''
                    : item.SourceTitle}
                </div>
                <div className="order-bottom-line g-flex g-flex-between g-flex-v-center">
                  <div className="order-price">¥{item.OrderMoney}</div>
                  <div className="order-paytime">{item.CreateTime}</div>
                </div>
              </div>
            )}
          />
        </InfiniteScroll>
      </div>
    </Spin>
  )
}

export default OrderComponent
