import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { reloadFlows, removeFlowExtend } from '@/services/flow/flow';
import { Card, Space, Table, Popconfirm, Spin, Tooltip, notification, message, Button } from 'antd';
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  EditTwoTone,
  ApartmentOutlined,
  DeleteOutlined,
  OrderedListOutlined,
  ControlOutlined,
} from '@ant-design/icons';
import classnames from 'classnames';
import PageContainer from '@/components/BasePageContainer';
import ProcessConfig from './flowComponents/ProcessConfig';
import Order from './flowComponents/Order';
import Timelimit from './flowComponents/Timelimit';
import styles from './flow.less';

const Flow = () => {
  const history = useHistory();
  const [tableData, setTableData] = useState([]); // 流程对应的回显的表格
  const [processData, setProcessData] = useState([]); // 流程列表总
  const [dataSource, setDataSource] = useState(''); // 是否是返回获取数据
  const [processMsg, setProcessMsg] = useState({}); // 流程配置回显信息
  const [treeLoading, setTreeLoading] = useState(false);
  const [treeVisible, setTreeVisible] = useState(true);
  const [pickItemIndex, setPickItemIndex] = useState(0); // 选中流程索引
  const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
  const [visible, setVisible] = useState({
    processConfig: false,
    order: false,
    auxiliaryView: false,
  }); // 弹窗显示
  // 初始化
  useEffect(() => {
    // 初始化流程列表
    getProcessData();
    if (history.location.state && history.location.state.pickItemIndex) {
      setDataSource('back');
    }
  }, []);
  // 表格数据改变后处理
  useEffect(() => {
    // 判断是否是返回回来的页面
    if (processData.length === 0) {
      return;
    }
    if (dataSource === 'back') {
      setPickItemIndex(history.location.state.pickItemIndex);
      setTableData(processData[history.location.state.pickItemIndex].root);
    } else {
      setTableData(processData[pickItemIndex].root);
    }
  }, [processData]);
  // 弹窗显示控制
  const showModal = (key, value) => {
    setVisible({ ...visible, [key]: value });
  };
  // 初始化流程列表
  const getProcessData = () => {
    setTreeLoading(true);
    reloadFlows()
      .then(res => {
        setTreeLoading(false);
        if (res.code === 0) {
          setProcessData(res.data);
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(() => {
        setTreeLoading(false);
        notification.error({
          message: '提示',
          duration: 3,
          description: '网络异常',
        });
      });
  };
  // 删除流程
  const delProcess = val => {
    removeFlowExtend({ flowIDs: val.extendID })
      .then(res => {
        if (res.code === 0) {
          setDataSource('current');
          getProcessData();
          notification.success({
            message: '提示',
            duration: 3,
            description: '清除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(() => {
        notification.error({
          message: '提示',
          duration: 3,
          description: '网络异常',
        });
      });
  };
  // 跳转到对应的流程节点
  const toNode = flowName => {
    console.log(flowName);
    history.push({
      pathname: '/biz/workflow/caseNode',
      state: { flowName, pickItemIndex },
    });
  };
  // 定义表格
  const columns = [
    { title: '名称', dataIndex: 'name', width: 150, align: 'center' },
    {
      title: '前端样式',
      dataIndex: 'extendWebPage',
      align: 'center',
      render: text => (
        <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>{text}</span>
      ),
    },
    {
      title: '手持样式',
      dataIndex: 'extendMobilePage',
      align: 'center',
      render: text => (
        <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>{text}</span>
      ),
    },
    {
      title: '辅助视图',
      dataIndex: 'extendPageCount',
      align: 'center',
      width: 80,
      render: text => <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>{text}</span>,
    },
    {
      title: '流程结束后',
      dataIndex: 'flowEndBehavior',
      align: 'center',
      render: text => (
        <span style={{ color: text === '(不做处理)' ? 'grey' : '000000D9' }}>{text}</span>
      ),
    },
    {
      title: '12位编码',
      dataIndex: 'useFixedCodingRule',
      width: 80,
      align: 'center',
    },
    {
      title: '异常节点',
      dataIndex: 'errorNodes',
      align: 'center',
      render: text => <span style={{ color: text === '(无)' ? 'grey' : 'red' }}>{text}</span>,
    },
    {
      title: '接口配置',
      dataIndex: 'interfaceConfig',
      align: 'center',
      render: text => <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>{text}</span>,
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      render: record => (
        <>
          <Space>
            <Tooltip title="流程配置">
              <EditTwoTone
                onClick={() => {
                  showModal('processConfig', true);
                  setProcessMsg(record);
                }}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip>
            <Tooltip title="时限配置">
              <ControlOutlined
                onClick={() => {
                  showModal('auxiliaryView', true);
                  setProcessMsg(record);
                }}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip>
            <Tooltip title="节点配置">
              <ApartmentOutlined
                onClick={() => toNode(record.name)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip>
            <Tooltip title="清除流程配置">
              <Popconfirm
                title="是否清除该流程配置?"
                onConfirm={() => delProcess(record)}
                onCancel={() => message.error('取消清除')}
                okText="是"
                cancelText="否"
              >
                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
              </Popconfirm>
            </Tooltip>
          </Space>
        </>
      ),
    },
  ];
  return (
    <PageContainer>
      <div className={styles.flowContainer}>
        {/* 左侧事件树 */}
        <Spin spinning={treeLoading} tip="loading...">
          <Card
            className={classnames({
              [styles.orgContainer]: true,
              [styles.orgContainerHide]: !treeVisible,
            })}
          >
            <div style={{ display: `${treeVisible ? 'block' : 'none'}` }}>
              <span className={styles.processTitle}>流程列表</span>
              <hr className={styles.splitLine} />
              {/* 流程列表 */}
              <div style={{ overflowY: 'scroll', height: 'calc(100vh - 150px)' }}>
                {processData.length > 0 &&
                  processData.map((item, index) => (
                    <div
                      className={classnames({
                        [styles.listItem]: true,
                        [styles.pickItem]: index === pickItemIndex,
                        [styles.listHover]: index !== pickItemIndex && index === hoverItemIndex,
                      })}
                      onMouseEnter={() => {
                        setHoverItemIndex(index);
                      }}
                      onMouseLeave={() => {
                        setHoverItemIndex('');
                      }}
                      onClick={() => {
                        setPickItemIndex(index);
                        setTableData(item.root);
                      }}
                      key={item.goupName}
                    >
                      {item.goupName}（{item.count ? item.count : ''}）
                    </div>
                  ))}
              </div>
            </div>
            <div className={styles.switcher}>
              {treeVisible && (
                <Tooltip title="隐藏流程列表">
                  <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
                </Tooltip>
              )}
              {!treeVisible && (
                <Tooltip title="显示流程列表">
                  <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
                </Tooltip>
              )}
            </div>
          </Card>
        </Spin>
        {/* 右侧流程表 */}

        <div className={styles.processContainer}>
          <div className={styles.buttonList}>
            <Button
              onClick={() => {
                showModal('order', true);
              }}
            >
              <OrderedListOutlined />
              排序
            </Button>
          </div>

          <Table
            dataSource={tableData}
            columns={columns}
            rowKey={record => record.ID}
            bordered
            size="small"
            scroll={{ x: 'max-content', y: '100vh-150px' }}
            onRow={record => ({
              onDoubleClick: () => {
                toNode(record.name);
              },
            })}
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
              pageSizeOptions: [10, 20, 50, 100],
              defaultPageSize: 20,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
          />
        </div>
      </div>
      {/* 流程配置弹窗 */}
      <ProcessConfig
        visible={visible.processConfig}
        processMsg={processMsg}
        handleCancel={() => showModal('processConfig', false)}
        onSubumit={() => {
          showModal('processConfig', false);
          setDataSource('current');
          getProcessData();
        }}
      />
      {/* 排序弹窗 */}
      <Order
        visible={visible.order}
        tableData={tableData}
        processData={processData}
        handleCancel={() => showModal('order', false)}
        submitCallBack={() => {
          showModal('order', false);
          setDataSource('current');
          getProcessData();
        }}
      />
      {/* 流程时限配置 */}
      <Timelimit
        visible={visible.auxiliaryView}
        msg={processMsg}
        handleCancel={() => showModal('auxiliaryView', false)}
      />
    </PageContainer>
  );
};

export default Flow;
