/* eslint-disable no-else-return */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable camelcase */
import React, { useState, useEffect } from 'react';
import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag } from 'antd';
import {
  CM_XWBPlan_DataList,
  CM_XWBPlan_RemovePlan,
  CM_XWBPlan_ChangeOrder,
} from '@/services/maintenance/api';
import { EditTwoTone, DeleteOutlined, PlusOutlined, OrderedListOutlined } from '@ant-design/icons';
import styles from './maintenance.less';
import AddModal from './AddModal';
import SortModal from './SortModal';

const maintenance = () => {
  const [addVisible, setAddVisible] = useState(false);
  const [type, setType] = useState('');
  const [formObj, setFormObj] = useState('');
  const [treeLoading, setTreeLoading] = useState(false);
  const [flag, setFlag] = useState(0);
  const [sortVisible, setSortVisible] = useState(false);
  const [tableData, setTableData] = useState([]);
  const [keepTableData, setKeepTableData] = useState([]);

  const columns = [
    {
      title: '业务名称',
      dataIndex: 'businessName',
      key: 'businessName',
      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: 'businessType',
      key: 'businessType',
      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: 'docycle',
      key: 'docycle',
      width: 100,
      align: 'center',
    },
    {
      title: '维保设备',
      dataIndex: 'accountName',
      key: 'accountName',
      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: 'feedbackName',
      key: 'feedbackName',

      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: 'doRole',
      key: 'doRole',
      align: 'center',
      onCell: () => ({
        style: {
          maxWidth: 200,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),

      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '预生成天数',
      dataIndex: 'produceDays',
      key: 'produceDays',
      width: 90,
      align: 'center',
      onCell: () => ({
        style: {
          maxWidth: 80,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
    },
    {
      title: '在线任务量',
      dataIndex: 'onLines',
      key: 'onLines',
      width: 90,
      align: 'center',
      onCell: () => ({
        style: {
          maxWidth: 80,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    // {
    //   title: '启停',
    //   dataIndex: 'doNot',
    //   key: 'doNot',
    //   width: 80,
    //   align: 'center',
    // },
    {
      title: '是否送审',
      dataIndex: 'isSubmit',
      key: 'isSubmit',
      width: 80,
      align: 'center',
      render: record => {
        if (record === '是') {
          return <Tag color="success">是</Tag>;
        } else {
          return <Tag color="processing">否</Tag>;
        }
      },
    },
    {
      title: '台账过滤条件',
      dataIndex: 'filterCondition',
      key: 'filterCondition',
      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: '操作',
      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_XWBPlan_DataList().then(res => {
      setTreeLoading(false);
      if (res.msg === 'Ok') {
        setTableData(res.data);
        let list = [];
        res.data.map(i => {
          list.push(i.businessName);
        });
        setKeepTableData(list);
      }
    });
  }, [flag]);

  const add = () => {
    setAddVisible(true);
    setType('add');
  };
  const editEventType = record => {
    setAddVisible(true);
    setType('edit');
    setFormObj(record);
  };
  const deleteEventType = record => {
    CM_XWBPlan_RemovePlan({ planId: record.id }).then(res => {
      if (res.msg === '') {
        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 sort = () => {
    setSortVisible(true);
  };

  const onOK = prop => {
    setSortVisible(false);
    let aa = prop.str.toString();
    console.log(aa);
    CM_XWBPlan_ChangeOrder(aa).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '调整成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };

  return (
    <div className={styles.maintenanceContainer}>
      <div className={styles.contentContainers}>
        <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',
                marginRight: '20px',
              }}
            >
              <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>
          </span>
        </div>
        <Table
          // rowClassName={setRowClassName}
          size="small"
          rowKey="ID"
          bordered
          loading={treeLoading}
          onRow={record => ({
            onDoubleClick: event => {
              event.stopPropagation();
              editEventType(record);
            }, // 双击
          })}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
          pagination={{
            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
            pageSizeOptions: [10, 20, 50, 100],
            defaultPageSize: 20,
            showQuickJumper: true,
            showSizeChanger: true,
          }}
        />
        {/* 添加事件 */}
        <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 maintenance;
