// import CueBubble from '@/components/Popconfirm';
import HandleModal from '@/components/handleModal';
import {
  ADD_DICTIONARY,
  DELETE_DICTIONARY,
  DICTIONARY_LIST,
  UPDATE_DICTIONARY,
} from '@/services/Urls';
import { updateData } from '@/services/common/components';
import PremissBtn from '@/utils/btnPermissions';
import { objectToFormData } from '@/utils/formDataHandel';
import { deleteListData } from '@/utils/tableFC';
import { PlusOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { useIntl, useMutation } from '@umijs/max';
import { Button, Modal, Popconfirm } from 'antd';
import { useState } from 'react';
import SearchTable from './SearchTable';
import SettingForm from './Setting';
import { smallPopup } from '@/utils/constant';

type TableListItem = {
  [x: string]: any;
  initialValues?: {
    [key: string]: any;
  };
};
type DicConfigType = {
  [key: string]: any;
};
const Dictionaries = ({ initialValues }: DicConfigType) => {
  const intl = useIntl();
  const [reloadNum, setReloadNum] = useState(0);
  // const [massIds, setMassIds] = useState<(string | number)[]>([]);
  const [editData, setEditData] = useState<TableListItem>({});
  const [visible, setVisible] = useState<boolean>(false);
  const [visibleHandle, setVisibleHandle] = useState<boolean>(false);
  const [submitHandle, setSubmitHandle] = useState<number>(0);
  const [isEdit, setEdit] = useState<string>('');
  const [isAddChild, setIsAddChild] = useState<boolean>(false);
  const [isEditChild, setIsEditChild] = useState<boolean>(false);

  const columns: ProColumns<TableListItem>[] = [
    {
      title: intl.formatMessage({ id: 'dictionaries.columns.title.number' }),
      dataIndex: 'dictNumber',
      key: 'dictNumber',
      valueType: 'text',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'dictionaries.columns.title.name' }),
      dataIndex: 'dictName',
      key: 'dictName',
      valueType: 'text',
    },
    {
      title: intl.formatMessage({ id: 'dictionaries.label.keyValue' }),
      dataIndex: 'dictValue',
      key: 'dictValue',
      search: false,
    },

    {
      title: intl.formatMessage({ id: 'dictionaries.columns.title.status' }),
      dataIndex: 'status',
      key: 'status',
      search: false,
      render: (_: any, { status }: any) => <span>{status === 1
            ? intl.formatMessage({ id: 'columns.handel.yes' })
        : intl.formatMessage({ id: 'columns.handel.no' })}
      </span>,
    },
    {
      title: intl.formatMessage({ id: 'dictionaries.columns.title.remark' }),
      dataIndex: 'remark',
      key: 'remark',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'dictionaries.columns.title.changeTime' }),
      dataIndex: 'updateTime',
      key: 'updateTime',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'columns.title.option' }),
      valueType: 'option',
      key: 'option',
      width: 230,
      fixed: 'right',
      align: 'right',
      render: (_, record) => {
        return (
          <div style={{ textAlign: 'left' }}>
            <PremissBtn
              key="editable"
              buttonKey={'Edit'}
              buttonRender={
                <Button
                  type="link"
                  onClick={() => {
                    setEditData({
                      ...{
                        dictNumber: initialValues.dictNumber,
                        parentId: initialValues.id,
                        parentLabel: initialValues.dictName,
                      },
                      ...record,
                    });
                    setEdit('edit');
                    setVisible(true);
                    setIsEditChild(false);
                  }}
                >
                  {intl.formatMessage({ id: 'columns.handel.edit' })}
                </Button>
              }
            />

            <PremissBtn
              key="del"
              buttonKey={'Delete'}
              buttonRender={
                <Popconfirm
                  title={
                    <div className="hint-del">
                      {intl.formatMessage(
                        { id: 'modal.info.rules.affirmDel' },
                        {
                          label: intl.formatMessage({
                            id: 'dictionaries.text.dictionaries',
                          }),
                        },
                      )}
                    </div>
                  }
                  onConfirm={() => {
                    if (record.children?.length) {
                      console.log(1);
                      setVisibleHandle(true);
                    } else {
                      console.log(2);
                      deleteListData(DELETE_DICTIONARY, [record.id], () => {
                        setReloadNum((reloadNum) => reloadNum + 1);
                      });
                    }
                  }}
                  okText={intl.formatMessage({ id: 'modal.handel.yes' })}
                  cancelText={intl.formatMessage({ id: 'modal.handel.cancel' })}
                >
                  <Button type="link">
                    {intl.formatMessage({ id: 'columns.handel.delete' })}
                  </Button>
                </Popconfirm>
              }
            />

            <PremissBtn
              key="config"
              buttonKey={'Add'}
              buttonRender={
                record.isAdd && (
                  <Button
                    type="link"
                    onClick={() => {
                      setEdit('add');
                      setIsAddChild(true);
                      setEditData({
                        dictNumber: record.dictNumber,
                        parentId: record.id,
                        parentLabel: record.dictName,
                      } as TableListItem);
                      setVisible(true);
                    }}
                  >
                    {intl.formatMessage({ id: 'dictionaries.handel.addChild' })}
                  </Button>
                )
              }
            />
          </div>
        );
      },
    },
  ];

  const onClose = () => {
    setVisible(false);
    setSubmitHandle(0);
    setEditData({});
  };

  const { mutate } = useMutation(updateData, {
    onSuccess: async () => {
      onClose();
      setReloadNum((reloadNum) => reloadNum + 1);
    },
    onError: () => {},
  });
  // 添加或者编辑
  const onAddOREdit = (values: { [key: string]: any }) => {
    // 处理数据
    const formValue: TableListItem = objectToFormData(values);
    //连接后端接口，阻止重复提交，提交接口数据
    mutate({
      url: isEdit === 'add' ? ADD_DICTIONARY : UPDATE_DICTIONARY,
      values: formValue,
      method: isEdit === 'add' ? 'POST' : 'PUT',
    });
  };

  return (
    <div>
      <HandleModal
        content={intl.formatMessage({ id: 'dictionaries.info.deleteInOrder' })}
        visible={visibleHandle}
        setVisible={setVisibleHandle}
      ></HandleModal>
      <Modal
        title={
          isEdit === 'add'
            ? isAddChild
              ? intl.formatMessage({ id: 'dictionaries.title.addChildConig' })
              : intl.formatMessage({ id: 'dictionaries.title.addConig' })
            : isEditChild
            ? intl.formatMessage({ id: 'dictionaries.title.editChildConig' })
            : intl.formatMessage({ id: 'dictionaries.title.editConig' })
        }
        destroyOnClose={true}
        maskClosable={false}
        open={visible}
        width={smallPopup}
        onCancel={onClose}
        onOk={() => setSubmitHandle(submitHandle + 1)}
      >
        <SettingForm
          onSave={onAddOREdit}
          initialValues={editData}
          // isEdit={isEdit}
          handelSubmit={submitHandle}
        />
      </Modal>
      <SearchTable
        isSerial={true}
        columns={columns}
        headerTitle={intl.formatMessage({ id: 'dictionaries.columns.title.dicManage' })}
        isMass={true}
        rowKey={'id'}
        reload={reloadNum}
        otherParams={{ parentId: initialValues.id }}
        // setMassIds={setMassIds}
        toolBarRender={() => [
          <PremissBtn
            key="add"
            buttonKey={'Add'}
            buttonRender={
              <Button
                type="primary"
                onClick={() => {
                  setEdit('add');
                  setIsAddChild(false);
                  setEditData({
                    dictNumber: initialValues.dictNumber,
                    parentId: initialValues.id,
                    parentLabel: initialValues.dictName,
                  } as TableListItem);
                  setVisible(true);
                }}
              >
                <PlusOutlined />
                {intl.formatMessage({ id: 'columns.handel.add' })}
              </Button>
            }
          />,
        ]}
        initAPI={DICTIONARY_LIST}
      />
    </div>
  );
};
export default Dictionaries;