/* 设备台账
 * @Author: Li Hanlin
 * @Date: 2022-11-10 09:39:56
 * @Last Modified by: Li Hanlin
 * @Last Modified time: 2022-11-15 13:29:58
 */

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 TreeRender from '@/components/TreeRender';
import { Layout } from 'antd';

const { Sider, Content } = Layout;
function Account(props) {
  const actionRef = useRef(),
    formRef = useRef();
  const [drawer, setdrawer] = useState({
    visible: false,
  });

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

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

  const remove = (text, row, _, action) => {
    return (
      <PremButton
        pop={{
          title: '是否删除该用户?',
          okText: '确认',
          cancelText: '取消',
          onConfirm: () => {
            alert(0);
          },
        }}
        btn={{
          size: 'small',
          type: 'danger',
        }}
      >
        删除
      </PremButton>
    );
  };

  const columns = useMemo(() => {
    let defcolumn = getcolumns(setdrawer);
    return defcolumn.concat({
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (text, row, _, action) => [
        detail(text, row, _, action),
        edit(text, row, _, action),
        remove(text, row, _, action),
      ],
    });
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <div className="ant-card-head">
        <div className="ant-card-head-wrapper">
          <div className="ant-card-head-title">
            <h3 className="page-title">设备台账</h3>
          </div>
        </div>
      </div>
      <Layout style={{ height: '100%' }}>
        <Sider theme="light" width={300}>
          <TreeRender />
        </Sider>
        <Content>
          <AutoTable
            pagetitle={<h3 style={{ marginBottom: 0, fontWeight: 400 }}>设备台账</h3>}
            columns={columns}
            path="/ngic-auth/sysUser/query/page"
            actionRef={actionRef}
            pageextra={'add'}
            resizeable={true}
            addconfig={{
              // access: 'sysDepartment_save',
              btn: {
                disabled: false,
                type: 'primary',
                onClick: () => {
                  setdrawer((s) => ({
                    ...s,
                    visible: true,
                    item: null,
                    title: '新增',
                    val: 'add',
                  }));
                },
              },
            }}
          />
        </Content>
      </Layout>
      <DrawerPro
        fields={columns}
        detailpath="/ngic-auth/sysUser/query/detail"
        params={{ id: drawer?.item?.id }}
        formRef={formRef}
        placement="right"
        onClose={() => {
          setdrawer((s) => ({
            ...s,
            visible: false,
          }));
        }}
        {...drawer}
      />
    </div>
  );
}

export default Account;