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,getFetch } from '@/utils/doFetch';
import { ExportOutlined, ImportOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { Modal, message } from 'antd';


function Port(props) {
  
  const actionRef = useRef(),
    formRef = useRef(),
    formRefs = useRef();
  const [drawer, setdrawer] = useState({
    open: false,
  });
  const [selectedRowKeys, onChange] = useState([]);

  const pathconfig = useMemo(() => {
    let pathconf = getcolumns(setdrawer)?.pathconfig ?? {};
    return pathconf;
  }, []);
  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: 'text',
          onClick: () => {
            setdrawer((s) => ({
              ...s,
              open: true,
              item: row,
              title: '详情',
              val: 'detail',
              title: '详细信息',
            }));
          },
        }}
      >
        详情
      </PremButton>
    );
  };

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

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

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


  return (
    <div style={{ position: 'relative', height: "100%",overflowX:"hidden" }}>
      <AutoTable
        pagetitle="报单"
        columns={columns}
        actionRef={actionRef}
        formRef = {formRefs}
        path={pathconfig?.list || '/ngic-auth/sysUser/query/page'}
        pageextra={'add,import,export'}
        resizeable={true}
        rowSelection={{
          selectedRowKeys,
          onChange
        }}
        tableAlertOptionRender={() => {
          return (
            <div size={16}>
              <a style={{color:"#ff4800"}} onClick={()=>{
                 Modal.confirm({
                  title:"是否批量删除？",
                  content:"删了就没了",
                  onOk:()=>{
                    doFetch({url:"/webtool/v1/storemutipledestroy",params:{ids:selectedRowKeys}}).then(res=>{
                      if(res?.code === 0){
                        message.success("删除成功！");
                        actionRef?.current?.reload();
                        onChange([]);
                      }
                    })
                  }
                 }) 


              }}>批量删除</a>
            </div>
          );
        }}
        addconfig={{
          // access: 'sysDepartment_save',
          btn: {
            disabled: false,
            onClick: () => {
              setdrawer((s) => ({
                ...s,
                open: true,
                item: null,
                title: '新增',
                val: 'add',
              }));
            },
          },
        }}
        importconfig={{
          btn: {
            disabled: false,
            type:"primary",
            icon: <ImportOutlined />,
            onClick: () => {
              setdrawer((s) => ({
                ...s,
                open: true,
                item: null,
                title: '导入',
                val: 'import',
                importurl:'/webtool/v1/storebulkCreate',
                refresh:() => {
                  actionRef?.current?.reload();
                }
              }));
            },
          },
        }}
        exportconfig={{
          btn: {
            disabled: false,
            type:"primary",
            icon: <ExportOutlined />,
            ghost:true,
            onClick: () => {
              let search = formRefs?.current?.getFieldsValue();
          
              if(search?.date){
                search.date = search.date?.map(it=>dayjs(it).format("YYYY-MM-DD")).toString();
              }

              getFetch({
                url: '/webtool/v1/storeexport',
                params: {
                  ...search,
                  filename: `报单${dayjs().format("YYYY-MM-DD HH:mm:ss")}`,
                },
              });
            },
          },
        }}

      />

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

export default Port;