import { Canvas, Image, Text, View } from '@tarojs/components'
import Taro, { usePullDownRefresh, useReady } from '@tarojs/taro'
import { useRef, useState } from 'react'
import styles from './index.module.scss'
import useLogin from '@/use/useLogin'
import { GenBarCodeOrQrCode, GetInvitationInfo, GetInvitationInfoApi, GetInviteCodeList, GetInviteeRecord } from '@/api/user'
import LayoutBlock from '@/components/layoutBlock'
import { getCDNSource } from '@/common/constant'
import NormalButton from '@/components/normalButton'
import type { TablePropsType } from '@/components/table'
import Table from '@/components/table'
import type { InviteCodePopupRef } from '@/components/inviteCodePopup'
import InviteCodePopup from '@/components/inviteCodePopup'
import { GetInvitationRecordList } from '@/api/share'
import { formatDateTime } from '@/common/fotmat'

// 获取业务员信息
interface Param { inviter_id: number; inviter_name: string; phone: string }
// 需要传进来的表头数据示例
const inviteColumns = [
  {
    key: 'invitee',
    title: '被邀请人',
    dataIndex: 'invitee',
    width: '35%',
  },
  {
    key: 'invitationWay',
    title: '邀请方式',
    dataIndex: 'invitationWay',
    width: '30%',
  },
  {
    key: 'inviteTime',
    title: '邀请时间',
    dataIndex: 'inviteTime',
    width: '35%',
  },
]
const defaultSize = 24

const BindSalesman = () => {
  useLogin()
  const size = useRef(defaultSize)

  // 获取被邀请记录
  const { fetchData: getInviteeRecordAPI } = GetInvitationRecordList()
  const getInviteeRecord = async() => {
    const res = await getInviteeRecordAPI()
    if (res.success) {
      setCurrentTable((prev: any) => ({
        ...prev,
        dataSource: {
          list: res.data.list.map((item, index: number) => ({
            key: index,
            invitationWay: item.invitation_way_name || '--',
            invitee: item.passive_invited_user_name || '--',
            inviteTime: formatDateTime(item.invitation_time, 'YYYY-MM-DD') || '--',
          })),
          total: res.data.list.length,
        },
      }))
      Taro.stopPullDownRefresh()
    }
  }

  useReady(() => {
    getInviteeRecord()
  })

  usePullDownRefresh(async() => {
    getInviteeRecord()
  })

  const inviteCodePopupRef = useRef<InviteCodePopupRef>(null)

  const handleQRcodeShare = async() => {
    inviteCodePopupRef.current?.startDrawPoster()
  }

  const [currentTable, setCurrentTable] = useState<TablePropsType>({
    columns: inviteColumns,
    dataSource: { list: [], total: 0 },
  })

  const handleLoadMore = () => {
    size.current += defaultSize
  }

  return (
    <View className={styles.main}>
      <View className={styles.content}>
        <View className={styles.background}>
          <View className={styles.left}>
            <View className={styles.title}>
              <Text className={styles.title_text}>面料优选A</Text>
              <Text className={styles.title_plus}>+</Text>
            </View>
            <View className={styles.description}>查看成功邀请人信息</View>
          </View>
          <View className={styles.right}>
            <View className={styles.iconContainer}>
              <Image className={styles.icon} src={getCDNSource('/user/inviteCode.png')} mode="widthFix" />
            </View>
          </View>
        </View>
        <View className={styles.inviteCodeContent}>
          <LayoutBlock circle customStyle={{ paddingTop: '10px', paddingBottom: '10px' }}>
            <View className={styles.inviteListTitle}>
              <View className={styles.titleIconLeft}></View>
              <Text className={styles.listTitle}>成功邀请</Text>
              <View className={styles.titleIconRight}></View>
            </View>
            <View className={styles.inviteList}>
              <Table columns={currentTable.columns} emptyText="暂无邀请信息" safeAreaInsetBottom={false} dataSource={currentTable.dataSource} onLoadMore={handleLoadMore}></Table>
            </View>
          </LayoutBlock>
        </View>
      </View>
      <View className={styles.bottomBar}>
        <NormalButton type="primary" round customTextClassName={styles.bottomBar__text} customStyles={{ width: '100%' }} onClick={handleQRcodeShare}>
          生成邀请海报
        </NormalButton>
      </View>
      <InviteCodePopup ref={inviteCodePopupRef}></InviteCodePopup>
    </View>
  )
}

export default BindSalesman