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

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 [tableData, setTableData] = useState([]);

  const columns = [
    {
      title: '业务名称',
      dataIndex: 'businessName',
      key: 'businessName',
      width: 100,
      align: 'center',
    },
    {
      title: '业务类型',
      dataIndex: 'businessType',
      key: 'businessType',
      width: 100,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '执行周期',
      dataIndex: 'docycle',
      key: 'docycle',
      width: 100,
      align: 'center',
    },
    {
      title: '台账名称',
      dataIndex: 'accountName',
      key: 'accountName',
      width: 200,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '反馈名称',
      dataIndex: 'feedbackName',
      key: 'feedbackName',
      width: 200,
      align: 'center',
    },
    {
      title: '台账过滤条件',
      dataIndex: 'filterCondition',
      key: 'filterCondition',
      width: 200,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '是否送审',
      dataIndex: 'isSubmit',
      key: 'isSubmit',
      width: 100,
      align: 'center',
    },
    {
      title: '执行角色',
      dataIndex: 'doRole',
      key: 'doRole',
      width: 200,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '预生成天数',
      dataIndex: 'produceDays',
      key: 'produceDays',
      width: 100,
      align: 'center',
    },
    {
      title: '在线任务量',
      dataIndex: 'onLines',
      key: 'onLines',
      width: 100,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '启停',
      dataIndex: 'doNot',
      key: 'doNot',
      width: 100,
      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_XWBPlan_DataList().then(res => {
      setTreeLoading(false);
      if (res.msg === 'Ok') {
        setTableData(res.data);
      }
    });
  }, [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);
  };

  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}
              style={{
                marginLeft: '30px',
                verticalAlign: 'middle',
                marginTop: '10px',
              }}
            >
              添加
            </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}
          placement="right"
        />
      </div>
    </div>
  );
};

export default maintenance;
