import { Image } from '@tarojs/components';

import { Tabs } from '@taroify/core';

import PartnerKanban from '@/components/partner-kanban';
import { ProfitType } from '@/types/partner';
import Toast from '@/utils/toast';

import ProfitList from './ProfitList';

import './index.less';

const PREFIX = 'partner-profit';

function TableTitle() {
  return (
    <div className={`${PREFIX}__title`}>
      <div className={`${PREFIX}__item time`}>结算时间</div>
      <div className={`${PREFIX}__item project`}>项目</div>
      <div className={`${PREFIX}__item status`}>状态</div>
      <div className={`${PREFIX}__item income`}>收入(元)</div>
    </div>
  );
}

export default function PartnerProfit() {
  const handleClickHelpChat = () => {
    Toast.info('主播被开聊14天后会显示收益');
  };
  const handleClickHelpPay = () => {
    Toast.info('会员支付15日后结算收益');
  };
  const handleClickHelpInvite = () => {
    Toast.info('所邀合伙人获得收益后自动获得收益');
  };
  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__top`}>
        <PartnerKanban />
      </div>
      <div className={`${PREFIX}__main`}>
        <Tabs className={`${PREFIX}__tabs`} ellipsis={false}>
          <Tabs.TabPane
            title={
              <>
                推荐主播收益
                <Image
                  className={`${PREFIX}__help-icon`}
                  src={require('@/statics/svg/help.svg')}
                  onClick={handleClickHelpChat}
                />
              </>
            }
          >
            <TableTitle />
            <ProfitList type={ProfitType.CHAT_SHARE} />
          </Tabs.TabPane>
          <Tabs.TabPane
            title={
              <>
                推荐会员权益
                <Image
                  className={`${PREFIX}__help-icon`}
                  src={require('@/statics/svg/help.svg')}
                  onClick={handleClickHelpPay}
                />
              </>
            }
          >
            <TableTitle />
            <ProfitList type={ProfitType.PAYMENT_SHARE} />
          </Tabs.TabPane>
          <Tabs.TabPane
            title={
              <>
                推荐合伙人收益
                <Image
                  className={`${PREFIX}__help-icon`}
                  src={require('@/statics/svg/help.svg')}
                  onClick={handleClickHelpInvite}
                />
              </>
            }
          >
            <TableTitle />
            <ProfitList type={ProfitType.INDIRECT_MEMBER_REFERRAL} />
          </Tabs.TabPane>
        </Tabs>
      </div>
    </div>
  );
}