import React, {useEffect, useState} from 'react';
import { Card, Button, Row } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { createStore } from '@/hooks/moz';
import store from './store';
import List from './components/List';
import { history } from 'umi';
import ShopModal from './components/ShopModal';
import TargetModal from './components/TargetModal';

export const { Provider, useStore } = createStore(store);

function Index() {
  const { loading } = useStore();
  function handleToAdd() {
    const state = { operationType: 1};
    history.push({pathname: '/crm/addTragetProportion', state});
  }

  return (
    <PageHeaderWrapper loading={loading} title="目标和占比设置">
      <Card>
        <Row justify="end" style={{ marginBottom: 20 }}>
          <Button type="primary" onClick={() => handleToAdd()}>新增</Button>
        </Row>
        <List />
      </Card>
      <ShopModal />
      <TargetModal />
    </PageHeaderWrapper>
  );
}

export default () => <Provider><Index /></Provider>;