import React, { useState, useEffect, useRef } from 'react';
import { Button, Space, Table, message } from 'antd';
import { connect, useNavigate } from 'umi';
import AuditModal from './AuditModal';
import PageContent from '@/components/PageContent';
import { queryProcessFlows, saveAuditFlowInfo } from '@/services/boom';

function Audit(props) {
  const { list = [], classify = [], dispatch, loading } = props;
  let navigate = useNavigate();
  const [data, setData] = useState();
  const [visible, setVisible] = useState({
    audit: false,
    auditNode: false,
  });
  const detailRef = useRef();
  const columns = [
    {
      title: '审批流名称',
      dataIndex: 'name',
    },
    {
      title: '分类',
      dataIndex: 'classify_id',
      render: (id) => classify?.find((item) => item.id == id)?.name || '-',
    },
    {
      title: '操作',
      render: (item, index) => (
        <Space>
          <a
            onClick={() => {
              setCurrentNode(item);
            }}
          >
            编辑
          </a>
          <a
            onClick={() => {
              setData(item);
              changeVisible('audit', true);
              queryDetail(item);
            }}
          >
            复制
          </a>
        </Space>
      ),
    },
  ];
  const queryDetail = async (item) => {
    const res = await queryProcessFlows({ ids: Number(item.id) });
    if (res?.data) {
      detailRef.current = res.data;
    }
  };

  const handleCopy = async (values) => {
    dispatch({
      type: 'flow/addAudit',
      payload: {
        ...values,
        flow_type: 1,
      },
      callback: async (res) => {
        if (res?.data && detailRef.current) {
          let param = {
            id: Number(res.data?.id),
            form_json: detailRef.current.form_json,
            process_json: detailRef.current.process_json,
            process_simple_json: detailRef.current.process_simple_json,
          };
          saveAuditFlowInfo(param).then((res) => message.success('添加成功'));
          // dispatch({ type: 'flow/saveAuditFlowInfo', payload: param });
        }
        changeVisible('audit', false);
      },
    });
  };
  const handleAuditOk = (values) => {
    dispatch({
      type: 'flow/addAudit',
      payload: {
        ...values,
        flow_type: 1,
      },
      callback: () => {
        message.success('新增成功');
        changeVisible('audit', false);
      },
    });
  };
  const changeVisible = (type, visible) => {
    setVisible({
      ...visible,
      [type]: visible,
    });
  };
  const setCurrentNode = (item) => {
    localStorage.setItem('currentAudit', JSON.stringify(item));
    dispatch({
      type: 'flow/save',
      payload: {
        current: item.list,
      },
    });
    navigate('/flow/audit');
  };

  useEffect(() => {
    dispatch({
      type: 'flow/queryAuditList',
      payload: {
        flow_type: 1,
      },
    });
    dispatch({
      type: 'flow/queryClassify',
      payload: {
        c_type: 1,
      },
    });
  }, []);

  return (
    <PageContent>
      <Button
        key={1}
        onClick={() => {
          setData(null);
          changeVisible('audit', true);
        }}
        type="primary"
      >
        新建流程
      </Button>
      <Table
        style={{ marginTop: 20 }}
        loading={loading['flow/queryAuditList']}
        rowKey="id"
        dataSource={list}
        columns={columns}
      />

      <AuditModal
        data={data}
        loading={loading['flow/addAudit']}
        visible={visible.audit}
        onOk={data ? handleCopy : handleAuditOk}
        onCancel={() => changeVisible('audit', false)}
        classify={classify}
      />
    </PageContent>
  );
}
export default connect(({ flow, loading }) => ({
  list: flow.auditList,
  classify: flow.classify,
  loading: loading.effects,
}))(Audit);