import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Tabs, Table, Button, Space } from 'antd';
import { useIntl, Link, history } from 'umi';
import './index.less';
import IconFont from '@/components/IconFont/IconFont';
import LinkComponent from './Link';
import Search from '../announce/Search';
import type { SearchFormData } from '../announce/Search';
const IndexPage: React.FC = () => {
  const intl = useIntl();
  const [noticeLoading, setNoticeLoading] = useState(false);
  const [noticeList, setNoticeList] = useState([
    {
      title: 'CA使用通知',
      id: '1',
      content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
      time: '2022-05-27',
    },
    {
      title: '5月27日系统优化升级通知',
      id: '2',
      content:
        '系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
      time: '2022-05-27',
    },
  ]);
  const typeList = [
    {
      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 = (item: any) => {
    console.log(item);
  };
  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: '3',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '4',
      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>,
    },
  ];

  const toSystem = (type: string) => {
    console.log(type);
    history.push({
      pathname: '/login',
      query: {
        type: type,
      },
    });
  };

  const toRegister = (type: string) => {
    history.push({
      pathname: '/register/supplier',
      query: {
        type: type,
      },
    });
    console.log(type);
  };

  const [searchFormData, setSearchFormData] = useState<SearchFormData>({
    searchKeyword: '',
    announceType: '全部',
    projectUnit: '',
    projectLocation: '中国',
    publishTime: '不限',
    projectType: '全部',
    currentProvince: '全部',
  });
  const handleFormChange = (formData: SearchFormData) => {
    setSearchFormData(formData);
  };
  const handleSearch = (formData: SearchFormData) => {
    console.log(formData);
  };

  return (
    <div>
      <img className="banner" src={require('@/assets/img/banner.jpg')} alt="" />
      {/* 通知列表 */}
      <div className="noticeList layout-content-main">
        <div className="noticeName">通知公告</div>
        {noticeList.map((item) => (
          <div className="noticeItem" key={item.id}>
            <div className="cardTitle">
              <span
                className="cardTitleText"
                onClick={() => {
                  history.push({
                    pathname: '/announce/announceInfo',
                    search: '?id=' + item.id,
                  });
                }}
              >
                {item.title}
              </span>
              <span className="cardTitleTime">{item.time}</span>
            </div>
            <p className="cardContent">{item.content}</p>
          </div>
        ))}
      </div>
      <div className="loginType">
        <div className="layout-content-main">
          <Row gutter={20}>
            <Col span={8}>
              <div className="loginTypeItem">
                <img src={require('@/assets/img/loginType1.png')} alt="" />
                <div className="loginTypeItemTitle">供应商入口</div>
                <div className="loginTypeItemContent">
                  供应商注册、投标、合同管理、结算等全流程服务
                </div>
                <div className="btns">
                  <Button type="primary" onClick={() => toSystem('supplier')}>
                    立即进入
                  </Button>
                  <Button type="primary" ghost onClick={() => toRegister('supplier')}>
                    立即注册
                  </Button>
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className="loginTypeItem">
                <img src={require('@/assets/img/loginType2.png')} alt="" />
                <div className="loginTypeItemTitle">采购专家入口</div>
                <div className="loginTypeItemContent">
                  采购需求发布、评审、合同签订、供应商管理等服务
                </div>
                <div className="btns">
                  <Button type="primary" ghost onClick={() => toSystem('expert')}>
                    立即进入
                  </Button>
                  <Button type="primary" ghost onClick={() => toRegister('expert')}>
                    立即注册
                  </Button>
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className="loginTypeItem">
                <img src={require('@/assets/img/loginType3.png')} alt="" />
                <div className="loginTypeItemTitle">招标代理入口</div>
                <div className="loginTypeItemContent">
                  招标文件编制、公告发布、开标评标等专业服务
                </div>
                <div className="btns">
                  <Button type="primary" ghost onClick={() => toSystem('agent')}>
                    立即进入
                  </Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>
      <div className="layout-content-main announce">
        <Row gutter={40}>
          <Col span={5}>
            <div className="types bg">
              <div className="announceTitle">采购类型</div>
              {typeList.map((item) => (
                <div
                  className={`typeItem ${item.key === '1' ? 'active' : ''}`}
                  key={item.key}
                  onClick={() => {
                    tabChange(item);
                  }}
                >
                  {item.label}
                </div>
              ))}
            </div>
          </Col>
          <Col span={19}>
            <div className="search bg">
              <Search
                isShowAnnounceType={false}
                isShowSearch={false}
                isShowProjectUnit={false}
                initialValues={searchFormData}
                onChange={handleFormChange}
                onSearch={handleSearch}
              />
              <Table
                loading={tableLoading}
                dataSource={dataSource}
                columns={columns}
                pagination={{
                  pageSize: 10,
                  total: 100,
                }}
              />
            </div>
          </Col>
        </Row>
      </div>
      <div className="about">
        <div className="layout-content-main">
          <Row gutter={40}>
            <Col span={16}>
              <div className="blockTitle">问题咨询</div>
              <div className="borderBox">
                <img src={require('@/assets/img/location.png')} 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>
              </div>
            </Col>
            <Col span={8} className="caBox">
              <div>
                <div className="blockTitle">CA服务</div>
                <Row className="caRow">
                  <Col span={6} offset={6} className="caItem">
                    <img src={require('@/assets/img/ca1.png')} alt="" />
                    <span>CA办理</span>
                  </Col>
                  <Col span={6} className="caItem">
                    <img src={require('@/assets/img/ca2.png')} alt="" />
                    <span>CA客服</span>
                  </Col>
                </Row>
              </div>

              <div className="contactBox">
                <div className="blockTitle mt20">联系方式</div>
                <div className="contact">
                  <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>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>

      <div className="firendLink">
        <div className="layout-content-main">
          <div className="linkTitle">友情链接</div>
          <Card>
            {Array.from({ length: 12 }).map((item, index) => (
              <Card.Grid key={index} style={{ width: '16.6667%', height: '130px' }}>
                <img src={require('@/assets/img/banner.jpg')} alt="" />
              </Card.Grid>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
};

export default IndexPage;