import React, { useState, useEffect } from 'react';
import { Form, Select, Button, Table, Input, Checkbox, Divider } from 'antd';
import { connect } from 'dva';
import AuditNodeModal from './AuditNodeModal';
import AuditModal from './AuditModal';
import styles from './Audit.less';
import router from 'umi/router';

const { Option } = Select;

function Audit(props) {
  const { userList, list = [], dispatch, loading } = props;
  const [form] = Form.useForm();
  const [visible, setVisible] = useState({
    audit: false,
    auditNode: false,
  });
  const columns = [
    {
      title: '审批流名称',
      dataIndex: ['list', 'name'],
    },
    {
      title: '操作',
      render: (item, index) => (
        <>
          <a
            onClick={() => {
              setCurrentNode(item);
            }}
          >
            编辑
          </a>
        </>
      ),
    },
  ];
  const handleAuditOk = values => {
    console.log(values);
    dispatch({
      type: 'flow/addAudit',
      payload: values,
      callback: () => {
        changeVisible('audit', false);
      },
    });
  };
  const changeVisible = (type, visible) => {
    setVisible({
      ...visible,
      [type]: visible,
    });
  };
  const setCurrentNode = item => {
    if (item?.list) localStorage.setItem('currentAudit', JSON.stringify(item.list));
    dispatch({
      type: 'flow/save',
      payload: {
        current: item.list,
      },
    });
    router.push('/home/audit');
  };

  useEffect(() => {
    dispatch({
      type: 'flow/queryAuditList',
    });
  }, []);

  return (
    <div>
      <div className={styles.box}>
        <Button onClick={() => router.go(-1)}>返回</Button>
        <Form layout="inline" name="basic" autoComplete="off" form={form}>
          <Form.Item>
            <Button onClick={() => changeVisible('audit', true)} type="primary">
              新建流程
            </Button>
          </Form.Item>
        </Form>
      </div>

      <Table
        loading={loading['flow/queryAuditList']}
        rowKey="id"
        dataSource={list}
        columns={columns}
      />
      <AuditModal
        loading={loading['flow/addAudit']}
        visible={visible.audit}
        onOk={handleAuditOk}
        onCancel={() => changeVisible('audit', false)}
      />
    </div>
  );
}
export default connect(({ user, flow, loading }) => ({
  userList: user.list,
  list: flow.auditList,
  loading: loading.effects,
}))(Audit);