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, permission, currentUser, loading } = props;
  const [visible, setVisible] = useState(false);
  const columns = [
    {
      title: '流程名称',
      dataIndex: 'Name',
    },
    {
      title: '所属项目',
      dataIndex: 'ProjectId',
      render: projectId => {
        let project = projectList.find(item => item.id == projectId);
        if (project) return `${project.project_name}(${project.project_full_code})`;
      },
    },
    {
      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);
        dispatch({
          type: 'flow/queryDefaultBindClassify',
          payload: {
            project_id: values.project_id,
          },
        });
      },
    });
  };

  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>
        {(permission['func-01-point-bom-flow'] || currentUser.IsSuper) && (
          <Link to="/home/audit-list">
            <Button type="primary">审批流管理</Button>
          </Link>
        )}
      </div>

      <Table
        rowKey="Id"
        loading={loading['flow/queryFlowList']}
        dataSource={list.reverse()}
        columns={columns}
      />

      <FlowModal
        loading={loading['flow/addFlow']}
        visible={visible}
        projectList={projectList}
        onCancel={() => setVisible(false)}
        onOk={onOk}
      />
    </div>
  );
}
export default connect(({ user, flow, loading }) => ({
  userList: user.list,
  permission: user.currentUser.Permission,
  currentUser: user.currentUser,
  list: flow.flowList,
  projectList: flow.projectList,
  loading: loading.effects,
}))(List);