import React, { useState } from 'react';
import {Link, useLocation, useNavigate} from 'react-router-dom';
import * as EgovNet from 'api/egovFetch';
import URL from "constants/url";

import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";


function Poll(){
    const navigate = useNavigate();

    const goToDetail = (id, isClosed) => {
        if (isClosed) {
            alert('마감된 설문조사입니다.');
        } else {
            // 로그인 한경우만 참여 가능하게
            navigate(`${URL.SUPPORT_SURVEY_NOID}${id}`);
        }
    };

    const surveys = [
        {
            id: 1,
            title: "2023년 건설기준 포털시스템 이용자 만족도 조사",
            isClosed: false,
            period: "2014-06-25 ~ 2015-09-17",
            content: "본 연구의 목적은 “건설공사기준 코드체계(국토교통부 고시 제2013-640호, ‘13.10)” 전환에 따른 분야별 코드별로 현행 설계기준과 표준시방서에 대하여 중복 및 상충 항목의 검토 정비하여 통합 코드(안) 마련."
        },
        {
            id: 2,
            title: "2022년 건설기준 포털시스템 이용자 만족도 조사",
            isClosed: true,
            period: "2013-12-26 ~ 2015-06-30",
            content: "본 연구의 목적은 “건설공사기준 코드체계(국토교통부 고시 제2013-640호, ‘13.10)” 전환에 따른 분야별 코드별로 현행 설계기준과 표준시방서에 대하여 중복 및 상충 항목의 검토 정비하여 통합 코드(안) 마련."
        },
        {
            id: 3,
            title: "2021년 건설기준 포털시스템 이용자 만족도 조사",
            isClosed: true,
            period: "2013-03-01 ~ 2014-07-01",
            content: "ㅇ 현장 여건 변화 및 민원 등에 따른 합리적 표준시방서 개정 ㅇ 2009년 개정 이후 민원 및 감사원 지적 등에 따른 시방서 내용 개정"
        }
    ];

    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home" >Home</Link></li>
                        <li><Link to={URL.SUPPORT_LIST_NOCODE+'/KCSC-NTC'}>정보제공</Link></li>
                        <li>설문조사</li>
                    </ul>
                </div>
                {/* <!--// Location --> */}

                <div className="layout">
                    <div className="contents QNA_LIST" id="contents">
                        {/* <!-- 본문 --> */}
                        <h1 className="tit_3">설문조사</h1>

                        {/* <!-- 건설기준연구 안내 (리스트 5개씩만 뿌려주세요.)--> */}
                        {surveys.map((survey) => (
                            <React.Fragment key={survey.id}>
                                <Row className="py-3 justify-content-between align-items-end">
                                    <Col className="fs-6 fw-bold text-4c6 ps-4">{survey.title}</Col>
                                    <Col className="text-end">
                                        <Button
                                            type="button"
                                            className={survey.isClosed ? "btn btn-secondary px-4" : "btn btn-22498E px-4"}
                                            onClick={() => goToDetail(survey.id, survey.isClosed)}>
                                            {survey.isClosed ? '설문마감' : '참여하기'}
                                        </Button>
                                    </Col>
                                </Row>
                                <div className="board_view2 pb-4">
                                    <dl>
                                        <dt>참여기간</dt>
                                        <dd>{survey.period}</dd>
                                    </dl>
                                    <dl>
                                        <dt>내용</dt>
                                        <dd>{survey.content}</dd>
                                    </dl>
                                </div>
                            </React.Fragment>
                        ))}

                        <Row className={"py-3 justify-content-between align-items-end"} >
                            <Col className={"fs-6 fw-bold text-4c6 ps-4"}>2023년 건설기준 포털시스템 이용자 만족도 조사</Col>
                            <Col className={"text-end"}><Button type={"button"} className={"btn btn-22498E px-4"}  onClick={goToDetail} >참여하기</Button></Col>
                        </Row>
                        <div className="board_view2 pb-4">
                            <dl>
                                <dt>참여기간</dt>
                                <dd>
                                    2014-06-25 ~ 2015-09-17
                                </dd>
                            </dl>
                            <dl>
                                <dt>내용</dt>
                                <dd>
                                    본 연구의 목적은 “건설공사기준 코드체계(국토교통부 고시 제2013-640호, ‘13.10)” 전환에 따른 분야별 코드별로 현행 설계기준과 표준시방서에 대하여 중복 및 상충 항목의 검토 정비하여 통합 코드(안) 마련.
                                </dd>
                            </dl>
                        </div>


                        <Row className={"py-3 justify-content-between align-items-end"} >
                            <Col className={"fs-6 fw-bold text-4c6 ps-4"}>2022년 건설기준 포털시스템 이용자 만족도 조사</Col>
                            <Col className={"text-end"}><Button type={"button"} className={"btn btn-secondary px-4"}  onClick={goToDetail} >설문마감</Button></Col>
                        </Row>
                        <div className="board_view2 pb-4">
                            <dl>
                                <dt>참여기간</dt>
                                <dd>
                                    2013-12-26 ~ 2015-06-30
                                </dd>
                            </dl>
                            <dl>
                                <dt>내용</dt>
                                <dd>
                                    본 연구의 목적은 “건설공사기준 코드체계(국토교통부 고시 제2013-640호, ‘13.10)” 전환에 따른 분야별 코드별로 현행 설계기준과 표준시방서에 대하여 중복 및 상충 항목의 검토 정비하여 통합 코드(안) 마련.
                                </dd>
                            </dl>
                        </div>


                        <Row className={"py-3 justify-content-between align-items-end"} >
                            <Col className={"fs-6 fw-bold text-4c6 ps-4"}>2021년 건설기준 포털시스템 이용자 만족도 조사</Col>
                            <Col className={"text-end"}><Button type={"button"} className={"btn btn-secondary px-4"}  onClick={goToDetail} >설문마감</Button></Col>
                        </Row>
                        <div className="board_view2 pb-4">
                            <dl>
                                <dt>참여기간</dt>
                                <dd>
                                    2013-03-01 ~ 2014-07-01
                                </dd>
                            </dl>
                            <dl>
                                <dt>내용</dt>
                                <dd>
                                    ㅇ 현장 여건 변화 및 민원 등에 따른 합리적 표준시방서 개정
                                    ㅇ 2009년 개정 이후 민원 및 감사원 지적 등에 따른 시방서 내용 개정
                                </dd>
                            </dl>
                        </div>

                        <Row className="board_bot justify-content-between">
                            <Col xs={3} className=""></Col>
                            {/* <!-- Paging --> */}
                            <Col xs={6} className="paging">
                                <ul>
                                    <li className="btn"><button to="" className="first">처음</button></li>
                                    <li className="btn"><button to="" className="prev">이전</button></li>
                                    <li><button to="" className="cur">1</button></li>
                                    <li><button to="">2</button></li>
                                    <li><button to="">3</button></li>
                                    <li><button to="">4</button></li>
                                    <li><button to="">5</button></li>
                                    <li><button to="">6</button></li>
                                    <li><button to="">7</button></li>
                                    <li><button to="">8</button></li>
                                    <li><button to="">9</button></li>
                                    <li><button to="">10</button></li>
                                    <li className="btn"><button to="" className="next">다음</button></li>
                                    <li className="btn"><button to="" className="last">마지막</button></li>
                                </ul>
                            </Col>
                            {/* <!--/ Paging --> */}

                            {/* 수요조사는 버튼명 "의견 접수"  수요조사와 QNA만 작성가능하게 관리자 세팅되어야 함/관리자 쓰기권한만 작성가능 */}
                            <Col xs={3} className="text-end"></Col>
                        </Row>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Poll;