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

import { useState } from 'react';
import './index.less';

const PREFIX = 'partner-fragment-entry';

function JoinEntry() {
  return (
    <div className={`${PREFIX}__join`}>
      <div className={`${PREFIX}__join-title`}>
        加入播络合伙人，高达<span className="highlight">75%</span>分成
      </div>
      <div className={`${PREFIX}__join-desc`}>模式简单，分成比例高，欢迎各位群主、经纪人或机构</div>
      <Button className={`${PREFIX}__join-button`}>立即加入</Button>
    </div>
  );
}

function PartnerKanban() {
  return (
    <div className={`${PREFIX}__kanban`}>
      <div className={`${PREFIX}__kanban-button`}>
        查看详情
        <Image
          className={`${PREFIX}__kanban-button__image`}
          mode="aspectFit"
          src={require('@/statics/svg/caret-right.svg')}
        />
      </div>
      <div className={`${PREFIX}__kanban-total`}>
        <div className={`${PREFIX}__kanban-title`}>总收益（元）</div>
        <div className={`${PREFIX}__kanban-money`}>1666.66</div>
      </div>
      <div className={`${PREFIX}__kanban-details`}>
        <div className={`${PREFIX}__kanban-details-part`}>
          <div className={`${PREFIX}__kanban-title`}>可提现（元）</div>
          <div className={`${PREFIX}__kanban-money`}>666.23</div>
        </div>
        <div className={`${PREFIX}__kanban-details-part`}>
          <div className={`${PREFIX}__kanban-title`}>提现中（元）</div>
          <div className={`${PREFIX}__kanban-money`}>666.23</div>
        </div>
        <div className={`${PREFIX}__kanban-details-part`}>
          <div className={`${PREFIX}__kanban-title`}>待分账（元）</div>
          <div className={`${PREFIX}__kanban-money`}>666.23</div>
        </div>
      </div>
    </div>
  );
}

export default function PartnerEntry() {
  const [state] = useState(1);

  if (state === 0) {
    return <JoinEntry />;
  }
  return <PartnerKanban />;
}