import React, { useState, useEffect } from 'react';
import { Form, Select, Button, Table, Input, Checkbox, Divider } from 'antd';
import { connect } from 'dva';
import FlowModal from './FlowModal';
import router from 'umi/router';
import Link from 'umi/link';

const { Option } = Select;

function List(props) {
  const { userList, list, dispatch, projectList } = props;
  const [visible, setVisible] = useState(false);
  const columns = [
    {
      title: '流程名称',
      dataIndex: 'Name',
    },
    {
      title: '所属项目',
      dataIndex: ['Project', 'Name'],
    },
    {
      title: '操作',
      render: (item, index) => (
        <>
          <a onClick={() => router.push(`/home/flow/${item.Id}`)}>查看</a>
        </>
      ),
    },
  ];

  const onOk = values => {
    console.log(values);
    dispatch({
      type: 'flow/addFlow',
      payload: values,
      callback: () => {
        setVisible(false);
      },
    });
  };

  useEffect(() => {
    dispatch({
      type: 'flow/queryFlowList',
    });
    dispatch({
      type: 'flow/queryProject',
    });
    dispatch({
      type: 'flow/getRoleList',
    });
    // dispatch({
    //   type: 'flow/queryDingTemplateList',
    // });
  }, []);

  return (
    <div>
      <div style={{ marginBottom: 20 }}>
        <Button type="primary" style={{ marginRight: 20 }} onClick={() => setVisible(true)}>
          新增工作流
        </Button>
        <Link to="/home/audit-list">
          <Button type="primary">审批流管理</Button>
        </Link>
      </div>

      <Table rowKey="Id" dataSource={list} columns={columns} />

      <FlowModal
        visible={visible}
        projectList={projectList}
        onCancel={() => setVisible(false)}
        onOk={onOk}
      />
    </div>
  );
}
export default connect(({ user, flow, loading }) => ({
  userList: user.list,
  list: flow.flowList,
  projectList: flow.projectList,
  loading: loading.models.purchaseList2,
}))(List);