import React, { useState, useEffect } from 'react';
import { Input, Space, Tabs } from 'antd';
import AutoTable from '@/components/AutoTable';
import { DownloadOutlined } from '@ant-design/icons';
import { history } from 'umi';

function Tables({ extraparams }) {
  return (
    <AutoTable
      path="/fileCenter/getFileCenterPage"
      extraparams={{ ...extraparams }}
      resizeable={false}
      columns={[
        {
          title: '文件名称',
          dataIndex: 'fileName',
          key: 'fileName',
        },
        {
          title: '文件分类',
          dataIndex: 'typeName',
          key: 'typeName',
          search: false,
        },
        {
          title: '语言',
          dataIndex: 'languageName',
          key: 'languageName',
          search: false,
        },
        {
          title: '下载',
          dataIndex: 'fileList',
          key: 'fileList',
          search: false,
          render: (dom, row) => {
            return (
              <a href={row?.fileList[0]?.url} download={row?.fileList[0]?.name}>
                <DownloadOutlined style={{ fontSize: '0.8rem' }} />
              </a>
            );
          },
        },
      ]}
    />
  );
}

function Download({ location: { query } }) {
  const [fileType, setfileType] = useState(query.key);

  const items = [
    {
      label: '硬件产品资料',
      key: '1',
      children: (
        <Tables
          extraparams={{
            fileType,
          }}
        />
      ),
    },
    {
      label: '软件产品资料',
      key: '2',
      children: (
        <Tables
          extraparams={{
            fileType,
          }}
        />
      ),
    },
    {
      label: '宣传画册及其他',
      key: '3',
      children: (
        <Tables
          extraparams={{
            fileType,
          }}
        />
      ),
    },
  ];

  useEffect(() => {
    setfileType(query.key);
  }, [query]);

  return (
    <div id="mesContainer">
      <div style={{ position: 'relative' }}>
        <img
          src={require('@/assets/fac9.jpg')}
          alt=""
          style={{ width: '100%' }}
        />
        <div
          className="diyinput"
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            margin: 'auto',
            width: '20vw',
            height: '3rem',
            minWidth: 320,
          }}
        >
          下载中心
        </div>
      </div>
      <div className="section">
        <Tabs
          activeKey={fileType}
          onChange={(val) => {
            history.push({
              pathname: '/download',
              query: {
                key: val,
              },
            });
            setfileType(val);
          }}
          items={items}
        />
      </div>
    </div>
  );
}

export default Download;