import photo from '@/assets/profile.png';
import { useNavigate } from '@@/exports';
import {
  CaretDownOutlined,
  CaretUpOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import { useIntl, useModel } from '@umijs/max';
import { Col, Progress, Row, Space, Tag, Timeline } from 'antd';
import React, { useEffect, useState } from 'react';
import './style.less';

const Welcome: React.FC = () => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');
  const navigate = useNavigate();
  const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
  const twoColors = { '0%': '#E6F4FF', '50%': '#108ee9', '100%': '#87d068' };
  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
  const [routeData, setRouteData] = useState([]);

  const systemData = () => {
    const newData = initialState?.menuData;
    // console.log('initialState2', initialState);
    const data: any = newData?.filter((item: any) => item.access === 'system');
    setRouteData(data ? data[0]?.routes : []);
  };

  useEffect(() => {
    systemData();
    const handleResize = () => {
      setScreenWidth(window.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  useEffect(() => {
    systemData();
  }, [initialState?.menuData]);

  const tagColor = ['blue', 'geekblue', 'purple', 'cyan', 'gold', 'green'];

  const color = (key: string) => {
    switch (key) {
      case 'operate':
        return '#87d068';
      case 'dictionaries':
        return '#B7C52C';
      case 'menu':
        return '#f50';
      case 'userManage':
        return '#108ee9';
      case 'userOrganization':
        return '#ADD5A2';
      case 'companyManage':
        return '#E5A9DE';
      case 'tenantManage':
        return '#52BDBB';
      case 'roles':
        return '#2db7f5';
      default:
        return '#389E0D';
    }
  };

  return (
    <div className="homepage">
      {/* 头部 */}
      <div className="head-mes">
        <div className="left">
          <img
            src={initialState?.currentUser?.avatar || photo}
            alt=""
            className="img-photo"
          />
          <div>
            <div className="name-mes">
              {initialState?.currentUser?.nickname},
              {intl.formatMessage({ id: 'home.text.welcome' })}
            </div>
            <span className="span">
              {intl.formatMessage({ id: 'home.text.havePermission' })}：
            </span>
            <Space size={[0, 8]} wrap>
              {Object.keys(initialState?.accessInfo || {}).map(
                (item: any, index) => {
                  if (index < 6) {
                    return (
                      <Tag color={tagColor[index]} key={item}>
                        {item}
                      </Tag>
                    );
                  }
                  return null;
                },
              )}
              <Tag color="lime">...</Tag>
            </Space>
          </div>
        </div>

        <div className="right">
          <div className="titles">
            {intl.formatMessage({ id: 'home.text.onlineNumber' })}
          </div>
          <div className="number">21</div>
        </div>
      </div>
      {/* 卡片 */}
      <Row gutter={16}>
        <Col span={6}>
          <div className="statistics">
            <div className="titles">
              {intl.formatMessage({ id: 'home.label.numberOfUsers' })}
              <InfoCircleOutlined />
            </div>
            <div className="number">126,560</div>
            <div className="ratio">
              <div>
                {intl.formatMessage({ id: 'home.text.weekly' })} 12%
                <CaretDownOutlined style={{ color: '#52c41a', fontSize: 10 }} />
              </div>
              <div>
                {intl.formatMessage({ id: 'home.text.daily' })} 11%
                <CaretUpOutlined style={{ color: '#f5222d', fontSize: 10 }} />
              </div>
            </div>
          </div>
        </Col>

        <Col span={6}>
          <div className="statistics">
            <div className="titles">
              {intl.formatMessage({ id: 'home.label.pageView' })}
              <InfoCircleOutlined />
            </div>
            <div className="number">8,846</div>
            <div className="ratio">
              <div>
                {intl.formatMessage({ id: 'home.text.weekly' })} 15%
                <CaretUpOutlined style={{ color: '#f5222d', fontSize: 10 }} />
              </div>
              <div>
                {intl.formatMessage({ id: 'home.text.daily' })} 13%
                <CaretDownOutlined style={{ color: '#52c41a', fontSize: 10 }} />
              </div>
            </div>
          </div>
        </Col>
        <Col span={6}>
          <div className="statistics">
            <div className="titles">
              {intl.formatMessage({ id: 'home.label.dailyActiveUsers' })}
              <InfoCircleOutlined />
            </div>
            <div className="number">6,560</div>
            <div className="ratio">
              <div>
                {intl.formatMessage({ id: 'home.text.weekly' })} 10%
                <CaretDownOutlined style={{ color: '#52c41a', fontSize: 10 }} />
              </div>
              <div>
                {intl.formatMessage({ id: 'home.text.daily' })} 12%
                <CaretUpOutlined style={{ color: '#f5222d', fontSize: 10 }} />
              </div>
            </div>
          </div>
        </Col>
        <Col span={6}>
          <div className="statistics">
            <div className="titles">
              {intl.formatMessage({ id: 'home.label.liveness' })}
              <InfoCircleOutlined />
            </div>
            <div className="number">78%</div>
            <div className="ratio">
              <div>
                {intl.formatMessage({ id: 'home.text.weekly' })} 9%
                <CaretUpOutlined style={{ color: '#f5222d', fontSize: 10 }} />
              </div>
              <div>
                {intl.formatMessage({ id: 'home.text.daily' })} 1%
                <CaretDownOutlined style={{ color: '#52c41a', fontSize: 10 }} />
              </div>
            </div>
          </div>
        </Col>
      </Row>

      {/* 底部 */}
      <div className="home-bottom">
        <div className="left-statistics">
          <div className="proportion">
            <p> {intl.formatMessage({ id: 'home.label.proportion' })}</p>
            <div className="progress">
              <Progress
                type="circle"
                percent={65}
                strokeColor={conicColors}
                size={
                  screenWidth > 1600
                    ? 280
                    : screenWidth > 1500
                    ? 230
                    : screenWidth > 1200
                    ? 200
                    : 150
                }
              />
            </div>
          </div>
          <div className="residue">
            <p> {intl.formatMessage({ id: 'home.label.totalTaskProgress' })}</p>
            <div className="progress">
              <Progress
                type="circle"
                percent={72}
                strokeColor={twoColors}
                size={
                  screenWidth > 1600
                    ? 280
                    : screenWidth > 1500
                    ? 230
                    : screenWidth > 1200
                    ? 200
                    : 150
                }
              />
            </div>
          </div>
        </div>

        <div className="right-statistics">
          <div className="navigation">
            <div className="title-begin">
              {intl.formatMessage({ id: 'home.label.quickStart' })}
            </div>
            <div className="navigation-btn">
              <Space size={[0, 8]} wrap>
                <Tag color="#DAC321" onClick={() => navigate('/welcome')}>
                  Dashboard
                </Tag>
                {routeData?.map((item: any) => {
                  return (
                    <Tag
                      color={color(item.access)}
                      onClick={() => navigate(item.path)}
                      key={item.access}
                    >
                      {item.name}
                    </Tag>
                  );
                })}
              </Space>
            </div>
          </div>

          <div className="login-mes">
            <div className="title-begin">
              {intl.formatMessage({ id: 'home.label.logInTime' })}
            </div>
            <div className="time-line">
              <Timeline
                items={[
                  {
                    children: `${intl.formatMessage({
                      id: 'home.text.logInTimeIs',
                    })} 2023-09-21 12:12:26`,
                  },
                  {
                    children: `${intl.formatMessage({
                      id: 'home.text.logInTimeIs',
                    })} 2015-09-20 12:12:26`,
                  },
                  {
                    children: `${intl.formatMessage({
                      id: 'home.text.logInTimeIs',
                    })} 2015-09-19 12:12:26`,
                  },
                  {
                    children: `${intl.formatMessage({
                      id: 'home.text.logInTimeIs',
                    })} 2015-09-18 12:12:26`,
                  },
                  {
                    children: `${intl.formatMessage({
                      id: 'home.text.logInTimeIs',
                    })} 2015-09-17 12:12:26`,
                  },
                ]}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Welcome;