import React, { useState, useMemo } from 'react';
import { Divider } from 'antd';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';

export default () => {
  const [activeTabKey, onTabChange] = useState('0');
  //配置式table
  const columns = useMemo(() => {
    return [
      {
        title: '用户名',
        dataIndex: 'accountName',
        key: 'accountName',
        search: false,
      },
      {
        title: '姓名',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '组织',
        dataIndex: 'departmentName',
        key: 'departmentName',
      },
      {
        title: '工厂',
        dataIndex: 'factoryName',
        key: 'factoryName',
      },
      {
        title: '负责仓库',
        dataIndex: 'chargeStoreName',
        key: 'chargeStoreName',
      },
      {
        title: '角色',
        dataIndex: 'roleName',
        key: 'roleName',
      },
      {
        title: '联系电话',
        dataIndex: 'telephone',
        key: 'telephone',
      },
      {
        title: '操作',
        valueType: 'option',
        width: 150,
        render: (text, row, _, action) => [
          edit(text, row, _, action),
          remove(text, row, _, action),
        ],
      },
    ];
  }, []);

  const edit = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          onClick: () => { },
        }}
      >
        编辑
      </PremButton>
    );
  };

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

  const tableprops = {
    pagetitle: '左001号',
    addconfig: {
      access: 'sysDepartment_save',
      btn: {
        disabled: true,
        onClick: () => {
          alert(0);
        },
      },
    },
    exportconfig: {
      access: 'havePrem',
      btn: {
        disabled: false,
        onClick: () => {
          alert(1);
        },
      },
    },
    pageextra: activeTabKey == '0' ? 'none' : activeTabKey == '1' ? 'add' : 'export',
    tabList: [
      {
        tab: '全部',
        key: '0',
      },
      {
        tab: '未完成',
        key: '1',
      },
      {
        tab: '已完成',
        key: '2',
      },
    ],
    activeTabKey,
    onTabChange,
    columns,
    path: '/ngic-auth/sysUser/query/page',
    resizeable: false
  };

  return (
    <div>
      <h3>配置式按钮</h3>
      <AutoTable {...tableprops} />
      <h3 style={{ margin: '12px 0' }}>自定义按钮</h3>

      <AutoTable
        pagetitle={'左玲玲'}
        pageextra={
          <PremButton
            btn={{
              key: 'add',
              disabled: false,
              type: 'primary',
              onClick: () => {
                alert(1);
              },
            }}
            access="havePrem"
          >
            炸了哦
          </PremButton>
        }
        columns={columns}
        path="/ngic-auth/sysUser/query/page"
      />
    </div>
  );
};
