import React, { useEffect, useState, useContext, useMemo } from 'react';
import { Spin, Tooltip, Typography, Pagination, Table } from 'antd';

import { AppContext } from '../../../../App';
import { dispatch } from '../../../../model';
import { paginate } from '../../../../util';

const FC = (props) => {
  const app = useContext(AppContext);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
  const {pageNum, pageSize} = pagination;

  const cols = [
    {
      title: '序号',
      dataIndex: 'key',
      render: (text, record, index) => {
        return (index+1).toString();
      },
      width: 60,
      ellipsis: true,
    },
    {
      title: '数据服务资产编码',
      dataIndex: 'code',
      ellipsis: true,
      render: (_, record) => record.basicInfo?.code
    },
    {
      title: '数据服务名称',
      dataIndex: 'name',
      ellipsis: true,
      render: (_, record) => record.basicInfo?.name
    },
    {
      title: 'URI',
      dataIndex: 'odata',
      ellipsis: true,
      render: (text, _, __) => {
        return (
          <React.Fragment>
          {
            text ? <div className='flex'> 
              <Tooltip title={text||''} overlayClassName='tooltip-common'>
                <Typography.Text ellipsis={true}>
                {text||''}
                </Typography.Text>
              </Tooltip>
              <Typography.Text copyable={{ text }}></Typography.Text>
            </div> : ''
          }
          </React.Fragment>
        );
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 80,
      fixed: 'right',
      render: (_, record) => {
        return (
          <a onClick={() => {
            app.openDetail?.({ service: record })
          }}>详情</a>
        )
      }
    }
  ];

  useEffect(() => {
    getServices();
  }, [])

  const tableData = useMemo(() => {
    if (data) {
      return paginate(data, pagination.pageNum, pagination.pageSize);
    }

    return [];
  }, [data, pagination])

  const getServices = () => {
    setLoading(true);
    dispatch({
      type: 'pds.getGrantedServices',
      payload: {
        namespace: `${app?.env?.domainId}`
      },
      callback: data => {
        setLoading(false);
        setData(data);
      },
      error: () => {
        setLoading(false);
      }
    });
  }

  return (
    <div>
      <Table 
        extraColWidth={10}
        loading={loading}
        columns={cols||[]}
        dataSource={tableData}
        pagination={false}
        scroll={{y: (tableData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)'}}
      />
      <Pagination
        className="text-center mt-3"
        showSizeChanger
        showQuickJumper
        onChange={(_pageNum, _pageSize) => {
          setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
        }}
        onShowSizeChange={(_pageNum, _pageSize) => {
          setPagination({ pageNum: 1, pageSize: _pageSize });
        }}
        current={pageNum}
        pageSize={pageSize}
        defaultCurrent={1}
        total={(data||[]).length}
        pageSizeOptions={[10,20,50,100]}
        showTotal={total => `共 ${total} 条`}
      />
    </div>
  )
}

export default FC