import * as React from 'react';
    import { useState, useMemo, useRef } from 'react';
    import DrawerPro from '@/components/DrawerPro';
    import AutoTable from '@/components/AutoTable';
    import PremButton from '@/components/PremButton';
    import getcolumns from './columns';
    import { useRequest } from 'ahooks';
    import { doFetch } from '@/utils/doFetch';

    function Plan(props) {
      const actionRef = useRef(),
        formRef = useRef();
      const [drawer, setdrawer] = useState({
          open: false,
        }),
        [activeTabKey, setactiveTabKey] = useState(1);

      const { run, loading } = useRequest(doFetch, {
        manual: true,
        onSuccess: (res, params) => {
          if (res?.code == '0000') {
            actionRef?.current?.reload();
            setdrawer((s) => ({
              ...s,
              open: false,
            }));
          }
        },
      });

      const detail = (text, row, _, action) => {
        return (
          <PremButton
            btn={{
              size: 'small',
              type: 'link',
              onClick: () => {
                setdrawer((s) => ({
                  ...s,
                  open: true,
                  item: row,
                  title: '详情',
                  val: 'detail',
                  title: '详细信息',
                }));
              },
            }}
          >
            详情
          </PremButton>
        );
      };

      const edit = (text, row, _, action) => {
        return (
          <PremButton
            btn={{
              size: 'small',
              onClick: () => {
                setdrawer((s) => ({
                  ...s,
                  open: true,
                  item: row,
                  title: '编辑',
                  val: 'edit',
                }));
              },
            }}
          >
            编辑
          </PremButton>
        );
      };

      const remove = (text, row, _, action) => {
        return (
          <PremButton
            pop={{
              title: '是否删除?',
              okText: '确认',
              cancelText: '取消',
              onConfirm: () => {
                run({ url: pathconfig?.delete || '/delete', params: { id: row?.id } });
              },
            }}
            btn={{
              size: 'small',
              type: 'danger',
            }}
          >
            删除
          </PremButton>
        );
      };

      const columns = useMemo(() => {
        let defcolumn = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.columns;
        let defpath = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.pathconfig ?? {};
        return defcolumn.concat({
          title: '操作',
          valueType: 'option',
          width: 150,
          render: (text, row, _, action) => [
            defpath?.enabledetail && detail(text, row, _, action),
            defpath?.enableedit && edit(text, row, _, action),
            defpath?.enabledelete && remove(text, row, _, action),
          ],
        });
      }, [activeTabKey]);

      const pathconfig = useMemo(() => {
        let defpath = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.pathconfig ?? {};
        return defpath;
      }, [activeTabKey]);

      return (
        <div style={{ position: 'relative' }}>
          <AutoTable
            pagetitle="点检计划"
            columns={columns}
            path={pathconfig?.list || '/ngic-auth/sysUser/query/page'}
            actionRef={actionRef}
            pageextra={pathconfig?.enableadd ? 'add' : null}
            resizeable={true}
            addconfig={{
              // access: 'sysDepartment_save',
              btn: {
                disabled: false,
                onClick: () => {
                  setdrawer((s) => ({
                    ...s,
                    open: true,
                    item: null,
                    title: '新增',
                    val: 'add',
                  }));
                },
              },
            }}
            tabList={getcolumns()}
            activeTabKey={activeTabKey}
            onTabChange={(key) => {
              setactiveTabKey(key);
            }}
          />

          <DrawerPro
            fields={columns}
            detailpath={pathconfig?.detail || null}
            detailData={drawer?.item}
            defaultFormValue={drawer?.item}
            params={{ id: drawer?.item?.id }}
            formRef={formRef}
            placement="right"
            onClose={() => {
              setdrawer((s) => ({
                ...s,
                open: false,
              }));
            }}
            {...drawer}
            onFinish={(vals) => {
              if (drawer?.val == 'add') {
                run({ url: pathconfig?.add || '/add', params: { ...vals } });
              } else if (drawer?.val == 'edit') {
                run({ url: pathconfig?.edit || '/edit', params: { ...vals, id: drawer?.item?.id } });
              }
            }}
          />
        </div>
      );
    }

    export default Plan;