import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
import AddView from './AddView';

const ConfigView = (props, ref) => {
  const { editMsg, nodeChage } = props;

  const [viewModal, setViewModal] = useState(false); // 辅助视图新政编辑模态框
  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
  const [flag, setFlag] = useState(0);
  const tableData = useRef([]); // 辅助视图对应的回显的表格
  useEffect(() => {
    tableData.current = [];
    tableData.current = editMsg.ExtendPageList?.map(item => ({ ...item, key: item.ID }));
    setFlag(flag + 1);
  }, [editMsg]);
  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  const getParmar = () => ({ ExtendPageList: tableData.current });
  // 编辑辅助视图
  const toEdit = val => {
    setViewModal(true);
    setModalType('edit');
    setviewMsg(val);
  };
  // 辅助视图确定回调
  const saveView = (val, type) => {
    let list = JSON.parse(JSON.stringify(tableData.current));
    // eslint-disable-next-line prefer-spread
    let newKey = list.length > 0 ? Math.max.apply(Math, list.map(item => item.key)) + 1 : 0;

    if (type === 'add') {
      list.push({ ...val, key: newKey });
    } else {
      let edtiIndex = list.findIndex(item => item.key === val.key);

      list[edtiIndex] = val;
    }
    tableData.current = list;
    nodeChage('ExtendPageList', tableData.current);
    setViewModal(false);
  };
  // 删除辅助视图
  const delRow = record => {
    let list = JSON.parse(JSON.stringify(tableData.current));
    list = list.filter(item => item.key !== record.key);
    tableData.current = list;
    nodeChage('ExtendPageList', tableData.current);
    setFlag(flag + 1);
  };
  // 定义表格
  const columns = [
    {
      title: '前端标签',
      dataIndex: 'WebLabel',
      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="删除节点辅助视图">
              <DeleteOutlined
                onClick={() => delRow(record)}
                style={{ fontSize: '16px', color: '#e86060' }}
              />
            </Tooltip>
          </Space>
        </>
      ),
    },
  ];
  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
        }}
      >
        辅助视图
      </Divider>
      <div
        style={{
          widnt: '100%',
          marginBottom: '10px',
          display: 'flex',
          justifyContent: 'right',
        }}
      >
        <Button
          type="primary"
          onClick={() => {
            setViewModal(true);
            setModalType('add');
          }}
          style={{ display: 'flex', alignItems: 'center' }}
          icon={<PlusOutlined />}
        >
          辅助视图
        </Button>
      </div>
      <Table
        dataSource={tableData.current}
        columns={columns}
        rowKey={record => record.key}
        bordered
        size="small"
        scroll={{ y: 'calc(100vh - 630px)' }}
        onRow={(record, index) => ({
          onDoubleClick: () => {
            toEdit(record, index);
          },
        })}
        pagination={false}
      />
      <AddView
        visible={viewModal}
        msg={viewMsg}
        modalType={modalType}
        handleCancel={() => setViewModal(false)}
        onSubumit={saveView}
      />
    </div>
  );
};

export default forwardRef(ConfigView);
