import React, { useState, useEffect } from 'react';
import { Drawer, Pagination, List } from 'antd';

import { dispatch } from '../../../../model';
import { showMessage } from '../../../../util';

const WorkbookDrawer = (props) => {
  const { onCancel, visible, report } = props;

  const [ loading, setLoading ] = useState(false);
  const [ workbooks, setWorkbooks ] = useState([]);
  const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
  const { pageNum, pageSize } = pagination;
  const [ total, setTotal ] = useState(0);

  useEffect(() => {

    if (visible) {
      setPagination({ pageNum: 1, pageSize: 20 });
      getWorkbooks();
    }

    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible])

  const getWorkbooks = (p = 1, s = 20) => {
    setLoading(true);


    dispatch({
      type: 'assetmanage.listWorkbooksByType' ,
      payload: {
        pageNum: p,
        pageSize: s,
        type: report?.code,
      },
      callback: data => {
        setLoading(false);
        setTotal(data.total);
        setWorkbooks(data.data||[]);
      },
      error: () => {
        setLoading(false);
      }
    })
  }

  const onDeleteClick = (id) => {
    dispatch({
      type: 'assetmanage.deleteWorkbooks',
      payload: {
        data: [id]
      },
      callback: () => {
        showMessage('success', '删除成功');
        getWorkbooks();
      }
    })
  }

  const onDevelopClick = (id) => {
    dispatch({
      type: 'assetmanage.getViewUrlByWorkbookId',
      payload: {
        workbookId: id,
      },
      callback: data => {
        if (report?.code === 'SpreadJS') {
          window.open(`/data-govern/spreadjs-view?downloadurl=${encodeURIComponent(data??'')}`)
        } else {
          window.open(data||'');
        }
      }
    })
  }

  return (
    <Drawer 
      forceRender
      visible={ visible }
      title={`${report?.name}工作簿`}
      width={900}
      placement="right"
      closable={ true }
      onClose={() => {
        onCancel && onCancel();
      }}
    >
      <List
        itemLayout="horizontal"
        size="small"
        loading={loading}
        dataSource={workbooks}
        renderItem={item => (
          <List.Item
            key={item.id}
            actions={[
              <a key="develop" onClick={() => { onDevelopClick(item.id); }}>报表开发</a>, 
              <a key="delete" onClick={() => { onDeleteClick(item.id); }}>删除</a>
            ]}
          >
            <List.Item.Meta
              title={item.name}
            />
          </List.Item>
        )}
      />
      <Pagination
        className="text-center mt-3"
        showSizeChanger
        showQuickJumper
        onChange={(_pageNum, _pageSize) => {
          setPagination({ pageNum: _pageNum||1, pageSize: _pageSize || 20 });
          getWorkbooks(_pageNum||1, _pageSize||20);
        }}
        onShowSizeChange={(_pageNum, _pageSize) => {
          setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize || 20 });
          getWorkbooks(_pageNum||1, _pageSize||20);
        }}
        current={pageNum}
        pageSize={pageSize}
        defaultCurrent={1}
        total={total}
        pageSizeOptions={[10,20]}
        showTotal={total => `共 ${total} 条`}
      />
    </Drawer>
  )
}

export default WorkbookDrawer;