import React, { useEffect, useState } from 'react';
import { FilterTable, FormItem } from 'wptpc-design';
import { message, Divider, Modal, Popconfirm } from 'antd';
import { fetchApiGet } from '@/apis';
import { addItem, editItem, delItem } from './services';
import {dc} from "@/conf/config";

let localrefresh = null;
export default function EventManage() {
  const apiUrl = `${dc}/ts/web/get-event-list`;

  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [formParams, setFormParams] = useState({});
  const [typeNum, setTypeNum] = useState({}); // 编辑3 添加4

  const add = (e, record, index) => {
    setFormParams({});
    setTypeNum(2);
    setVisible(true);
  };

  //

  const edit = text => {
    setFormParams(text);
    setTypeNum(3);
    setVisible(true);
  };

  const confirm = (e, text) => {
    delItem({ id: text.id }).then(res => {
      if (res && res.code === 0) {
        message.success(res.msg);
        localrefresh();
      }
    });
  };

  const onParamsChange = (key, value) => {
    setFormParams({ ...formParams, [key]: value });
  };

  const handleOk = () => {
    if (
      // !formParams.eventName ||
      Object.keys(formParams).length < typeNum ||
      formParams.eventName?.length < 2 ||
      // !formParams.eventType ||
      formParams.eventType?.length < 2
      // !formParams.remarks ||
      // formParams.remarks?.length < 2
    ) {
      message.warning('字段全部必填，2-20个字符');
      return;
    }
    setConfirmLoading(true);
    if (typeNum === 2) {
      addItem(formParams).then(res => {
        if (res && res.code === 0) {
          message.success(res.msg);
          localrefresh();
        }
      });
    } else {
      editItem(formParams).then(res => {
        if (res && res.code === 0) {
          message.success(res.msg);
          localrefresh();
        }
      });
    }
    localrefresh();
    setVisible(false);
    setConfirmLoading(false);
  };

  const filterSetting = {
    beforeSearchFunc: params => {},
    hasClearBtn: false,
    perWidthUnit: 240,
    formFields: [
      {
        label: '事件标识:',
        key: 'eventType',
        type: 'input',
      },
      // {
      //   label: '事件名称:',
      //   key: 'userinfoId',
      //   type: 'input',
      // },
    ],
  };
  const tableColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },

    {
      title: '事件标识',
      dataIndex: 'eventType',
    },
    {
      title: '事件名称',
      dataIndex: 'eventName',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
    },
    {
      title: '操作',
      dataIndex: 'time',
      render: (e, text, index) => {
        return (
          <span key={index}>
            <a
              onClick={() => {
                edit(text);
              }}
            >
              编辑
            </a>
            <Divider type="vertical" />
            <Popconfirm
              title="确定删除该任务吗?"
              onConfirm={() => {
                confirm(e, text);
              }}
              //   onCancel={cancel}
              okText="Yes"
              cancelText="No"
            >
              <a>删除</a>
            </Popconfirm>
          </span>
        );
      },
    },
  ];
  const tableSetting = {
    getRefresh: refresh => {
      localrefresh = refresh;
    },
    columnConfig: tableColumns,
    rowKey: 'id',
    batchBtns: [{ label: '添加', enabled: true, onClick: add, type: 'primary' }],
  };
  const formSetting = [
    {
      label: '事件标识',
      isRequired: true,
      type: 'input',
      key: 'eventType',
      maxLength: 50,
      placeholder: '2-50个字符',
      disabled: typeNum === 3,
    },
    {
      label: '事件名称',
      isRequired: true,
      type: 'input',
      key: 'eventName',
      maxLength: 50,
      placeholder: '2-50个字符',
    },
    {
      label: '备注',
      // isRequired: true,
      type: 'input',
      key: 'remarks',
      // maxLength: 50,
      // placeholder: '2-20个字符',
    },
  ];
  let getCheck = null;
  return (
    <>
      <FilterTable
        fetchApi={fetchApiGet}
        fetctWhenMount={true}
        filterSetting={filterSetting}
        tableSetting={tableSetting}
        apiUrl={apiUrl}
      />
      <Modal
        title="编辑"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <FormItem
          formSetting={formSetting}
          params={formParams}
          onChange={onParamsChange}
          getCheck={cb => (getCheck = cb)}
        />
      </Modal>
    </>
  );
}