import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';

import * as EgovNet from 'api/egovFetch';

import URL from 'constants/url';

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
import EgovPagingPaginationInfo from 'components/EgovPagingPaginationInfo';

import styled from "styled-components";

const StyledDiv = styled.div`
.BRD008 {
    .head {
        span {
            text-align: left;
            &:nth-child(1) {
                width: 32px;
                text-align: center;
            }
            &:nth-child(2) {
                width: 60px;
                text-align: center;
            }
            &:nth-child(3) {
                width: 300px;
            }
            &:nth-child(4) {
                width: 120px;
            }
            &:nth-child(5) {
                width: 80px;
            }
            &:nth-child(6) {
                width: 70px;
            }
            &:nth-child(7) {
                width: 50px;
                text-align: center;
            }
            &:nth-child(8) {
                width: 50px;
                text-align: center;
            }
        }        
    }
    .result .list_item {
        & > div {
            text-align: left;
            &:nth-child(1) {
                width: 32px;
                text-align: center;
            }
            &:nth-child(2) {
                width: 60px;
                text-align: center;
            }
            &:nth-child(3) {
                width: 300px;
            }
            &:nth-child(4) {
                width: 120px;
            }
            &:nth-child(5) {
                width: 80px;
            }
            &:nth-child(6) {
                width: 70px;
            }
            &:nth-child(7) {
                width: 50px;
                text-align: center;
            }
            &:nth-child(8) {
                width: 50px;
                text-align: center;
            }
        }
    }
}

.board-bot {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    justify-content: center;
    
    & > *:nth-child(1) {            
        width: 16%;
        justify-content: left;
    }
    & > *:nth-child(2) {
        width: 68%;
        justify-content: center;
    }
    & > *:nth-child(3) {
        width: 16%;
        justify-content: right;
    }
}
`;

function ProgressStatus(props) {

    const location = useLocation();

    const [listItem, setListItem] = useState([]);
    const [paginationInfo, setPaginationInfo] = useState({});
    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });

    useEffect(function () {
        getList(searchCondition);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const requestOptions = {
        method: "GET",
        headers: {
            'Content-type': 'application/json'
        }
    }

    const getList = (searchCondition) => {  
        
        EgovNet.requestFetch(`/admin/committee/progress-status/list?page=${searchCondition.pageIndex-1}&size=10&sort=popupSeq,desc`,
            requestOptions,
            function (resp) {
                console.log('%o', resp);
                setListItem(resp.result.list);
                setPaginationInfo({...resp.result.paginationInfo});
            }
        );
        
    }

    const Location = React.memo(function Location() {
        return (
            <div className="location">
                <ul>
                    <li><Link to={URL.MAIN} className="home">Home</Link></li>
                    <li><Link to={URL.ADMIN}>사이트 관리</Link></li>
                    <li>위원회 관리</li>
                    <li>진행현황 관리</li>
                </ul>
            </div>
        )
    });

    return (
        <div className="container">
             <div className="c_wrap">
                {/* <!-- Location --> */}
                <Location />
                {/* <!--// Location --> */}

                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav></EgovLeftNav>
                    {/* <!--// Navigation --> */}

                    <div className="contents " id="contents">
                        {/* <!-- 본문 --> */}
                        <StyledDiv>
                            <div className="top_tit">
                                <h1 className="tit_1">진행현황 관리</h1>
                            </div>

                            {/* <!-- 게시판목록 --> */}
                            <div className="board_list BRD008">
                                <div className="head">
                                    <span>#</span>
                                    <span>구분</span>
                                    <span>제목 / 코드명</span>
                                    <span>진행위원회</span>
                                    <span>진행단계</span>
                                    <span>등록일</span>
                                    <span>수정</span>
                                    <span>삭제</span>
                                </div>
                                <div className="result">                                    
                                    {/* <!-- case : 데이터 없을때 --> */}
                                    {listItem.length === 0 &&
                                        <p className="no_data" key="0">검색된 결과가 없습니다.</p>
                                    }                                    
                                    {listItem.map((it)=>(
                                        <div className='list_item' key={it.seq}>
                                            <div>{it.number}</div>
                                            <div>{it.drftTypeNm}</div>
                                            <div>{it.categoryNm}<br /><Link to={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__DETAIL} state={{drftSeq: it.seq}} className="home">{it.title}</Link></div>
                                            <div>{it.orgNm}</div>
                                            <div>진행단계표시</div>
                                            <div>{it.regDate}</div>
                                            <div><button type='button' className='btn btn_blue_h31 px-1'>수정</button></div>
                                            <div><button type='button' className='btn btn_red_h31 px-1'>삭제</button></div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            {/* <!--// 게시판목록 --> */}



                            

                            {/* <!-- Paging --> */}
                            <div className="board-bot">
                                <div></div>
                                <EgovPagingPaginationInfo pagination={paginationInfo} setPaginationInfo={setPaginationInfo} moveToPage={passedPage => {
                                    getList({ ...searchCondition, pageIndex: passedPage })
                                }} />
                                <div className="right_col btn1">
                                    <Link to={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__CREATE} className="btn btn_blue_h46 w_100">등록</Link>
                                </div>
                                
                            </div>
                            {/* <!--/ Paging --> */}
                        </StyledDiv>                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ProgressStatus;