import React, { useState, useRef,useImperativeHandle,forwardRef } from 'react';
import { Form, Input, Button, Modal, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getInvoiceDetailList,getInvoiceDetailDetail,updateInvoiceDetail } from '@/services/invoiceDetail'
import PageTable from '@/components/PageTable';

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

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

  //弹窗保存
  const Submit = () => {
    updateInvoiceDetail(invoiceDetail.itemId,{...invoiceDetail,...val,invoiceId:invoiceId}).then((res)=>{
      message.success('修改成功')
      setModelLoading(false)
      refrash()
      onCancel()
    }).catch((err) => {
      setModelLoading(false);
      message.error(err.message || err);
    });
  }
  // 弹窗关闭
  const onCancel = () => {
    setEditModal(false);
    setInvoiceDetail()
  }

  const showModel = (id) => {
    getInvoiceDetailDetail(id).then((res) => {
      formModel.setFieldsValue(res)
      setInvoiceDetail(res)
      setEditModal(true);
    }).catch((err) => {
      message.error(err.message || err);
    });
  }
  const refrash=()=>{
    actionRef.current.reload()
  }
  useImperativeHandle(ref, () => ({
    refrash
  }))
  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={showModel}>
      导出
    </Button>,
  ];
  const columns = [
    {
      title: '姓名',
      dataIndex: 'person_name',
      key: 'person_name',
    },
    {
      title: '开票单位',
      dataIndex: 'org_name',
      key: 'org_name',
    },
    {
      title: '纳税识别号',
      dataIndex: 'tax_no',
      key: 'tax_no',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      search:false
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '开户银行',
      dataIndex: 'bank_name',
      key: 'bank_name',
    },    
    {
      title: '开户行账户',
      dataIndex: 'card_no',
      key: 'card_no',
    },
    {
      title: '项目',
      dataIndex: 'item_name',
      key: 'item_name',
    },
    {
      title: '开票金额',
      dataIndex: 'charge',
      key: 'charge',
      search:false
    },
    {
      title: '是否合开',
      dataIndex: 'merge_remark',
      key: 'merge_remark',
      search:false
    },
    {
      title: '住宿清单',
      dataIndex: 'stay_remark',
      key: 'stay_remark',
      search:false
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <Button
          style={{ padding: 0 }}
          type="link"
          key={1}
          onClick={() => showModel(record.detailId)}
        >
          编辑
        </Button>,
      ],
    },
  ];
  return (
    <>
      <PageTable
        request={getInvoiceDetailList}
        toolBarRender={actions}
        actionRef={actionRef}
        columns={columns}
        rowKey="detailId"
        options={false}
        scroll={{ x: 2000 }}
        params={{invoiceId}}
      />

      <Modal
        forceRender
        title={'报销单编辑'}
        visible={editModal}
        onCancel={onCancel}
        keyboard={false}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form {...formItemLayout} onFinish={Submit} form={formModel}>
          <FormItem label="姓名" name="person_name" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="开票（单位全称）" name="orgName" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="纳税识别号" name="tax_no" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="地址" name="address" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="电话" name="phone" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="开户银行" name="bank_name" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="开户行账户" name="card_no" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="开票金额" name="charge" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="是否合开" name="merge_remark" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="住宿清单" name="stay_remark" 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>
    </>
  )
})