import { UploadOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Button as ButtonAntd, DatePicker, Form, Input, Radio, Upload } from 'antd';
import { useLocation } from 'react-router-dom';
import viVN from 'antd/lib/locale/vi_VN';
import axios from 'axios';
import moment from 'moment';
import 'moment/locale/vi';
import React, { useEffect, useRef, useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import swal from 'sweetalert';
import { HOST } from '../../config/index';
const ModalEditLabel = (props) => {
const { show, onHide, data } = props;
const [crrImages, setCrrImages] = useState([]);
const [form] = Form.useForm()
const [birthday, setBirthday] = useState(moment())
const [crrData, setCrrData] = useState(null);
const [checkDeleteMulti, setCheckDeleteMulti] = useState(false);
const [crrIdx, setCrrIdx] = useState(0)
const [listChecked, setListChecked] = useState({ url: [] });
const [disableBtn, setDisableBtn] = useState(true);
const [dateImage, setDateImg] = useState("")
const [dataUpload, setDataUpload] = useState([])
const [hostImg, setHostImg] = useState('');
useEffect(() => {
setCrrData(data);
setCrrImages(data.sample_images)
setBirthday(data.birthday !== "" ? moment(data.birthday) : null)
setDisableBtn(data._id ? false : true)
setHostImg(data.image_host)
return () => {
setCrrData(null);
}
}, [data]);
const handleCheckedImg = (event, value) => {
let newListChecked = { ...listChecked }
if (newListChecked.url.indexOf(event.target.value) === -1) {
newListChecked.url.push(event.target.value)
} else {
var i = newListChecked.url.indexOf(event.target.value);
if (i !== -1) {
newListChecked.url.splice(i, 1);
}
}
setListChecked(newListChecked)
}
useEffect(() => {
if (crrImages.length > 0) {
let crrDateImg = crrImages[crrIdx]
let getDateImg = crrDateImg !== "" && crrDateImg.split("_")
let dataImg = getDateImg.length > 0 && getDateImg[1].slice(0,6)
setDateImg(dataImg)
}
},[crrImages,crrIdx])
const click_handle = async () => {
let dataPost = {
obj_id: crrData._id ? crrData._id : "",
name: crrData.name,
birthday: crrData.birthday,
gender: crrData.gender ? crrData.gender : "",
id: crrData.id ? crrData.id : "",
person_type: 4
}
const result = await axios({
method: 'POST',
url: `${HOST}/api/famous_persons/insert_or_update`,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
// 'Authorization': token,
},
data: dataPost,
})
if (result.data.status === 10000) {
if (crrData._id) {
swal({
icon: 'success',
title: 'Thành công',
text: 'Sửa thông tin thành công',
timer: 1500,
buttons: false,
})
} else {
swal({
icon: 'success',
title: 'Thành công',
text: 'Thêm mới thành công',
timer: 1500,
buttons: false,
})
setCrrData({...crrData, _id: result.data.data})
setDisableBtn(false)
}
} else if (result.data.status === 10002) {
swal("Thất bại", "Lỗi hệ thống!", "error");
} else {
swal("Thất bại", "Sửa thông tin thất bại!", "error");
}
}
const bulletedImg = crrImages.map((value, index) => {
let getDateImg = value.split("_")
let dataImg = getDateImg.length > 0 && getDateImg[1].slice(0,6)
let renderImg = value.includes("data:image") ? value : hostImg +dataImg+ "/" + value
return (
{
checkDeleteMulti === false ?

{ setCrrIdx(index) }} className={"opacity_img_click img_check " + (crrIdx === index ? 'active' : '')} />
:
}
)
})
const checkLength= (file,fileList) => {
if (crrImages.length + fileList.length > 3) {
swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning");
return false
}
}
// const uploadImage = async (options) => {
// const { file } = options;
// const base64 = await convertBase64(file)
// let dataUploadImg = {
// obj_id: crrData._id ? crrData._id : "",
// base64_image_list: [base64.split(',')[1]]
// }
// let promises = [];
// promises.push(
// axios
// .post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
// }
// })
// )
// await Promise.all(promises)
// .then((data) => {
// let success = false
// let manyFace = false
// let noFace = false
// for (let i = 0; i < data.length; i++) {
// const element = data[i];
// if (element.data.status === 10000) {
// let listImg = dataUpload
// setHostImg(element.data.image_host)
// listImg.unshift(element.data.data.toString())
// setDataUpload(...dataUpload)
// success = true
// } else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
// manyFace = true
// } else if (element.data.status === 10003 && element.data.message === "No face in image") {
// noFace = true
// } else {
// success = false
// }
// }
// if (success) {
// let originData = crrImages
// originData.unshift(dataUpload[0].toString())
// let arrSet = [...new Set(originData)]
// setCrrImages(arrSet)
// setCheckDeleteMulti(false)
// } else if (manyFace) {
// swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
// } else if (noFace) {
// swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
// } else {
// swal("Thất bại", "Lỗi hệ thống!", "error");
// }
// })
// .catch((err) => {
// console.log(err)
// });
// };
const uploadImage = async (options) => {
if (crrImages.length >= 3) {
swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning");
return
} else {
const { file } = options;
const base64 = await convertBase64(file)
let dataUploadImg = {
obj_id: crrData._id ? crrData._id : "",
base64_image_list: [base64.split(',')[1]]
}
fetch(`${HOST}/api/face_images/famous_person`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
// 'Authorization': token
},
body: JSON.stringify(dataUploadImg)
})
.then(res => res.json())
.then(data => {
if (data.status === 10000) {
setHostImg(data.image_host)
let listImg = [...crrImages]
listImg.unshift(data.data.toString())
setCrrImages(listImg)
setCheckDeleteMulti(false)
} else if (data.status === 10003) {
if (data.message === "Too many face in image") {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
} else {
swal("Thất bại", "Ảnh không hợp lệ", "error");
}
}
})
}
};
const convertBase64 = (file) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file)
fileReader.onload = () => {
resolve(fileReader.result);
}
fileReader.onerror = (error) => {
reject(error);
}
})
}
const deleteFaceMulti = () => {
let listDelImg = listChecked.url
fetch(`${HOST}/api/face_images/ignore_face`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
// 'Authorization': token
},
body: JSON.stringify({
person_obj_id: crrData._id ? crrData._id : "",
images: listDelImg
})
})
.then(res => res.json())
.then(data => {
if (data.status === 10000) {
let listDetele = crrImages.filter(item => !listDelImg.includes(item));
if (crrIdx >= 1) {
setCrrIdx(crrIdx - 1)
}
setCrrImages(listDetele)
}
})
}
const UserHandle = (e) => {
setCrrData({ ...crrData, [e.target.name]: e.target.value })
}
const onChangeBirthday = (date) => {
setBirthday(date)
setCrrData({ ...crrData, birthday: moment(date).format("YYYY-MM-DD") })
}
if (!crrData) return <>>;
return (
= 1920 ? "modal-size-res" : "modal-size"}`}
aria-labelledby="contained-modal-title-vcenter"
>
{crrData._id ? "Sửa thông tin" : "Thêm mới"}
{crrData &&
}
{/*
*/}
);
}
export default ModalEditLabel;