import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Table, Button, Card, Popconfirm, Divider, message } from 'antd';
import AddModal from './components/AddModal';
import {Item, getDetail, DeleteApi} from './api';
import useInitial from '@/hooks/useInitail';

const {Column} = Table;

const Index = () => {
  const [current, setCurrent] = useState<{visible:boolean, item?:any}>({visible: false, item: {}});
  const { data, loading, setParams } = useInitial<Item[], object>(getDetail, [], {});

  const dele = (id?: number) => {
    DeleteApi({id}).then(res => {
      message.success('操作成功');
      setParams({}, true);
    }).catch(e => message.error(e.message));
  };

  return (
    <PageHeaderWrapper title="绩效目标设置">
      <Card>
        <div style={{display: 'flex', justifyContent: 'flex-end', marginBottom: 20}}>
          <Button type="primary" onClick={() => setCurrent({visible: true, item: {}})}>新增</Button>
        </div>
        <Table
          dataSource={data}
          loading={loading}
          rowKey={r => `${r.id}`}
          pagination={false}
        >
          <Column title="库房" dataIndex="storageName" />
          <Column title="门店" dataIndex="shopName" />
          <Column title="订件时长目标(天)" dataIndex="days" />
          <Column title="运费目标(元)" dataIndex="amount" />
          <Column
            title="操作"
            render={(r:Item) => (
              <>
                <a onClick={() => setCurrent({visible: true, item: r})}>编辑</a>
                <Divider type="vertical" />
                <Popconfirm
                  title="确认删除"
                  onConfirm={() => dele(r.id)}
                >
                  <a>删除</a>
                </Popconfirm>
              </>
            )}
          />
        </Table>
        <AddModal item={current.item} visible={current.visible} onCancel={() => setCurrent({visible: false, item: {}})} refesh={() => setParams({}, true)} />
      </Card>
    </PageHeaderWrapper>
  );
};
export default Index;