import React, { useEffect, useState } from 'react';
import { reloadFlowNodeExtendPages, removeFlowNodeExtendPage } from '@/services/flow/flow';
import {
  Table,
  Modal,
  Space,
  Tooltip,
  Popconfirm,
  Button,
  notification,
  message,
  Spin,
} from 'antd';
import { EditTwoTone, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import AddModal from './auxiliaryComponents/AddModal';
import styles from '../flowNode.less';

const AuxiliaryView = props => {
  const { handleCancel, visible, msg } = props;
  const [tableData, setTableData] = useState([]); // 辅助视图对应的回显的表格
  const [viewModal, setViewModal] = useState(false); // 辅助视图新政编辑模态框
  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
  const [editMsg, setEditMsg] = useState({}); // 保存编辑的信息
  const [title, setTitle] = useState('');
  const [flowNodeId, setFlowNodeId] = useState('');
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    if (visible) {
      console.log(msg);
      setFlowNodeId(msg.ID);
      setTitle(`${msg.flowName}/${msg.name}`);
      getData();
    }
  }, [visible]);
  // 数据初始化
  const getData = () => {
    setLoading(true);
    reloadFlowNodeExtendPages({ flowNodeId: msg.ID }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setTableData(res.data);
      }
    });
  };
  // 编辑辅助视图
  const toEdit = val => {
    setViewModal(true);
    setModalType('edit');
    setEditMsg(val);
  };
  // 删除辅助视图
  const delRow = record => {
    removeFlowNodeExtendPage({ flowNodeExtendId: record.ID })
      .then(res => {
        if (res.code === 0) {
          getData();
          notification.success({
            message: '提示',
            duration: 3,
            description: '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(() => {
        notification.error({
          message: '提示',
          duration: 3,
          description: '网络异常',
        });
      });
  };

  // 定义表格
  const columns = [
    {
      title: '前端便签',
      dataIndex: 'WebLabel',
      align: 'center',
      render: text => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return <span>{text}</span>;
      },
    },
    {
      title: '前端视图',
      dataIndex: 'WebPage',
      align: 'center',
      ellipsis: {
        showTitle: true,
      },
      render: text => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return (
          <Tooltip placement="topLeft" title={text}>
            <span>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '前端参数',
      dataIndex: 'WebParam',
      align: 'center',
      ellipsis: {
        showTitle: true,
      },
      render: text => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return (
          <Tooltip placement="topLeft" title={text}>
            <span>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '手持标签',
      dataIndex: 'MobileLabel',
      align: 'center',
      render: text => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return <span>{text}</span>;
      },
    },
    {
      title: '手持视图',
      dataIndex: 'MobilePage',
      align: 'center',
      render: text => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return <span>{text}</span>;
      },
    },
    {
      title: '手持参数',
      dataIndex: 'MobileParam',
      align: 'center',
      render: text => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return <span>{text}</span>;
      },
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      render: record => (
        <>
          <Space>
            <Tooltip title="修改节点辅助视图">
              <EditTwoTone
                onClick={() => toEdit(record)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip>
            <Tooltip title="删除节点辅助视图">
              <Popconfirm
                title="是否清除该辅助视图?"
                onConfirm={() => delRow(record)}
                onCancel={() => message.error('取消清除')}
                okText="是"
                cancelText="否"
              >
                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
              </Popconfirm>
            </Tooltip>
          </Space>
        </>
      ),
    },
  ];
  return (
    <Modal
      title={`${title} 的辅助视图`}
      visible={visible}
      width="1200px"
      onCancel={handleCancel}
      maskClosable={false}
      centered
      footer={null}
    >
      <div className={styles.auxiliaryViewBox}>
        <div className={styles.buttonList}>
          <Button
            type="primary"
            onClick={() => {
              setViewModal(true);
              setModalType('add');
            }}
            icon={<PlusOutlined />}
          >
            新增辅助视图1
          </Button>
        </div>
        <Spin spinning={loading} tip="loading...">
          <Table
            dataSource={tableData}
            columns={columns}
            rowKey={record => record.ID}
            bordered
            size="small"
            scroll={{ y: '400px' }}
            onRow={record => ({
              onDoubleClick: () => {
                toEdit(record);
              },
            })}
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
              pageSizeOptions: [10, 20, 50, 100],
              defaultPageSize: 10,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
          />
        </Spin>
      </div>
      <AddModal
        visible={viewModal}
        msg={editMsg}
        title={title}
        flowNodeId={flowNodeId}
        modalType={modalType}
        handleCancel={() => setViewModal(false)}
        onSubumit={() => {
          setViewModal(false);
          getData();
        }}
      />
    </Modal>
  );
};
export default AuxiliaryView;
