import React, { useState } from 'react';
import { Card, Button, Table, Divider, Popconfirm, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import AddModal from './components/AddModal';
import ChargeModal from './components/ChargeModal';
import {getList, ListVO, deleteApi} from './api';
import usePagination from '@/hooks/usePagination';

const Column = Table.Column;
export default function Index() {
  const {list, loading, paginationConfig, setParams} = usePagination<ListVO>(getList, [], {});
  const [current, setCurrent] = useState<{ visible: boolean, item: ListVO }>({visible: false, item: {}});
  const [chargeInfo, setChargeInfo] = useState<{ visible: boolean, item: ListVO }>({visible: false, item: {}});
  const data = [{id: 1, supplierName: "货拉拉", shopName: "不过承诺书可能单纯迪士尼才", amount: 3000, minAmount: 1500, roleName: "计划制定员", account: "15725173,16638183"}];
  return (
    <PageHeaderWrapper title="货拉拉账户配置">
      <Card 
        extra={<Button type="primary" onClick={() => setCurrent({visible: true, item: {}})}>新增</Button>}
      >
        <Table dataSource={data} rowKey="id" loading={loading} pagination={paginationConfig}>
          <Column title="往来单位" dataIndex="supplierName" />
          <Column title="签约门店" dataIndex="shopName" />
          <Column title="当前余额(元)" dataIndex="amount" />
          <Column title="低余额推待办(元)" dataIndex="minAmount" />
          <Column title="推待办角色" dataIndex="roleName" />
          <Column title="发单账号" dataIndex="account" />
          <Column 
            title="操作" 
            render={r => (
              <div style={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                <a onClick={() => setChargeInfo({visible: true, item: r})}>预付款充值申请</a>
                <Divider type="vertical" />
                <a onClick={() => setCurrent({visible: true, item: r})}>编辑</a>
                <Divider type="vertical" />
                <Popconfirm
                  title="确认删除"
                  onConfirm={() => {
                    deleteApi({id: r.id}).then(res => {
                      message.success('操作成功');
                      setParams({}, true);
                    }).catch(e => message.error(e.message));
                  }}
                >
                  <a>删除</a>
                </Popconfirm>
              </div>
            )}
          />
        </Table>
        <AddModal visible={current.visible} item={current.item} onCancel={() => setCurrent({ visible: false, item: {} })} />
        <ChargeModal visible={chargeInfo.visible} item={chargeInfo.item} onCancel={() => setChargeInfo({ visible: false, item: {} })} />
      </Card>
    </PageHeaderWrapper>
  );
}