import PageHeader from '@/components/PageHeader';
import CueBubble from '@/components/Popconfirm';
import SearchTable from '@/components/SearchTable';
import ListPage from '@/pages/system/menu/components/Details';
import { DELETE_TENANT, USER_CENTER_TENANT_MANAGE_LIST } from '@/services/Urls';
import { addTenant, editTenant } from '@/services/common/userCenter';
import PremissBtn from '@/utils/btnPermissions';
import { deleteListData, sortDataDetails } from '@/utils/tableFC';
import { encodePw } from '@/utils/tools';
import { ExclamationCircleFilled, PlusOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Drawer, Modal, Space, Input } from 'antd';
import React, { useState,useEffect } from 'react';
import EditForm from './component/EditForm';
import { smallPopup } from '@/utils/constant';
type TableListItem = {
  [key: string]: any;
};
const TenantMange: React.FC = () => {
  const intl = useIntl();
  const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
  const companyId = currentUser?.companyId;
  // 获取字典

  const [reloadNum, setReloadNum] = useState<number>(0);
  const [massIds, setMassIds] = useState<(number | string)[]>([]);
  const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
  const [addOrEdit, setAddOrEdit] = useState<string>('add');
  const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
  const [onFormSubmit, setOnFormSubmit] = useState<number>(0);
  const [editDataInitValue, setEditDataInitValue] = useState<TableListItem>({});
  const [tenantId, setTenantId] = useState<number>();
  const [searchParams, setSearchParams] = useState<any>({});
  const [searchTenantId, setSearchTenantId] = useState<string>('');
  const [searchCompanyName, setSearchCompanyName] = useState<string>('');
  const [searchCurator, setSearchCurator] = useState<string>('');

  // 查看详情
  const [detailData, setDetailData] = useState<any>({});
  const viewDetails = (data: TableListItem) => {
    console.log(data, 'data的值');
    data.value = data.id;
    delete data.id;
    const ORDER: Record<string, number> = {
      value: 1,
      companyName: 2,
      username: 3,
      curator: 4,
      // password:5,
      accountLimit: 5,
      expireTime: 6,
      bindingDomainName: 7,
      updateTime: 8,
      companyIconPath: 9,
    };
    const typeRules = (key: string) => {
      return key === 'companyIconPath' && data.companyIconPath
        ? 'image'
        : 'text';
    };
    const titleFunction = (key: string) => {
      return intl.formatMessage({ id: `tenantManage.list.${key}` });
    };
    const spanRules = (key: string) => {
      return key === 'privilegeRemark' ||
        key === 'companyIconPath' ||
        key === 'updateTime'
        ? 2
        : 1;
    };
    const detailsRule = (key: string, value: any) => {
      switch (key) {
        case 'parentId': {
          const menuTree = JSON.parse(
            localStorage.getItem('currentMenu') || '[]',
          );
          const menu = menuTree.find((item: any) => item.id === value);
          return menu
            ? intl.formatMessage({
                id: `menu.${menu.privilegeNumber}`,
                defaultMessage: '-',
              })
            : '-';
        }
        case 'isOpenWindow':
          return value === 1
            ? intl.formatMessage({ id: 'columns.handel.yes' })
            : value === 2
            ? intl.formatMessage({ id: 'columns.handel.no' })
            : '-';
        default:
          return value;
      }
    };
    const listData = sortDataDetails(
      data,
      ORDER,
      titleFunction,
      typeRules,
      spanRules,
      detailsRule,
    );
    setDetailData(listData);
    setDetailModalVisible(true);
  };

  //
  const timeChange = (expireTime: any) => {
    const type = typeof expireTime;
    if (type === 'object') {
      return expireTime?.format('YYYY-MM-DD HH:mm:ss');
    } else {
      return expireTime;
    }
  };
  // 添加
  const onFinish = (value: any) => {
    console.log(value, 'value11');
    const data: any =
      addOrEdit === 'add'
        ? {
            ...value,
            password: encodePw(value.password),
            id: tenantId,
            accountLimit:
              value.accountLimit === undefined ? 0 : value.accountLimit,
            expireTime: timeChange(value.expireTime),
          }
        : {
            ...value,
            id: tenantId,
            accountLimit:
              value.accountLimit === undefined ? 0 : value.accountLimit,
            expireTime: timeChange(value.expireTime),
          };
    const formData: any = new FormData();
    if (data.file) formData.append('file', data.file);
    delete data.file;
    Object.entries(data).forEach(([k, v]) => {
      if (v || v === 0) {
        formData.append(k, v as any);
      }
    });
    if (addOrEdit === 'add') {
      addTenant(formData).then(() => {
        setDrawerVisible(false);
        setEditDataInitValue({});
        setOnFormSubmit(0);
        setReloadNum((reloadNum) => reloadNum + 1);
      });
    } else {
      editTenant(formData).then(() => {
        setDrawerVisible(false);
        setEditDataInitValue({});
        setOnFormSubmit(0);
        setReloadNum((reloadNum) => reloadNum + 1);
      });
    }
  };

    // 搜索框值改变
    const onSearchTenantIdChange = (e: any) => {
      setSearchTenantId(e.target.value);
      
    };
   // 租户名称
    const onSearchCompanyNameChange = (e: any) => {
      setSearchCompanyName(e.target.value);
    };
   // 联系人
    const onSearchCuratorChange = (e: any) => {
      setSearchCurator(e.target.value);
    };
  
     // 重置输入框
     const onResetSearch = () => {
      setSearchTenantId('');
      setSearchCompanyName('');
      setSearchCurator('');
      setSearchParams({});
    };
  
    useEffect(() => {
      const searchObj:{id?:string,companyName?:string,curator?:string} = {};
      if (searchTenantId !== '') {
        searchObj.id = searchTenantId;
      }
  
      if (searchCompanyName !== '') {
        searchObj.companyName = searchCompanyName;
      }

      if (searchCurator !== '') {
        searchObj.curator = searchCurator;
      }
  
      setSearchParams(searchObj);
    },[searchTenantId,searchCompanyName,searchCurator]);
  
  const columns: ProColumns<TableListItem>[] = [
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.value',
        defaultMessage: '租户ID',
      }),
      dataIndex: 'id',
      key: 'id',
      renderFormItem: () => {
        return (
          <Input
            style={{ width: 250 }}
            allowClear
            onChange={onSearchTenantIdChange}
            placeholder={intl.formatMessage({
              id: 'form.info.text.entrt',
              defaultMessage: '请输入',
            })}
          />
        );
      },
    },
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.companyName',
        defaultMessage: '租户名称',
      }),
      dataIndex: 'companyName',
      key: 'companyName',
      renderFormItem: () => {
        return (
          <Input
            style={{ width: 250 }}
            allowClear
            onChange={onSearchCompanyNameChange}
            placeholder={intl.formatMessage({
              id: 'form.info.text.entrt',
              defaultMessage: '请输入',
            })}
          />
        );
      },
    },
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.username',
        defaultMessage: '该账户管理员账号',
      }),
      dataIndex: 'username',
      search: false,
      key: 'username',
    },
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.accountLimit',
        defaultMessage: '账号额度',
      }),
      dataIndex: 'accountLimit',
      search: false,
      key: 'accountLimit',
      render: (_, record) => [
        <div key="space">
          <span style={{ color: 'rgba(53, 57, 74,1.0)' }}>
            {record.accountLimit === 0
              ? intl.formatMessage({
                  id: 'tenantManage.columns.unLimit',
                  defaultMessage: '不限制',
                })
              : record.accountLimit}
          </span>
        </div>,
      ],
    },
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.expireTime',
        defaultMessage: '过期时间',
      }),
      dataIndex: 'expireTime',
      key: 'expireTime',
      search: false,
    },
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.curator',
        defaultMessage: '联系人',
      }),
      dataIndex: 'curator',
      key: 'curator',
      renderFormItem: () => {
        return (
          <Input
            style={{ width: 250 }}
            allowClear
            onChange={onSearchCuratorChange}
            placeholder={intl.formatMessage({
              id: 'form.info.text.entrt',
              defaultMessage: '请输入',
            })}
          />
        );
      },
    },
    {
      title: intl.formatMessage({
        id: 'tenantManage.columns.bindingDomainName',
        defaultMessage: '绑定域名',
      }),
      dataIndex: 'bindingDomainName',
      search: false,
      key: 'bindingDomainName',
    },
    {
      title: intl.formatMessage({
        id: 'columns.title.option',
        defaultMessage: '操作',
      }),
      valueType: 'option',
      // align: 'right',
      fixed: 'right',
      key: 'option',
      width: 230,
      render: (_, record) => [
        <div key="space">
          <PremissBtn
            buttonKey={'Edit'}
            buttonRender={
              <Button
                key="edit"
                type="link"
                disabled={record.id === 1 ? false : record.id === companyId}
                onClick={() => {
                  setAddOrEdit('edit');
                  setDrawerVisible(true);
                  setEditDataInitValue({
                    ...record,
                    file: record.companyIconPath,
                  });
                  setTenantId(record.id);
                }}
              >
                {intl.formatMessage({
                  id: 'columns.handel.edit',
                  defaultMessage: '编辑',
                })}
              </Button>
            }
          />

          <PremissBtn
            buttonKey={'View'}
            buttonRender={
              <Button
                onClick={() => {
                  viewDetails({ ...record });
                }}
                size="small"
                type="link"
                key="view"
              >
                {intl.formatMessage({
                  id: 'columns.handel.view',
                  defaultMessage: '查看',
                })}
              </Button>
            }
          />

          <PremissBtn
            buttonKey={'Delete'}
            buttonRender={
              <CueBubble
                url={DELETE_TENANT}
                disable={record.id === 1 ? false : record.id === companyId}
                id={record.id}
                onSave={() => {
                  setReloadNum((reloadNum) => reloadNum + 1);
                }}
                key={'del'}
                delTypeTitle={'tenantManage.form.Tenant'}
              />
            }
          />
        </div>,
      ],
    },
  ];

  //多选删除
  const warning = () => {
    Modal.confirm({
      title: <div>{intl.formatMessage({ id: 'userManag.title.deleTenants' })}</div>,
      icon: <ExclamationCircleFilled />,
      content: (
        <>
          {intl.formatMessage({
            id: 'tenantManage.columns.delete',
            defaultMessage: '是否删除当前租户？',
          })}
        </>
      ),
      cancelText: intl.formatMessage({ id: 'columns.handel.cancel' }),
      okText: intl.formatMessage({
        id: 'form.handel.ok',
        defaultMessage: 'OK',
      }),
      onOk() {
        deleteListData(DELETE_TENANT, massIds, () => {
          setReloadNum((reloadNum) => reloadNum + 1);
        });
      },
      onCancel() {},
    });
  };
  return (
    <div>
      <PageHeader />
      <SearchTable
        headerTitle={intl.formatMessage({ id: 'columns.title.header' })}
        reload={reloadNum}
        isSerial={true}
        columns={columns}
        isMass={true}
        setMassIds={setMassIds}
        rowKey={'id'}
        searchParams={searchParams}
        onResetSearch={onResetSearch}
        toolbar={{
          title: (
            <span>
              {intl.formatMessage({
                id: 'columns.title.header'
              })}
            </span>
          ),
        }}
        toolBarRender={() => [
          <div key="delete">
            <PremissBtn
              buttonKey={'Delete'}
              buttonRender={
                <Button
                  onClick={() => warning()}
                  disabled={massIds.length === 0}
                >
                  {intl.formatMessage({
                    id: 'columns.handel.delete',
                    defaultMessage: '删除',
                  })}
                </Button>
              }
            />
          </div>,
          <div key="add">
            <PremissBtn
              buttonKey={'Add'}
              buttonRender={
                <Button
                  type="primary"
                  onClick={() => {
                    setAddOrEdit('add');
                    setDrawerVisible(true);
                    setEditDataInitValue({});
                  }}
                >
                  <PlusOutlined className="margin-r-s" />
                  <FormattedMessage
                    id="columns.handel.add"
                    defaultMessage="添加"
                  />
                </Button>
              }
            />
          </div>,
        ]}
        initAPI={USER_CENTER_TENANT_MANAGE_LIST}
      />
      <Modal
        open={detailModalVisible}
        title={intl.formatMessage({
          id: 'tenantManage.columns.viewDetail',
          defaultMessage: '查看租户',
        })}
        width={smallPopup}
        onCancel={() => {
          setDetailModalVisible(false);
        }}
        footer={false}
      >
        <ListPage data={detailData} />
      </Modal>
      <Drawer
        title={
          addOrEdit === 'edit'
            ? intl.formatMessage({
                id: 'userManage.edit.tenant',
                defaultMessage: '编辑',
              })
            : intl.formatMessage({
                id: 'userManage.add.tenant',
                defaultMessage: '添加',
              })
        }
        placement="right"
        onClose={() => {
          setDrawerVisible(false);
          setEditDataInitValue({});
          setOnFormSubmit(0);
        }}
        width={smallPopup}
        open={drawerVisible}
        maskClosable={false}
        destroyOnClose={true}
        footer={
          <div className="text-right">
            <Space>
              <Button
                onClick={() => {
                  setDrawerVisible(false);
                  setEditDataInitValue({});
                  setOnFormSubmit(0);
                }}
              >
                <FormattedMessage
                  id="form.handel.cancel"
                  defaultMessage="取消"
                />
              </Button>
              <Button
                onClick={() => {
                  setOnFormSubmit(onFormSubmit + 1);
                }}
                type="primary"
                htmlType="submit"
              >
                <FormattedMessage id="form.handel.save" defaultMessage="保存" />
              </Button>
            </Space>
          </div>
        }
      >
        <EditForm
          editDataInitValue={editDataInitValue}
          onFinish={onFinish}
          onFormSubmit={onFormSubmit}
        />
      </Drawer>
    </div>
  );
};
export default TenantMange;