import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Tabs, Table } from 'antd';
import { useIntl, Link } from 'umi';
import './index.less';
import IconFont from '@/components/IconFont/IconFont';
import LinkComponent from './Link';
import { getCoscoPortalsLinksClassification } from '@/servers/api';
const IndexPage: React.FC = () => {
  const intl = useIntl();
  const [noticeLoading, setNoticeLoading] = useState(false);
  const [links, setLinks] = useState<API.CoscoPortalsLinksClassification>([]);
  const [noticeList, setNoticeList] = useState([
    {
      title: 'CA使用通知',
      id: '1',
      content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
    },
    {
      title: '5月27日系统优化升级通知',
      id: '2',
      content:
        '系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
    },
    {
      title: '测试标题123123',
      id: '3',
      content: '测试内容124145',
    },
    {
      title: '测试标题45435',
      id: '4',
      content: '测试内容6666',
    },
  ]);
  const tabList = [
    {
      key: '1',
      label: intl.formatMessage({ id: '采购需求公示' }),
    },
    {
      key: '2',
      label: intl.formatMessage({ id: '招标采购公告' }),
    },
    {
      key: '3',
      label: intl.formatMessage({ id: '非招标采购公告' }),
    },
    {
      key: '4',
      label: intl.formatMessage({ id: '资格预审公告' }),
    },
    {
      key: '5',
      label: intl.formatMessage({ id: '招募公告' }),
    },
    {
      key: '6',
      label: intl.formatMessage({ id: '变更公告' }),
    },
    {
      key: '7',
      label: intl.formatMessage({ id: '中标(中选)候选人公示' }),
    },
    {
      key: '8',
      label: intl.formatMessage({ id: '中标(中选)结果公示' }),
    },
    {
      key: '9',
      label: intl.formatMessage({ id: '采购失败(流标)公告' }),
    },
  ];
  //tab 切换事件
  const tabChange = (key: string) => {
    console.log(key);
  };
  const [tableLoading, setTableLoading] = useState(false);
  const dataSource = [
    {
      key: '1',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
  ];

  const columns = [
    {
      title: '项目所在地',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '公告标题',
      dataIndex: 'title',
      key: 'title',
      render: (text: string, record) => (
        <Link
          to={{
            pathname: '/announce/announceInfo',
            search: '?id=' + record.id,
          }}
        >
          {text}
        </Link>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '文件购买截止时间',
      dataIndex: 'lastDate',
      key: 'lastDate',
      render: (text: string) => <span className="lastDate">{text}</span>,
    },
  ];

  useEffect(() => {
    getCoscoPortalsLinksClassification().then((res) => {
      setLinks(res.data);
      console.log(res.data);
    });
  }, []);

  return (
    <div>
      {/* 通知列表 */}
      <Row gutter={20}>
        {noticeList.map((item) => (
          <Col span={6} key={item.id}>
            <Card
              title={item.title}
              loading={noticeLoading}
              hoverable
              className="card"
              bodyStyle={{ padding: 10 }}
              extra={
                <Link
                  to={{
                    pathname: '/notice/noticeInfo',
                    search: '?id=' + item.id,
                  }}
                >
                  {intl.formatMessage({ id: '查看' })}
                </Link>
              }
            >
              <p className="cardContent">{item.content}</p>
            </Card>
          </Col>
        ))}
      </Row>
      <div style={{ backgroundColor: '#fff', marginTop: '20px', padding: '20px' }}>
        <Tabs onChange={tabChange}>
          {tabList.map((item) => (
            <Tabs.TabPane tab={item.label} key={item.key} />
          ))}
        </Tabs>

        <Table
          loading={tableLoading}
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />

        <div className="tableLoadMore">
          <Link
            to={{
              pathname: '/announce',
            }}
          >
            {intl.formatMessage({ id: '加载更多' })}
          </Link>
        </div>

        <Row style={{ marginTop: '20px' }}>
          <Col span={12}>
            <div className="blockTitle">紧急问题咨询</div>
            <img src="" alt="" />
            <div className="questionItem">
              <IconFont type="icon-dizhi" className="icon" />
              北京市前门大街173号
            </div>
            <div className="questionItem">
              <IconFont type="icon-dianhua" className="icon" />
              17676373746
            </div>
            <div className="questionItem">
              <IconFont type="icon-youxiang" className="icon" />
              i723648723@383.com
            </div>
          </Col>
          <Col span={12}>
            <div className="blockTitle">CA服务</div>
            <Row>
              <Col span={6} offset={6}>
                <span>CA办理</span>
              </Col>
              <Col span={6}>
                <span>CA客服</span>
              </Col>
            </Row>

            <div className="blockTitle">联系方式</div>
            <p style={{ marginTop: 20 }}>客服1: 400-300-9989</p>
            <p>客服1: 400-300-9989</p>
            <p>客服1: 400-300-9989</p>
            <p>客服1: 400-300-9989</p>
          </Col>
        </Row>
      </div>

      <div>
        <LinkComponent links={links} />
      </div>
    </div>
  );
};

export default IndexPage;
