import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import styles from './index.less';
import { detail } from '@/services/paper';
import { history } from 'umi';
import { Swiper } from 'antd-mobile/es';
import questionCount from '../asset/ic_question_count.png';
import useTime from '../asset/ic_use_time.png';
import { getPageQuery } from '@/utils/utils';

const Detail: React.FC = () => {
  const [paper, setPaper] = useState<API.Paper>();
  const paperId = parseInt(getPageQuery().id + '');
  const secret = getPageQuery().secret;

  if (!paperId) {
    return <>访问异常</>;
  }

  useEffect(() => {
    detail(paperId, secret).then((response) => {
      if (response.code == 200) {
        setPaper(response.data);
      } else if (response.code == 3008) {
        history.push(
          `/paper/login?redirect=${encodeURIComponent(
            window.location.href,
          )}&paperId=${paperId}`,
        );
      } else if (response.code == 4000) {
        history.push('/paper/result?type=noAccess');
      } else if (response.code == 7001) {
        history.push('/paper/result?type=notExist');
      } else if (response.code == 7002) {
        history.push('/paper/result?type=success');
      }
    });
  }, []);

  const getPredictTime = (count: number) => {
    let min = count / 4;
    if (min <= 5) {
      return 5;
    } else if (min > 5 && min <= 10) {
      return 10;
    } else if (min > 10 && min <= 15) {
      return 15;
    } else if (min > 15 && min <= 20) {
      return 20;
    } else if (min > 20 && min <= 25) {
      return 25;
    } else {
      return 30;
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.carousel}>
          <Swiper
            style={{
              '--border-radius': '12px',
            }}
            indicatorProps={{
              style: {
                '--dot-color': '#555555',
                '--active-dot-color': '#FFF',
                '--dot-size': '5px',
                '--active-dot-size': '5px',
                '--dot-border-radius': '50%',
                '--active-dot-border-radius': '50%',
                '--dot-spacing': '8px',
              },
            }}
          >
            <Swiper.Item>
              <img src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/banner/banner1.png" />
            </Swiper.Item>
            {/*<Swiper.Item>*/}
            {/*  <img src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/banner/banner2.png"/>*/}
            {/*</Swiper.Item>*/}
          </Swiper>
        </div>

        <div className={styles.title}>企业信息</div>
        <div className={styles.cardWrap}>
          <div>
            <img src={paper?.institutionLogo} className={styles.logo} />
            <span className={styles.name}> {paper?.institutionName}</span>
          </div>
          <div className={styles.desc}>
            <span>{paper?.institutionDesc} </span>
          </div>
        </div>

        <div className={styles.title}>问卷介绍</div>
        <div className={styles.cardWrap}>
          <div>
            <span className={styles.name}> {paper?.title}</span>
          </div>
          <div className={styles.desc}>
            <span>{paper?.desc} </span>
          </div>

          <div className={styles.divide} />

          <div>
            <img className={styles.icon} src={useTime} />
            <span className={styles.hint}>答题用时:</span>
            <span className={styles.info}>
              {getPredictTime(paper?.questionCount || 0)}分钟
            </span>
          </div>

          <div className={styles.questionCount}>
            <img className={styles.icon} src={questionCount} />
            <span className={styles.hint}>题目总数:</span>
            <span className={styles.info}>{paper?.questionCount}道</span>
          </div>
        </div>

        <Button
          type="primary"
          shape="round"
          size={'large'}
          className={styles.submit}
          onClick={() => {
            if (secret) {
              history.push(
                `/paper/mobile/question?id=${paperId}&secret=${secret}`,
              );
            } else {
              history.push(`/paper/mobile/question?id=${paperId}`);
            }
          }}
        >
          开始答题
        </Button>
      </div>
    </div>
  );
};

export default Detail;
