import React from "react";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import Category from "../../component/Category.jsx";
import { useNavigate } from "react-router";


export default function EquipmentManagementSelect() {

	// 시스템 코드 - 장비 상태
	const [equipmentStates, setEquipmentStates] = React.useState({});
	// 시스템 코드 - 장비 대여 상태
	const [equipmentRentalStates, setEquipmentRentalStates] = React.useState({});

	const [modalOpen, setModalOpen] = React.useState(false);
	const openModal = () => {
		setModalOpen(true);
	};
	const closeModal = () => {
		setModalOpen(false);
	};

	const [modalOpen3, setModalOpen3] = React.useState(false);
	const openModal3 = () => {
		// equipmentListData();
		setModalOpen3(true);
	};
	const closeModal3 = () => {
		setModalOpen3(false);
	};

	// 대상자 매칭 반납
	const seniorMatchDelete = () => {
		if (confirm('아니다') == false) {
			return;
		}
		// 대상자 매칭 반납 함수 사용하기
	};

	const navigate = useNavigate();

	// 시스템 코드 - 장비 대여 상태 조회
	const equipmentStatesSelect = () => {
		console.log('equipmentStatesSelect Function Run');

		//fetch post
		fetch("/common/systemCode/equipmentStatesSelect.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({})
		}).then((response) => response.json()).then((data) => {
			console.log('equipmentStatesSelect response : ', data);
			setEquipmentStates(data);
		}).catch((error) => {
			console.log('equipmentStatesSelect error : ', error);
		});
	}

	// 시스템 코드 - 장비 대여 상태 조회
	const equipmentRentalStatesSelect = () => {
		console.log('equipmentRentalStatesSelect Function Run');

		//fetch post
		fetch("/common/systemCode/equipmentRentalStatesSelect.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({})
		}).then((response) => response.json()).then((data) => {
			console.log('equipmentRentalStatesSelect response : ', data);
			setEquipmentRentalStates(data);
		}).catch((error) => {
			console.log('equipmentRentalStatesSelect error : ', error);
		});

		//fetch get
		/* fetch('/common/systemCode/equipmentRentalStatesSelect.json')
		.then((response) => response.json()).then((data) => {
			console.log('equipmentRentalStatesSelect response : ', data);
		}).catch((error) => {
			console.log('equipmentRentalStatesSelect error : ', error);
		}); */

		//axios get
		/* axios.get('/common/systemCode/equipmentRentalStatesSelect.json')
		.then(function (response) {
			console.log('equipmentRentalStatesSelect : ', response.data);
		}).catch(function (error) {
			console.log("equipmentRentalStatesSelect - error : ", error);
		}); */

		//axios post
		/* axios({
			url: '/common/systemCode/equipmentRentalStatesSelect.json',
			method: 'post',
			headers: {
				'Content-Type': "application/json; charset=UTF-8",
			},
			data: {}
		}).then(function (response) {
			console.log("equipmentRentalStatesSelect - response : ", response.data);
		}).catch(function (error) {
			console.log("equipmentRentalStatesSelect - error : ", error);
		}); */
	}

	// 장비 비매칭 대상자 목록 조회
	const equipmentNotMatchSeniorSelectList = () => {
		console.log('seniorSelectList Function Run');
		fetch("/user/equipmentMatchStateSelectListBySenior.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({
				agency_id: 'AGENCY01',
				matchState: false
			})
		}).then((response) => response.json()).then((data) => {
			console.log('equipmentNotMatchSeniorSelectList response : ', data);
			setEquipmentNotMatchSeniorList(data);
		}).catch((error) => {
			console.log('equipmentNotMatchSeniorSelectList error : ', error);
		});
	}

	// 담당자 목록 조회
	const workerSelectList = () => {
		console.log('workerSelectList Function Run');
		fetch("/user/selectUserList.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({
				user_code: 'WORKER01'
			})
		}).then((response) => response.json()).then((data) => {
			console.log('workerSelectList response : ', data);
			setWorkerList(data);
		}).catch((error) => {
			console.log('workerSelectList error : ', error);
		});
	}

	/********************************** 관리자 장비 (시작) **********************************/
	// 관리자 전체 장비 목록
	const [equipmentList, setEquipmentList] = React.useState([]);

	// 관리자 전체 장비 목록 조회
	const equipmentSelectList = () => {
		console.log('equipmentSelectList Function Run');
		fetch("/equipment/equipmentSelectList.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({})
		}).then((response) => response.json()).then((data) => {
			console.log('equipmentSelectList response : ', data);
			setEquipmentList(data);
		}).catch((error) => {
			console.log('equipmentSelectList error : ', error);
		});
	}

	const thead1 = [
		"No",
		"모델 명",
		"시리얼 넘버",
		"입고 일자",
		"상태",
		"보유 기관",
		"대상자",
		"관리",
	];
	const key1 = [
		"equipment_name",
		"equipment_serial_number",
		"equipment_stock_date",
		"equipment_state",
		"agency_name",
		"senior_name",
	];

	const thead2 = [
		"No",
		"장비명",
		"시리얼 넘버",
		"입고일자",
		"납품 기관",//관리기관, 올잇메디
		"대상자",//시행기관
	];
	const key2 = [
		"No",
		"equipment",
		"serialNumber",
		"date",
		"agency",
		"senior",
	];
	const content2 = [
		{
			No: 1,
			equipment: "스마트약상자",
			serialNumber: "ABCD-1",
			date: "2022.12.02",
			agency: (
				<Button
					className={"btn-small gray-btn"}
					btnName={"선택"}
					onClick={openModal}
				/>
			),
			senior: (
				<Button
					className={"btn-small gray-btn"}
					btnName={"선택"}
				// onClick={openModal2}
				/>
			),
		},
		{
			No: 2,
			equipment: "스마트약상자",
			serialNumber: "ABCD-1",
			date: "2022.12.02",
			agency: (<Button
				className={"btn-small gray-btn"}
				btnName={"선택"}
				onClick={openModal}
			/>),
			senior: (
				<Button
					className={"btn-small gray-btn"}
					btnName={"선택"}
				// onClick={openModal2}
				/>
			),
		},
	];
	const thead3 = [
		"No",
		"장비명",
		"시리얼 넘버",
		"대여일",
		"배터리 잔량",
		"보유기관",//관리기관, 올잇메디
		"담당자",//시행기관
	];
	const key3 = [
		"No",
		"equipment",
		"serialNumber",
		"date",
		"battery",
		"agency",
		"protector",
	];
	const content3 = [
		{
			No: 1,
			equipment: "스마트약상자",
			serialNumber: "ABCD-1",
			date: "2022.12.02",
			battery: "10%",
			agency: "A복지관",
			protector: "김복지"

		},
	];
	/********************************** 관리자 장비 (끝) **********************************/



	/********************************** 시행기관 장비 (시작) **********************************/
	//로그 확인
	const logCheck = () => {
		console.log('equipmentNotMatchSeniorList - change: ', equipmentNotMatchSeniorList);
	};

	// 시행기관 전체 장비 목록
	const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
	// 시행기관 대상자 장비 목록
	const [agencySeniorEquipmentList, setAgencySeniorEquipmentList] = React.useState([]);
	// 시행기관 재고 장비 목록
	const [agencyStockEquipmentList, setAgencyStockEquipmentList] = React.useState([]);
	// 선택한 대상자 장비
	const [seniorEquipment, setSeniorEquipment] = React.useState({});
	// 대상자 장비 등록 모달창
	const [seniorMatchInsertModal, setSeniorMatchInsertModal] = React.useState(false);
	// 대상자 장비 반납 모달창
	const [seniorMatchReturnModal, setSeniorMatchReturnModal] = React.useState(false);

	// 장비 비매칭 대상자 목록
	const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = React.useState([]);
	// 담당자 목록
	const [workerList, setWorkerList] = React.useState([]);


	// 대상자 장비 등록 모달창 열기
	const seniorMatchInsertModalOpen = (item) => {
		setSeniorEquipment(item); // 선택한 장비 데이터 저장
		setSeniorMatchInsertModal(true);
	};
	// 대상자 장비 등록 모달창 닫기
	const seniorMatchInsertModalClose = () => {
		setSeniorMatchInsertModal(false);
	};

	// 대상자 장비 등록 - 대상자
	const seniorEquipmentSeniorInsert = (e) => {
		console.log("senior: ", e.target.value);

		// // Name 속성
		// const userName = e.target.value.split('(')[0].trim();
		// // ID 속성
		// const second = e.target.value.split('(')[1]; // ')' 자르기 전
		// const userId = second.substr(0, second.length-1);
		// console.log("senior id: ", userId);
		// console.log("senior name: ", userName);

		// 원본 데이터 복사 및 수정
		let data = {
			...seniorEquipment,
			senior_id: e.target.value,
			user_name: null
		}
		// 복사 데이터를 원본 데이터에 덮어쓰기
		setSeniorEquipment(data);
	};

	// 대상자 장비 등록 - 대여일
	const seniorEquipmentRentalStartDateInsert = (e) => {
		// 원본 데이터 복사 및 수정
		let data = {
			...seniorEquipment,
			equipment_rental_start_date: e.target.value
		}
		// 복사 데이터를 원본 데이터에 덮어쓰기
		setSeniorEquipment(data);
	};

	// 대상자 장비 등록 - 반납예정일
	const seniorEquipmentRentalEndDateInsert = (e) => {
		// 원본 데이터 복사 및 수정
		let data = {
			...seniorEquipment,
			equipment_rental_end_date: e.target.value
		}
		// 복사 데이터를 원본 데이터에 덮어쓰기
		setSeniorEquipment(data);
	};


	// 대상자 장비 반납 모달창 열기
	const seniorMatchReturnModalOpen = (item) => {
		setSeniorEquipment(item); // 선택한 장비 데이터 저장
		setSeniorMatchReturnModal(true);
	};

	// 대상자 장비 반납 모달창 닫기
	const seniorMatchReturnModalClose = () => {
		setSeniorMatchReturnModal(false);
	};

	// 대상자 장비 - 반납일
	const seniorEquipmentRentalReturnDateInsert = (e) => {
		console.log('@@@', e.target.value);
		// 원본 데이터 복사 및 수정
		let data = {
			...seniorEquipment,
			equipment_rental_return_date: e.target.value
		}
		// 복사 데이터를 원본 데이터에 덮어쓰기
		setSeniorEquipment(data);
	};

	// 대상자 장비 - 반납 담당자
	const seniorEquipmentReturnUserIdInsert = (e) => {
		console.log('@@@@@', e.target.value);
		// 원본 데이터 복사 및 수정
		let data = {
			...seniorEquipment,
			return_user_id: e.target.value
		}
		// 복사 데이터를 원본 데이터에 덮어쓰기
		setSeniorEquipment(data);
	};


	// 시행기관 전체 장비 목록 조회
	const agencyEquipmentSelectList = () => {
		console.log('agencyEquipmentSelectList Function Run');
		fetch("/equipment/equipmentSelectList.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({
				agency_id: 'AGENCY01',
				searchAll: true
			}),
		}).then((response) => response.json()).then((data) => {
			console.log('agencyEquipmentSelectList response : ', data);
			setAgencyEquipmentList(data);
		}).catch((error) => {
			console.log('agencyEquipmentSelectList error : ', error);
		});
	}

	// 시행기관 대상자 장비 목록 조회
	const agencySeniorEquipmentSelectList = () => {
		console.log('agencySeniorEquipmentSelectList Function Run');
		fetch("/equipment/equipmentSelectList.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({
				agency_id: 'AGENCY01',
				seniorCheck: true
			}),
		}).then((response) => response.json()).then((data) => {
			console.log('agencySeniorEquipmentSelectList response : ', data);
			setAgencySeniorEquipmentList(data);
		}).catch((error) => {
			console.log('agencySeniorEquipmentSelectList error : ', error);
		});
	}

	// 시행기관 재고 장비 목록 조회
	const agencyStockEquipmentSelectList = () => {
		console.log('agencyStockEquipmentList Function Run');
		fetch("/equipment/equipmentSelectList.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify({
				agency_id: 'AGENCY01',
				seniorCheck: false
			}),
		}).then((response) => response.json()).then((data) => {
			console.log('agencyStockEquipmentList response : ', data);
			setAgencyStockEquipmentList(data);
		}).catch((error) => {
			console.log('agencyStockEquipmentList error : ', error);
		});
	}

	// 대상자 장비 등록
	const seniorEquipmentInsert = () => {
		console.log('seniorEquipmentInsert Function Run');

		// 대상자 아이디 유효성 검사
		let check = 0;
		for (let i = 0; i < equipmentNotMatchSeniorList.length; i++) {
			// 입력한 대상자 아이디가 대상자 목록에 있을 경우
			if (equipmentNotMatchSeniorList[i]['senior_id'] == seniorEquipment['senior_id']) {
				console.log('success: ', equipmentNotMatchSeniorList[i]['senior_id']);
				// 원본 데이터 복사 및 수정
				let data = {
					...seniorEquipment,
					user_name: equipmentNotMatchSeniorList[i]['user_name'],
				}
				// 복사 데이터를 원본 데이터에 덮어쓰기
				setSeniorEquipment(data);

				check = 1;
			}
		}
		// 입력한 대상자 아이디가 대상자 목록에 없을 경우
		if (check != 1) {
			console.log('fail: ', equipmentNotMatchSeniorList, seniorEquipment['senior_id']);
			alert('존재하지 않는 대상자입니다.');
			return;
		}

		// 대여일 유효성 검사
		/* if(seniorEquipment['equipment_rental_start_date'] == null) {
			alert('대여일을 입력해 주세요');
			return;
		} */

		// 반납 예정일 유효성 검사
		/* if(seniorEquipment['equipment_rental_end_date'] == null) {
			alert('반납 예정일 입력해 주세요');
			return;
		} */

		fetch("/equipment/seniorEquipmentInsert.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify(seniorEquipment),
		}).then((response) => response.json()).then((data) => {
			console.log('seniorEquipmentInsert response : ', data);
			// 대상자 장비 데이터 초기화
			setSeniorEquipment({});
			//장비 비매칭 대상자 목록 조회
			equipmentNotMatchSeniorSelectList();
			// 장비 목록 조회
			agencyEquipmentSelectList();
			agencySeniorEquipmentSelectList();
			agencyStockEquipmentSelectList();
			// 모달창 닫기
			setSeniorMatchInsertModal(false);

			alert('등록이 완료됐습니다.');
		}).catch((error) => {
			console.log('seniorEquipmentInsert error : ', error);
			alert('등록에 실패했습니다.');
		});
	}

	// 대상자 장비 반납
	const seniorEquipmentReturn = () => {
		console.log('seniorEquipmentReturn Function Run');

		// 담당자 아이디 유효성 검사
		let check = 0;
		for (let i = 0; i < workerList.length; i++) {
			// 입력한 담당자 아이디가 담당자 목록에 있을 경우
			if (workerList[i]['user_id'] == seniorEquipment['return_user_id']) {
				console.log('success: ', workerList[i]['user_id']);
				check = 1;
			}
		}
		// 입력한 담당자 아이디가 담당자 목록에 없을 경우
		if (check != 1) {
			console.log('fail: ', workerList, seniorEquipment['return_user_id']);
			alert('존재하지 않는 담당자입니다.');
			return;
		}

		// 반납 예정일 유효성 검사
		/* if(seniorEquipment['equipment_rental_return_date'] == null) {
			alert('반납일 입력해 주세요');
			return;
		} */

		fetch("/equipment/seniorEquipmentReturn.json", {
			method: "POST",
			headers: {
				'Content-Type': 'application/json; charset=UTF-8'
			},
			body: JSON.stringify(seniorEquipment),
		}).then((response) => response.json()).then((data) => {
			console.log('seniorEquipmentReturn response : ', data);
			// 대상자 장비 데이터 초기화
			setSeniorEquipment({});
			//장비 비매칭 대상자 목록 조회
			equipmentNotMatchSeniorSelectList();
			// 장비 목록 조회
			agencyEquipmentSelectList();
			agencySeniorEquipmentSelectList();
			agencyStockEquipmentSelectList();
			// 모달창 닫기
			setSeniorMatchReturnModal(false);

			alert('반납이 완료됐습니다.');
		}).catch((error) => {
			console.log('seniorEquipmentReturn error : ', error);
			alert('반납에 실패했습니다.');
		});
	}


	// 시행기관 전체 장비 thead, key
	const thead11 = [
		"No",
		"모델 명",
		"시리얼 넘버",
		"기기 상태",
		"대여 상태",
		"동일 기기 매칭 순번",
		"대상자 관리",
	];
	const key11 = [
		"equipment_name",
		"equipment_serial_number",
		"equipment_state",
		"equipment_rental_state",
	];

	// 시행기관 대상자 장비 thead, key
	const thead22 = [
		"No",
		"모델 명",
		"시리얼 넘버",
		"기기 상태",
		"대상자",
		"대여일",
		"반납예정일",
		"동일 기기 매칭 순번",
		"대상자 관리",
	];
	const key22 = [
		"equipment_name",
		"equipment_serial_number",
		"equipment_state",
		"senior_name",
		"equipment_rental_start_date",
		"equipment_rental_end_date",
		"equipment_match_idx",
	];

	// 시행기관 재고 장비 thead, key
	const thead33 = [
		"No",
		"모델 명",
		"시리얼 넘버",
		"기기 상태",
		"대상자 관리",
	];
	const key33 = [
		"equipment_name",
		"equipment_serial_number",
		"equipment_state",
	];

	// 장비 대상자 등록 모달창 thead
	const thead44 = [
		"대상자",
		"대여일",
		"반납예정일",
		"선택",
	];

	// 장비 대상자 반납 모달창 thead
	const thead55 = [
		"반납일",
		"반납 담당자",
		"선택",
	];

	// 마운트 시 실행 함수
	React.useEffect(() => {
		equipmentStatesSelect();
		equipmentRentalStatesSelect();
		equipmentNotMatchSeniorSelectList();
		workerSelectList();

		//관리자
		equipmentSelectList();

		//시행기관
		agencyEquipmentSelectList();
		agencySeniorEquipmentSelectList();
		agencyStockEquipmentSelectList();
	}, [])

	/********************************** 시행기관 장비 (끝) **********************************/

	// 장비 납품 모달창 thead, key
	const thead4 = [
		"No",
		"기관명",
		"선택하기",
	];
	const key4 = [
		"No",
		"agency",
		"choice",
	];
	const content4 = [
		{
			No: 1,
			agency: (
				<div>
					<Category />
				</div>
			)
			,
			choice: (<Button
				className={"btn-small gray-btn"}
				btnName={"선택"}
			/>)

		},
	];

	// 장비 탭별 화면
	const data = [
		{
			id: 1,
			title: "전체 장비" + "(" + equipmentList.length + ")",
			description: (
				<div>
					<div className="flex">
						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
						<div className="btn-wrap flex-end margin-bottom ">
							<Button
								className={"btn-small green-btn"}
								btnName={"등록"}
								onClick={openModal3}
							/>
						</div>
					</div>
					{/* <Table
						className={"caregiver-user"}
						head={thead1}
						contents={equipmentList}
						contentKey={key1}
						onClick={() => {
							navigate("/EquipmentManagementSelectOne");
						}}
					/> */}
					<table class="caregiver-user">
						<thead>
							<tr>
								{thead1.map((i) => {
									return <th>{i}</th>;
								})}
							</tr>
						</thead>
						<tbody>
							{equipmentList.map((item, index) => {
								return (
									<tr key={index}>
										<td>{equipmentList.length - index}</td>
										{key1.map((kes) => {
											return <td>{item[kes]}</td>
										})}
										<td>
											{
												item['senior_id'] == null
													? <Button
														className={"btn-small green-btn"}
														btnName={"등록"}
														onClick={() => seniorMatchInsertModalOpen(item)}
													/>
													: <Button
														className={"btn-small green-btn"}
														btnName={"반납"}
														onClick={seniorMatchDelete}
													/>
											}
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</div>
			),
		},
		{
			id: 2,
			title: "재고 장비" + "(" + ")", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
			description: (
				<div>
					<Table
						className={"caregiver-user"}
						head={thead2}
						contents={content2}
						contentKey={key2}
					/>
				</div>
			),
		},
		{
			id: 3,
			title: "납품 장비" + "(" + ")",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
			description: (
				<Table
					className={"caregiver-user"}
					head={thead3}
					contents={content3}
					contentKey={key3}
				/>
			),
		},

		{
			id: 4,
			title: "전체 장비(시행기관)" + "(" + agencyEquipmentList.length + ")",
			description: (
				<div>
					<div className="flex">
						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
						<div className="btn-wrap flex-end margin-bottom ">
							<Button
								className={"btn-small green-btn"}
								btnName={"LOG"}
								onClick={logCheck}
							/>
						</div>
					</div>
					<table class="caregiver-user">
						<thead>
							<tr>
								{thead11.map((i) => {
									return <th>{i}</th>;
								})}
							</tr>
						</thead>
						<tbody>
							{agencyEquipmentList.map((item, index) => {
								if(item)
								return (
									<tr key={index}>
										<td>{agencyEquipmentList.length - index}</td>
										{/* {key11.map((kes) => {
											if(kes == "equipment_rental_state") {
												for(let i = 0; i < Object.keys(equipmentRentalStates).length; i++) {
													if(item[kes].toString().toUpperCase() == Object.keys(equipmentRentalStates)[i]) {
														item[kes] = Object.values(equipmentRentalStates)[i];
													}
												}
											}
											return <td>{item[kes]}</td>
										})} */}
										<td>{item['equipment_name']}</td>
										<td>{item['equipment_serial_number']}</td>
										{Object.keys(equipmentStates).map((key, idx) => {
											if(item['equipment_state'] == key)
											return <td>{Object.values(equipmentStates)[idx]}</td>
										})}
										{Object.keys(equipmentRentalStates).map((key, idx) => {
											if(item['equipment_rental_state'] == key)
											return <td>{Object.values(equipmentRentalStates)[idx]}</td>
										})}
										<td>{item['equipment_match_idx']}</td>
										<td>
											{
												item['equipment_rental_state'] == 'RENTABLE'
													? <Button
														className={"btn-small green-btn"}
														btnName={"등록"}
														onClick={() => seniorMatchInsertModalOpen(item)}
													/>
													: <Button
														className={"btn-small green-btn"}
														btnName={"반납"}
														onClick={() => seniorMatchReturnModalOpen(item)}
													/>
											}
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</div>
			),
		},
		{
			id: 5,
			title: "대상자 장비(시행기관)" + "(" + agencySeniorEquipmentList.length + ")",
			description: (
				<div>
					<div className="flex">
						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
					</div>
					<table class="caregiver-user">
						<thead>
							<tr>
								{thead22.map((i) => {
									return <th>{i}</th>;
								})}
							</tr>
						</thead>
						<tbody>
							{agencySeniorEquipmentList.map((item, index) => {
								return (
									<tr key={index}>
										<td>{agencySeniorEquipmentList.length - index}</td>
										{key22.map((kes) => {
											return <td>{item[kes]}</td>
										})}
										<td>
											{
												<Button
													className={"btn-small green-btn"}
													btnName={"반납"}
													onClick={() => seniorMatchReturnModalOpen(item)}
												/>
											}
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</div>
			),
		},
		{
			id: 6,
			title: "재고 장비(시행기관)" + "(" + agencyStockEquipmentList.length + ")",
			description: (
				<div>
					<div className="flex">
						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
					</div>
					<table class="caregiver-user">
						<thead>
							<tr>
								{thead33.map((i) => {
									return <th>{i}</th>;
								})}
							</tr>
						</thead>
						<tbody>
							{agencyStockEquipmentList.map((item, index) => {
								return (
									<tr key={index}>
										<td>{agencyStockEquipmentList.length - index}</td>
										{key33.map((kes) => {
											return <td>{item[kes]}</td>
										})}
										<td>
											{
												<Button
													className={"btn-small green-btn"}
													btnName={"등록"}
													onClick={() => seniorMatchInsertModalOpen(item)}
												/>
											}
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</div>
			),
		},
	];

	//시작 탭 설정
	const [index, setIndex] = React.useState(4);

	return (
		<main>
			<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
				<div className="board-wrap">
					<div>
						<Table
							className={"caregiver-user"}
							head={thead4}
							contents={content4}
							contentKey={key4}
						/>
					</div>
					<div>
						<Button
							className={"btn-100 green-btn"}
							btnName={"닫기"}
							onClick={closeModal}
						/>
					</div>
				</div>
			</Modal>

			<Modal open={modalOpen3} close={closeModal3} header="장비 등록">
				<div className="board-wrap">
					<div>
						<table className="flex70 margin-bottom">
							<tbody className="equipment-insert">
								<tr>
									<th>장비명</th>
									<td colSpan={5}>
										<input type="text" name="" id="" />
									</td>
								</tr>
								<tr>
									<th>시리얼 넘버</th>
									<td colSpan={5}>
										<input type="text" name="" id="" />
									</td>
								</tr>
								<tr>
									<th>입고일자</th>
									<td colSpan={5}>
										<input type="text" name="" id="" />
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div>
						<Button
							className={"btn-100 green-btn"}
							btnName={"저장"}
							onClick={closeModal3}
						/>
					</div>
				</div>
			</Modal>
			
			<Modal open={seniorMatchInsertModal} close={seniorMatchInsertModalClose} header="대상자 장비 등록">
				<div className="board-wrap">
					<div>
						<table className={"caregiver-user"}>
							<thead>
								<tr>
									{thead44.map((i) => {
										return <th>{i}</th>;
									})}
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<input type="text" list="senior_list" placeholder="대상자를 입력해 주세요" onChange={seniorEquipmentSeniorInsert} />
										<datalist id="senior_list">
											{equipmentNotMatchSeniorList.map((item) => {
												// return <option value={item['user_name'] + " (" + item['senior_id'] + ")"}></option>
												return <option value={item['senior_id']}>{item['user_name']}</option>

											})}
										</datalist>
									</td>
									<td>
										<input type="date" onChange={seniorEquipmentRentalStartDateInsert} />
									</td>
									<td>
										<input type="date" onChange={seniorEquipmentRentalEndDateInsert} />
									</td>
									<td>
										<Button
											className={"btn-small gray-btn"}
											btnName={"선택"}
											onClick={seniorEquipmentInsert}
										/>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div>
						<Button
							className={"btn-100 green-btn"}
							btnName={"닫기"}
							onClick={seniorMatchInsertModalClose}
						/>
					</div>
				</div>
			</Modal>

			<Modal open={seniorMatchReturnModal} close={seniorMatchReturnModalClose} header="대상자 장비 반납">
				<div className="board-wrap">
					<div>
						<table className={"caregiver-user"}>
							<thead>
								<tr>
									{thead55.map((i) => {
										return <th>{i}</th>;
									})}
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<input type="date" onChange={seniorEquipmentRentalReturnDateInsert} />
									</td>
									<td>
										<input type="text" list="senior_list" placeholder="반납 담당자를 입력해 주세요" onChange={seniorEquipmentReturnUserIdInsert} />
										<datalist id="senior_list">
											{workerList.map((item) => {
												return <option value={item['user_id']}>{item['user_name']}</option>
											})}
										</datalist>
									</td>
									<td>
										<Button
											className={"btn-small gray-btn"}
											btnName={"선택"}
											onClick={seniorEquipmentReturn}
										/>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div>
						<Button
							className={"btn-100 green-btn"}
							btnName={"닫기"}
							onClick={seniorMatchInsertModalClose}
						/>
					</div>
				</div>
			</Modal>


			<div className="tab-container">
				<ul className="tab-menu">
					{data.map((item) => (
						<li
							key={item.id}
							className={index === item.id ? "active" : null}
							onClick={() => setIndex(item.id)}
						>
							{item.title}
						</li>
					))}
				</ul>
				<div className="content-wrap">
					<div className="search-management flex-end margin-bottom2">
						<select name="management-agency">
							<option value="기관전체">기관전체</option>
							<option value="대구보훈병원">복지재단1</option>
							<option value="군위군청">복지재단2</option>
							<option value="군위군청">복지재단3</option>
						</select>
						<select>
							<option value="이름">이름</option>
							<option value="아이디">아이디</option>
						</select>
						<input type="text" />
						<Button
							className={"btn-small gray-btn"}
							btnName={"검색"}
							onClick={() => navigate("")}
						/>
					</div>

					<ul className="tab-content">
						{data
							.filter((item) => index === item.id)
							.map((item) => (
								<li>{item.description}</li>
							))}
					</ul>
				</div>
			</div>
		</main>
	);
}