import React, { useState, useRef, } from 'react';
import { message, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem, FormValueType } from './data.d'
import UpdateForm from './components/updateForm';
import { updateInv, getList } from './service';



/**
 * 更新节点
 * @param fields
 */
const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading('正在配置');
  try {
    await updateInv({
      companyName: fields.companyName,
      shibieNo: fields.shibieNo,
      companyAdd: fields.companyAdd,
      companyPhone: fields.companyPhone,
      bank: fields.bank,
      bankNo: fields.bankNo,
      area: fields.area,
      allAdd: fields.allAdd,
      man: fields.man,
      manPh: fields.manPh,
      status: fields.status,
    });
    hide();

    message.success('配置成功');
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};
const invoice: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  //修改页面显隐
  const [updateModalVis, handleUpdateModalVis] = useState<boolean>(false);
  //存值
  const [formValues, setFormValues] = useState({});

  const columns: ProColumns<TableListItem>[] = [
    { title: '序号', dataIndex: 'index', valueType: 'index', width: 10, },
    { title: '项目名称', dataIndex: 'proName', width: 300, copyable: true },
    {
      title: '发票类型', dataIndex: 'type', width: 150,
      valueEnum: {
        0: { text: '普通' },
        1: { text: '专用' },
      },
    },
    {
      title: '状态', dataIndex: 'status', width: 100,
      valueEnum: {
        0: { text: '未开', status: 'Processing' },
        1: { text: '已开', status: 'Success' },
      },
    },
    {
      title: '操作', dataIndex: 'option', width: 180,
      valueType: 'option',
      render: (_, record) => {
        return (
          <>
            {record.status == 0 ?
              <Button size='small' onClick={() => { setFormValues(record); handleUpdateModalVis(true); }}>修改</Button>
              : <Button size='small' onClick={() => { setFormValues(record); handleUpdateModalVis(true); }}>查看</Button>
            }
          </>
        )
      }
    },
  ];
  return (
    <PageHeaderWrapper>
      <ProTable<any>
        actionRef={actionRef}//action触发后更新表格
        columns={columns}//表格
        search={{ labelWidth: 70, span: 6 }}
        pagination={{ defaultPageSize: 10 }}//默认显示条数
        request={(params, sorter, filter) => getList({ ...params, sorter, filter }).then((res) => {
          console.log(res);
          const result = {
            data: res.data.payVoList,
            total: res.data.total,
            success: res.data.success,
            pageSize: res.data.pageSize,
            current: res.data.current
          };
          return result;
        })}
        bordered
      />
      {formValues && Object.keys(formValues).length ? (
        //分派界面
        <UpdateForm
          onCancel={() => {
            handleUpdateModalVis(false);
            setFormValues({});
          }}
          onSubmit={async (value) => {
            const success = await handleUpdate(value);
            if (success) {
              handleUpdateModalVis(false);
              setFormValues({});
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          updateModalVis={updateModalVis}
          values={formValues}
        />
      ) : null}
    </PageHeaderWrapper>

  )
};
export default invoice;