import React, { memo, useState, useEffect } from 'react';
import { Collapse, Button } from 'antd';
import moment from 'moment';
import Line from '../Line';
import { getTaskCategory, getTaskList } from '../../military/task/api';
import { taskModeIdArr } from '../../military/task/static';

import './index.scss';
const { Panel } = Collapse;

const taskModeNameArr = [];
for (const item of taskModeIdArr) {
  taskModeNameArr[item.dicItemCode] = item.dicItemName;
}


let taskArrMock = [
  {
    id: 447,
    name: "研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。",
    taskModeId: 1,  //悬赏模式
    bounty: 1.0,    //赏金
    description: "<p>统筹管理员能看到不？</p>",   //详情
    createdAt: "2021-11-10 17:42:38",       //创建时间
    publishedAt: "2021-11-10 17:43:41",   //发布时间
    collectingDays: 30,  //成果提交天数
  },
  {
    id: 448,
    name: "研发配置要求验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。",
    taskModeId: 2,  //悬赏模式
    bounty: 100.0,    //赏金
    description: "<p>统筹管理员能看到不？</p>",   //详情
    createdAt: "2021-11-10 17:42:38",
    publishedAt: "2021-11-11 17:43:41",
    collectingDays: 30,
  },
  {
    id: 449,
    name: "研发配置要求为包含网络",
    taskModeId: 3,  //悬赏模式
    bounty: 10000.0,    //赏金
    description: "<p>统筹管理员能看到不？</p>",   //详情
    createdAt: "2021-11-10 17:42:38",
    publishedAt: "2021-11-12 17:43:41",
    collectingDays: 30,
  }
]

function getSomeDayAfter(initailDate, nDay) {
  return moment(new Date(initailDate).setDate(new Date(initailDate).getDate() + nDay)).format('YYYY-MM-DD');
}

function FifthSection({ fifth, history }) {

  const [taskCategoryArr, setTaskCategoryArr] = useState([]);
  const [taskArr, serTaskArr] = useState(taskArrMock);

  useEffect(() => {
    const params = {
      curPage: 1,
      pageSize: 3,
      orderBy: 'visitsDesc',
      isDelete: '0',
      recommend: '1',
    };
    getTaskList(params).then(data => {
      if (data) {
        serTaskArr(data.rows);
      }
    })
  }, []);


  // 获取分类数据
  useEffect(() => {
    getTaskCategory().then(data => {
      if (data) {
        for (const item of data) {
          switch (item.name) {
            case "军事理论":
              item.icon = "junshililun1";
              break;
            case "政策法规":
              item.icon = "zhengcefagui1";
              break;
            case "医学":
              item.icon = "yixue1";
              break;
            case "电子":
              item.icon = "dianzi1";
              break;
            case "通信":
              item.icon = "tongxin1";
              break;
            case "计算机科学":
              item.icon = "jisuanji1";
              item.name = "计算机";
              break;
            case "软件工程":
              item.icon = "ruanjiangongcheng1";
              break;
            case "人工智能":
              item.icon = "rengongzhineng";
              break;
            case "知识图谱":
              item.icon = "zhishitupu";
              break;
            case "大数据":
              item.icon = "dashuju";
              break;
            default:
              item.icon = "dianzi1";
          }
        }
        setTaskCategoryArr(data.slice(0, 10));
      }
    });
  }, []);

  function goTask(item) {
    history.push(`/task?type=${item.id}`)
    // console.log(item);
  }


  return (
    <React.Fragment>
      <div className={`homepage-main fifth-main clearfix ${fifth ? 'active' : ''}`}>
        <div className="circle-wave">
          <ul className="icon-circle">
            {
              taskCategoryArr.map((item, i) => {
                return (<li key={item.id} onClick={() => { goTask(item) }}>
                  <i className={`iconfont icon-${item.icon}`}></i>
                  <span>{item.name}</span>
                </li>)
              })
            }
          </ul>

          <div className="circleBox">
            <div className="circle1"></div>
            <div className="circle2"></div>
            <div className="circle3"></div>
            <div className="circle4"></div>
            <div className="circle5">
              <div className="circle-center">
                创客空间
              </div>
            </div>
          </div>

        </div>

        <div className="task-main">
          <h2 className="homePage-blue-tit">创客空间</h2>
          <h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
          <Line />
          <Collapse
            accordion
            defaultActiveKey={['1']}
            expandIconPosition="right"
          >
            {
              taskArr.map((item, i) => {
                return (
                  <Panel header={item.name} key={i + 1 + ''}>
                    <p className="collapse-des ellipsis-2" dangerouslySetInnerHTML={{ __html: item.description }}></p>
                    <div className="collapse-content">
                      <p className="collapse-content-item">
                        <i className="iconfont icon-quxiaoguanzhu"></i>
                        <span >{taskModeNameArr[item.taskModeId]}</span>
                        <span className="collapse-content-money">¥ {item.bounty}</span>
                      </p>

                      <p className="collapse-content-item">
                        <i className="iconfont icon-quxiaoguanzhu"></i>
                        <span >发布时间</span>
                        <span className="collapse-content-time">{moment(item.publishedAt || item.createdAt).format('YYYY-MM-DD')}</span>
                      </p>

                      <p className="collapse-content-item">
                        <i className="iconfont icon-quxiaoguanzhu"></i>
                        <span >截止时间</span>
                        <span className="collapse-content-time">{getSomeDayAfter(item.publishedAt || item.createdAt, item.collectingDays)}</span>
                        <Button className="collapse-detail" onClick={() => { history.push(`/task/taskDetail/${item.id}`) }}>详情</Button>
                      </p>
                    </div>
                  </Panel>
                )
              })
            }

          </Collapse>
        </div>

      </div>

      <div className="text-center">
        <Button className="homepage-btn " type="primary" onClick={() => { history.push('/task') }}>寻找创客 <i className="iconfont icon-gengduoicon"></i></Button>
      </div>

      <svg className="waves waves-low "
        viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
        <defs>
          <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>

        <g className="parallax">
          {/* <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(4,22,112,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(4,22,112,0.3)" />
          <use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" /> */}

          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" />
        </g>
      </svg>
    </React.Fragment>
  )
}

export default memo(FifthSection);