import { title } from 'process'
import MyTable from '../../../components/MyTable'
import '../../../styles/home.scss'
import { observer } from 'mobx-react'
import store from '../../../store'
import { useMemo } from 'react'
import { ConfigProvider, Tabs } from 'antd'
import { http_account_assetsRecords, http_cash } from '../../../http/api'
import { getTime } from '../../../utils'

const AssetsRecords = () => {

  const { screenWidth } = store.state

  const containerWidth = useMemo(() => {
    if (screenWidth > 1420) {
      return 1420 - 310
    }
    if (screenWidth > 1000) {
      return screenWidth - 320
    }
    return screenWidth - 30
  }, [screenWidth])

  const AccountRecord = () => (
    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
      <MyTable
        apiFun={http_account_assetsRecords}
        columns={[
          {
            title: '状态',
            dataIndex: 'status',
            width: 150
          },
          {
            title: '时间',
            dataIndex: 'time',
            width: 200,
            render: (time: number) => (
              <span>{getTime(time * 1000)}</span>
            )
          },
          {
            title: '事件',
            dataIndex: 'event',
            width: 150
          },
          {
            title: '订单',
            dataIndex: 'order',
            width: 120
          },
          {
            title: '账户',
            dataIndex: 'account'
          },
          {
            title: '金额',
            dataIndex: 'amount',
            render: (val: string) => (
              <span>${val}</span>
            )
          },
          {
            title: '描述',
            dataIndex: 'describe'
          },

        ]}
      />
    </div>
  )

  const WalletToAsseetRecord = () => (
    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
      <MyTable
        apiFun={http_cash}
        extraProps={{ type: 1 }}
        columns={[
          {
            title: '时间',
            dataIndex: 'time',
            width: 200,
            render: (time: number) => (
              <span>{getTime(time * 1000)}</span>
            )
          },
          {
            title: '订单',
            dataIndex: 'order',
          },
          {
            title: '描述',
            dataIndex: 'describe',
          },
          {
            title: '金额',
            dataIndex: 'amount'
          },
          {
            title: '剩余',
            dataIndex: 'balance',
            render: (val: string) => (
              <span>${val}</span>
            )
          },
          {
            title: '状态',
            dataIndex: 'status'
          },
        ]}
      />
    </div>
  )

  const AssetToVipRecords = () => (
    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
      <MyTable
        apiFun={http_cash}
        extraProps={{ type: 2 }}
        columns={[
          {
            title: '时间',
            dataIndex: 'time',
            width: 200,
            render: (time: number) => (
              <span>{getTime(time * 1000)}</span>
            )
          },
          {
            title: '订单',
            dataIndex: 'order',
          },
          {
            title: '描述',
            dataIndex: 'describe',
          },
          {
            title: '金额',
            dataIndex: 'amount'
          },
          {
            title: '剩余',
            dataIndex: 'balance',
            render: (val: string) => (
              <span>${val}</span>
            )
          },
          {
            title: '状态',
            dataIndex: 'status'
          },
        ]}
      />
    </div>
  )

  const AssetToWalletRecords = () => (
    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
      <MyTable
        apiFun={http_cash}
        extraProps={{ type: 3 }}
        columns={[
          {
            title: '时间',
            dataIndex: 'time',
            width: 200,
            render: (time: number) => (
              <span>{getTime(time * 1000)}</span>
            )
          },
          {
            title: '订单',
            dataIndex: 'order',
          },
          {
            title: '描述',
            dataIndex: 'describe',
          },
          {
            title: '金额',
            dataIndex: 'amount'
          },
          {
            title: '剩余',
            dataIndex: 'balance',
            render: (val: string) => (
              <span>${val}</span>
            )
          },
          {
            title: '状态',
            dataIndex: 'status'
          },
        ]}
      />
    </div>
  )

  return (
    <div className="records" >
      <div className='text-white fz-22'>账单记录</div>
      <ConfigProvider theme={{
        components: {
          Tabs: {
            itemColor: '#fff',
            itemSelectedColor: '#f7b93f',
            inkBarColor: '#f7b93f'
          }
        }
      }}>
        <Tabs defaultActiveKey='1' tabPosition="top" items={[
          {
            key: '1',
            label: '资金账户记录',
            children: AccountRecord(),
          },
          {
            key: '2',
            label: '现金钱包->资金账户',
            children: WalletToAsseetRecord(),
          },
          {
            key: '3',
            label: '现金钱包->其他会员',
            children: AssetToVipRecords(),
          },
          {
            key: '4',
            label: '资产账户->现金钱包',
            children: AssetToWalletRecords(),
          }
        ]} />
      </ConfigProvider>

    </div >
  )
}

export default observer(AssetsRecords)