/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable camelcase */
import React, { useState, useEffect } from 'react';
import { Space, Table, Popconfirm, Tooltip, Button, notification, Spin, Card } from 'antd';
import {
  CM_Feedback_LoadPatrolFeedbacks,
  CM_Feedback_RemovePatrolFeedback,
} from '@/services/PatrolFeedback/api';
import {
  EditTwoTone,
  DeleteOutlined,
  PlusOutlined,
  OrderedListOutlined,
  DoubleLeftOutlined,
  DoubleRightOutlined,
} from '@ant-design/icons';
import classnames from 'classnames';
import styles from './patrolFeedback.less';
import AddModal from './AddModal';
import SortModal from './SortModal';
import DragTable from '@/components/DragTable/DragTable';

const patrolFeedback = () => {
  const [addVisible, setAddVisible] = useState(false);
  const [type, setType] = useState('');
  const [formObj, setFormObj] = useState('');
  const [treeLoading, setTreeLoading] = useState(false);
  const [flag, setFlag] = useState(0);
  const [tableData, setTableData] = useState([]);
  const [keepTableData, setKeepTableData] = useState([]);
  const [sortVisible, setSortVisible] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置
  const [groupName, setGroupName] = useState(['区域巡检', 'DMA巡检']);
  const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
  const [pickItem, setPickItem] = useState('区域巡检');
  const [hoverItemIndex, setHoverItemIndex] = useState('');

  const columns = [
    {
      title: '巡检对象',
      dataIndex: 'layerName',
      key: 'layerName',
      width: 150,
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      align: 'center',
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '分组',
      dataIndex: 'groupType',
      key: 'groupType',
      align: 'center',
    },
    {
      title: 'GIS图层',
      dataIndex: 'gisLayer',
      key: 'gisLayer',
      width: 100,
      onCell: () => ({
        style: {
          maxWidth: 100,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      align: 'center',
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: 'GIS条件',
      dataIndex: 'gisFilterValue',
      key: 'gisFilterValue',
      width: 100,
      onCell: () => ({
        style: {
          maxWidth: 100,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      align: 'center',
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '反馈表',
      dataIndex: 'tableName',
      key: 'tableName',
      width: 200,
      onCell: () => ({
        style: {
          maxWidth: 200,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      align: 'center',
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '关联事件',
      dataIndex: 'relationEvent',
      key: 'relationEvent',
      width: 200,
      onCell: () => ({
        style: {
          maxWidth: 200,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      align: 'center',
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '字段集',
      dataIndex: 'fields',
      key: 'fields',
      width: 80,
      align: 'center',
    },
    // {
    //   title: '异常值',
    //   dataIndex: 'exceptionValue',
    //   key: 'exceptionValue',
    //   width: 150,
    //   align: 'center',
    // },
    // {
    //   title: '触发事件',
    //   dataIndex: 'eventName',
    //   key: 'eventName',
    //   width: 150,
    //   align: 'center',
    // },
    {
      title: '权限',
      dataIndex: 'roles',
      key: 'roles',
      align: 'center',
      width: 50,
    },
    // {
    //   title: '分组',
    //   dataIndex: 'groupType',
    //   key: 'groupType',
    //   align: 'center',
    // },
    {
      title: '操作',
      ellipsis: true,
      key: 'action',
      align: 'center',
      render: (text, record) => (
        <Space>
          <Tooltip title="修改">
            <EditTwoTone onClick={() => editEventType(record)} style={{ fontSize: '16px' }} />
          </Tooltip>
          <Tooltip title="删除">
            <Popconfirm
              placement="bottomRight"
              title={<p>是否确认删除?</p>}
              okText="确认"
              cancelText="取消"
              onConfirm={() => deleteEventType(record)}
            >
              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    setTreeLoading(true);
    CM_Feedback_LoadPatrolFeedbacks({ pageIndex: 0, pageSize: 0 }).then(res => {
      setTreeLoading(false);
      if (res.code === 0) {
        console.log(res.data.list);
        let data = {};
        if (res.data.list.length > 0) {
          let area = [];
          let dma = [];
          let other = [];
          res.data.list.map(i => {
            if (i.businessGroup === '区域巡检') {
              area.push(i);
            } else if (i.businessGroup === 'DMA巡检') {
              dma.push(i);
            } else if (
              i.businessGroup === '区域巡检,DMA巡检' ||
              i.businessGroup === 'DMA巡检,区域巡检'
            ) {
              area.push(i);
              dma.push(i);
            } else {
              other.push(i);
            }
          });
          data.区域巡检 = area;
          data.DMA巡检 = dma;
          if (other.length > 0) {
            data.未分组 = other;
            setGroupName(['区域巡检', 'DMA巡检', '未分组']);
          } else {
            setGroupName(['区域巡检', 'DMA巡检']);
          }
        }
        console.log(data);
        console.log(data['区域巡检']);
        console.log(data.区域巡检);
        setTableData(data);
        let list = [];
        res.data.list.map(i => {
          list.push(i.layerName);
        });
        setKeepTableData(list);
      }
    });
  }, [flag]);

  const add = () => {
    setAddVisible(true);
    setType('add');
  };
  const editEventType = record => {
    setAddVisible(true);
    setType('edit');
    setFormObj(record);
  };
  const deleteEventType = record => {
    CM_Feedback_RemovePatrolFeedback(record.id).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  const onSubmit = () => {
    setAddVisible(false);
    setFlag(flag + 1);
  };

  const onOK = () => {
    setFlag(flag + 1);
  };

  const sort = () => {
    setSortVisible(true);
  };

  // 复选框
  const rowSelection = {
    selectedRowKeys,
    onChange: (RowKeys, Rows) => {
      setSelectedRowKeys(RowKeys);
    },
  };

  const hasSelected = selectedRowKeys.length > 0;

  const de = () => {
    CM_Feedback_RemovePatrolFeedback(selectedRowKeys.toString()).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '批量删除成功',
        });
        setSelectedRowKeys([]);
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  const dragCallBack = value => {
    if (value) {
      console.log(value);
    }
  };

  return (
    <div className={styles.PatrolFeedbackContainer}>
      <div className={styles.contentContainers}>
        {/* 左侧事件树 */}
        <Spin spinning={treeLoading} tip="loading...">
          <Card
            className={classnames({
              [styles.orgContainer]: true,
              [styles.orgContainerHide]: !treeVisible,
            })}
          >
            <div style={{ height: '100%', display: treeVisible ? 'block' : 'none' }}>
              <span
                style={{
                  fontSize: '15px ',
                  fontWeight: 'bold',
                  marginLeft: '14px',
                }}
              >
                业务划分
              </span>
              <hr style={{ width: '100%', color: '#eeecec' }} />
              <div
                style={{
                  height: 'calc(100% - 60px)',
                  overflowY: 'scroll',
                }}
              >
                {groupName.length > 0 &&
                  groupName.map((item, index) => (
                    <div
                      className={classnames({
                        [styles.listItem]: true,
                        [styles.pickItem]: item === pickItem,
                        [styles.listHover]: item !== pickItem && item === hoverItemIndex,
                      })}
                      onClick={e => {
                        setPickItem(item);
                      }}
                      onMouseEnter={() => {
                        setHoverItemIndex(item);
                      }}
                      onMouseLeave={() => {
                        setHoverItemIndex('');
                      }}
                      key={index}
                    >
                      <div
                        style={{
                          width: '130px',
                          overflow: 'hidden',
                          whiteSpace: 'nowrap',
                          textOverflow: 'ellipsis',
                        }}
                      >
                        <Tooltip placement="top" title={item}>
                          {item}
                        </Tooltip>
                      </div>
                      ({tableData[item] ? tableData[item].length : ''})
                    </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={classnames({
            [styles.userContainer]: true,
            [styles.userContainerHide]: !treeVisible,
          })}
        >
          <div style={{ height: '50px', backgroundColor: 'white' }}>
            <span style={{ float: 'right', marginRight: '10px' }}>
              <Button
                icon={<PlusOutlined className={styles.icon} />}
                onClick={add}
                type="primary"
                style={{
                  verticalAlign: 'middle',
                  marginTop: '10px',
                }}
              >
                <span style={{ marginTop: '-2px' }}>新增</span>
              </Button>
              <Button
                icon={<OrderedListOutlined className={styles.icon} />}
                onClick={sort}
                style={{
                  verticalAlign: 'middle',
                  marginTop: '10px',
                }}
              >
                <span style={{ marginTop: '-2px' }}>调序</span>
              </Button>
              <Button
                icon={<DeleteOutlined className={styles.icon} />}
                style={{
                  verticalAlign: 'middle',
                  marginTop: '10px',
                }}
                onClick={de}
                disabled={!hasSelected}
              >
                <span style={{ marginTop: '-2px' }}>批量删除</span>
              </Button>
            </span>
          </div>
          <Table
            // rowClassName={setRowClassName}
            rowSelection={{
              type: 'checkbox',
              ...rowSelection,
            }}
            size="small"
            rowKey={record => record.id}
            bordered
            loading={treeLoading}
            onRow={record => ({
              onDoubleClick: event => {
                event.stopPropagation();
                editEventType(record);
              }, // 双击
            })}
            columns={columns}
            dataSource={tableData[pickItem]}
            scroll={{ y: 'calc(100% - 205px)', x: 'max-content' }}
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
              pageSizeOptions: [10, 20, 50, 100],
              defaultPageSize: 20,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
          />
        </div>
        {/* 添加事件 */}
        <AddModal
          visible={addVisible}
          type={type}
          onClose={() => setAddVisible(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          keepTableData={keepTableData}
          placement="right"
        />
        <SortModal
          title="调整顺序"
          visible={sortVisible}
          sortData={tableData}
          onCancel={() => setSortVisible(false)}
          callBackSubmit={onOK}
        />
      </div>
    </div>
  );
};

export default patrolFeedback;