import React, { useEffect } from 'react';
import { Table, Collapse } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';

const { Panel } = Collapse;

function Auth(props) {
  const {
    dispatch,
    authList,
    authVersionList,
    checkedList,
    checkedVersionList,
    checkedPagination,
    typeOptions,
    currentUser,
    loading,
  } = props;

  //监测当前用户，有值时调用列表接口
  useEffect(() => {
    if (!currentUser.ID) return;
    dispatch({
      type: 'authList/queryAuthList',
      payload: { user_id: currentUser.ID },
    });
    dispatch({
      type: 'auth/queryCheckedList',
      payload: { user_id: currentUser.ID, params: { page_size: 99999 } },
    });
  }, [currentUser]);

  useEffect(() => {
    //分类列表
    dispatch({ type: 'auth/queryClassify' });
  }, []);

  const columns = [
    { title: '流程名称', dataIndex: 'name' },
    { title: '所属项目', dataIndex: 'project_name' },
  ];

  const flowColumns = [
    { title: '名称', dataIndex: 'version_name' },
    { title: '节点', dataIndex: 'node_name' },
    { title: '创建人', dataIndex: 'author' },
    {
      title: '分类',
      render: (_, record) => typeOptions.find(cur => cur.id == record.classify_id)?.name,
    },
    { title: '操作', render: (_, record) => <a onClick={() => loadNode(record)}>加载</a> },
  ];

  const loadNode = item => {
    //直接从未处理的列表获取version，下面注释的请求得到的不全。大部分没有；
    let version = {};
    if (item.type == 'checked') {
      version = checkedVersionList.find(v => v.id == item.id);
      localStorage.excelItem = JSON.stringify(version);
      router.push(`/home/detail/${item.project_id}/${item.template_id}?version_id=${version.version_id}`);
    } else {
      //调用接口获取version信息
      dispatch({
        type: 'auth/queryVersionByNode',
        payload: { template_node_id: item.node_id },
        callback: checkedVersionList => {
          let version = checkedVersionList.find(v => v.id == item.id) || {};
          localStorage.excelItem = JSON.stringify(version);
          router.push(`/home/detail/${item.project_id}/${item.template_id}?version_id=${version.version_id}`);
        },
      });
    }
  };

  const renderUnauth = data => (
    <Table columns={flowColumns} dataSource={data} pagination={false} rowKey="id" />
  );

  const renderAuth = data => (
    <Table columns={flowColumns} dataSource={data} pagination={false} rowKey="id" />
  );

  return (
    <Collapse defaultActiveKey={['0']}>
      <Panel header="未审批" key="0">
        <Table
          columns={columns}
          dataSource={authList}
          expandable={{ expandedRowRender: record => renderUnauth(record.nodes) }}
          pagination={false}
          rowKey="key"
          loading={loading.effects['auth/queryVersionByNode'] || loading.models.authList}
        />
      </Panel>
      <Panel header="已审批" key="1">
        <Table
          columns={columns}
          dataSource={checkedList}
          expandable={{ expandedRowRender: record => renderAuth(record.nodes) }}
          pagination={false}
          rowKey="key"
          loading={loading.models.auth}
        />
      </Panel>
    </Collapse>
  );
}

export default connect(({ auth, authList, loading, user }) => ({
  authList: authList.authList,
  authVersionList: authList.authVersionList,
  checkedVersionList: auth.checkedVersionList,
  checkedList: auth.checkedList.list,
  checkedPagination: auth.checkedList.pagination,
  typeOptions: auth.typeOptions,
  currentUser: user.currentUser,
  loading,
}))(Auth);