import React from 'react';
import styles from './index.less';
import { List } from 'antd-mobile';
import Icon from 'components/Icon';
import router from 'umi/router';

const Item = List.Item;
const iconOpt = {
  color: '#555661',
};
const Index = () => {
  return (
    <div className={styles.root}>
      <div className={styles.header}>
        <div className={styles.dashboard}>
          <div className={styles.top}>
            <img className={styles.avatar} src={'./images/profile/avatar.png'} alt="" />
            <div className={styles.basic}>
              <div className={styles.name}>彭于晏</div>
              <div className={styles.phone}>18236347568</div>
            </div>
            <div className={styles.action}>
              <div className={styles.vip}>购买VIP</div>
            </div>
          </div>
          <div className={styles.bottom}>
            <div className={styles.item}>
              <div className={styles.title}>我的余额</div>
              <div className={styles.count}>
              <span>1000</span>
                <img src={"./images/profile/right.svg"} alt=""/>
              </div>
            </div>
            <div className={styles.item}>
              <div className={styles.title}>我的积分</div>
              <div className={styles.count}>
                <span>5000</span>
                <img src={"./images/profile/right.svg"} alt=""/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.list}>
          <List>
            <Item arrow="horizontal" onClick={() => {router.push('/list');}}>
              <div className={styles.item}>
                <Icon
                  {...iconOpt}
                  onClick={() => {}}
                  type={require('public/images/profile/signup.svg')}
                />
                <div className={styles.label}>签到</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/join-vip.svg')}
                />
                <div className={styles.label}>加入会员</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {router.push('/profile/order');}}>
              <div className={styles.item}>
                <Icon
                  {...iconOpt}
                  type={require('public/images/profile/my-order.svg')}
                />
                <div className={styles.label}>我的订单</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/error-question.svg')}
                />
                <div className={styles.label}>错题集</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {router.push('/profile/course');}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/my-course.svg')}
                />
                <div className={styles.label}>我的课程</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/my-start.svg')}
                />
                <div className={styles.label}>我的收藏</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/refueling-card.svg')}
                />
                <div className={styles.label}>学习加油卡</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/link-me.svg')}
                />
                <div className={styles.label}>联系我们(微信)</div>
              </div>
            </Item>
            <Item arrow="horizontal" onClick={() => {router.push('/profile/notice');}}>
              <div className={styles.item}>
                <Icon
                  onClick={() => {}}
                  {...iconOpt}
                  type={require('public/images/profile/notice.svg')}
                />
                <div className={styles.label}>通知公告</div>
              </div>
            </Item>
          </List>
        </div>
      </div>
    </div>
  );
};

export default Index;