import React, { IocComponent } from '@Ioc/index';
import { LoadDemand, routerHoc } from '@annotation/index';
import { Card, Row, Col, Tabs, Table, List, Switch } from 'antd';
import style from '@/assets/less/page/home.less';
import publicCss from '@/assets/less/public/index.less'
import { CopyOutlined } from '@ant-design/icons';
const { TabPane } = Tabs;

const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];

@LoadDemand
@routerHoc
class Home extends IocComponent {

  state = {
    loading: true,
  };

  onChange = (checked: boolean) => {
    this.setState({ loading: !checked });
  };

  cardTitle() {
    return (
      <div className={`${publicCss.flex} ${publicCss.align}`}>
        任务管理
        <Switch
          size='small'
          className={publicCss.ml10}
          checked={!this.state.loading}
          onChange={res => this.onChange(res)} />
        <span className={style.cardTitleSpan}>(显示隐藏数量)</span>
      </div>
    )
  }

  render() {

    return (
      <div className={style.home}>
        <div className={`${publicCss.flex} ${style.header} ${publicCss.mb10}`}>
          <div className={`${publicCss.flex1} ${style.header_l}`}>
            <div className={`${style.title} ${publicCss.mb5}`}>下午好，尊敬的商家用户151****5554</div>
            <p className={publicCss.mb5}>您当前的返款类型为平台返款，请确保任务金额与买家实付金额一致。</p>
            <p className={publicCss.mb5}>您当前有5条任务处于投诉中，请关注投诉进展。</p>
          </div>
          <div className={`${publicCss.flex1} ${publicCss.flex} ${style.header_r}`}>
            <div className={publicCss.flex1}>
              <div className={`${style.title} ${publicCss.mb5}`}>店铺管理</div>
              <div className={`${publicCss.flex} ${publicCss.mb5}`}>
                <span className={publicCss.mr10}>店铺列表</span>
                <span className={publicCss.mr10}>店铺列表</span>
              </div>
              <div className={`${publicCss.flex} ${publicCss.mb5}`}>
                <span className={publicCss.mr10}>店铺列表</span>
                <span className={publicCss.mr10}>店铺列表</span>
              </div>
            </div>
            <div className={publicCss.flex1}>
              <div className={`${style.title} ${publicCss.mb5}`}>店铺管理</div>
              <div className={`${publicCss.flex} ${publicCss.mb5}`}>
                <span className={publicCss.mr10}>店铺列表</span>
                <span className={publicCss.mr10}>店铺列表</span>
              </div>
              <div className={`${publicCss.flex} ${publicCss.mb5}`}>
                <span className={publicCss.mr10}>店铺列表</span>
                <span className={publicCss.mr10}>店铺列表</span>
              </div>
            </div>
          </div>
        </div>
        <Card
          size='small'
          bordered={false}
          style={{ width: '100%' }}
          title={this.cardTitle()}>
          <div className={`${publicCss.flex} ${publicCss.pd20}`}>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
            <div className={`${publicCss.flex1} ${style.col}`}>
              <CopyOutlined style={{fontSize: 48}} />
              <div className={style.text}>待接手 <span className={style.badge}>5</span></div>
            </div>
          </div>
        </Card>
      </div>
    );
  }
}

export default Home;