import React, { useState, useRef } from 'react';
import { Form, Input, Popconfirm, Select, Button, Modal, Upload, message } from 'antd';
import { PlusOutlined,DownloadOutlined } from '@ant-design/icons';
import { getInvoicePersonList,getInvoicePersonDetail,saveInvoicePerson,updateInvoicePerson,deleteInvoicePerson } from '@/services/invoicePerson'
import PageTable from '@/components/PageTable';
import { UploadExcel } from '@/components/Upload';

const FormItem = Form.Item;
const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };

export default (props) => {
  const { invoiceId } = props
  const [formModel] = Form.useForm();
  const [editModal, setEditModal] = useState(false);
  const [modelLoading, setModelLoading] = useState(false);
  const [person,setPerson]=useState()
  const actionRef = useRef();

  //弹窗保存
  const Submit = (val) => {
    setModelLoading(true);
    if (person) {
      updateInvoicePerson(person.itemId,{...person,...val,invoiceId:invoiceId}).then((res)=>{
        message.success('修改成功')
        setModelLoading(false)
        actionRef.current.reload()
        onCancel()
      }).catch((err) => {
        setModelLoading(false);
        message.error(err.message || err);
      });
    } else{
      saveInvoicePerson({...val,invoiceId:invoiceId}).then(res=>{
        message.success('添加成功')
        setModelLoading(false)
        actionRef.current.reload()
        onCancel();
      }).catch((err) => {
        setModelLoading(false);
        message.error(err.message || err);
      });
    }
  }
  // 弹窗关闭
  const onCancel = () => {
    setEditModal(false);
    setPerson();
  }

  const showModel = (id) => {
    console.info('------------------',id)
    if (id) {
      getInvoicePersonDetail(id).then((res) => {
        formModel.setFieldsValue(res)
        setPerson(res)
        setEditModal(true);
      }).catch((err) => {
        message.error(err.message || err);
      });
    } else {
      setEditModal(true);
    }
  }
  //删除人员
  const handleDelete = (id) => {
    deleteInvoicePerson(id).then(res=>{
      message.success('删除成功')
      actionRef.current.reload()
    }).catch((err) => {
      message.error(err.message || err);
    });
  }
  const actions = () => [
    <Button key="dowload" icon={<DownloadOutlined />} >
      下载模板
    </Button>,
    <UploadExcel key='upload' />,
    <Button key="add" icon={<PlusOutlined />} onClick={()=>showModel()}>
      新增报销人员
    </Button>,
  ];
  const columns = [
    {
      title: '所属公司',
      dataIndex: 'orgName',
      key: 'orgName',
    },
    {
      title: '报销人',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <Button
          style={{ padding: 0 }}
          type="link"
          key={1}
          onClick={() => showModel(record.invoicePersonId)}
        >
          编辑
        </Button>,
        <Popconfirm
          key={2}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.invoicePersonId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];
  return (
    <>
      <PageTable
        request={getInvoicePersonList}
        toolBarRender={actions}
        actionRef={actionRef}
        columns={columns}
        rowKey="personId"
        options={false}
        search={false}
        params={{invoiceId}}
      />
      <Modal
        forceRender
        title={person ? '报销人员编辑' : '报销人员新增'}
        visible={editModal}
        onCancel={onCancel}
        keyboard={false}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form {...formItemLayout} onFinish={Submit} form={formModel}>
          <FormItem label="所属公司" name="orgName" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="报销人" name="name" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label=" " colon={false}>
            <Button type="default" onClick={onCancel}>
              取消
            </Button>
            <Button
              type="primary"
              loading={modelLoading}
              htmlType="Submit"
              style={{ marginLeft: '4em' }}
            >
              确认
            </Button>
          </FormItem>
        </Form>
      </Modal>
    </>
  )
}