qcast-front/src/components/estimate/popup/ProductFeaturesPop.jsx
2025-02-05 16:54:50 +09:00

68 lines
2.3 KiB
JavaScript

'use client'
import { useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
export default function ProductFeaturesPop({ popShowSpecialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) {
const [showSpecialNoteList, setShowSpecialNoteList] = useState([])
const { getMessage } = useMessage()
useEffect(() => {
let pushData = []
popShowSpecialNoteList.forEach((row) => {
let option = showProductFeatureData.split('、')
option.forEach((row2) => {
if (row.code === row2) {
pushData.push(row)
}
})
})
setShowSpecialNoteList(pushData)
}, [popShowSpecialNoteList, showProductFeatureData])
return (
<div className="modal-popup">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h1 className="title">{getMessage('estimate.detail.productFeaturesPopup.title')}</h1>
<button
type="button"
className="modal-close"
onClick={() => {
setProductFeaturesPopupOpen(false)
}}
>
{getMessage('estimate.detail.productFeaturesPopup.close')}
</button>
</div>
<div className="modal-body">
<div className="modal-body-inner border">
<div className="calculation-estimate usemodal">
{showSpecialNoteList.length > 0 &&
showSpecialNoteList.map((row) => {
return (
<dl key={row.code}>
<dt>{row.codeNm}</dt>
<dd dangerouslySetInnerHTML={{ __html: row.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
</dl>
)
})}
</div>
</div>
<div className="footer-btn-wrap">
<button
type="button"
className="btn-origin navy"
onClick={() => {
setProductFeaturesPopupOpen(false)
}}
>
{getMessage('estimate.detail.productFeaturesPopup.close')}
</button>
</div>
</div>
</div>
</div>
</div>
)
}