641 lines
41 KiB
JavaScript
641 lines
41 KiB
JavaScript
|
||
import SingleDatePicker from "../common/datepicker/SingleDatePicker";
|
||
|
||
import FileDownOptionPop from "./estimatepop/FileDownOptionPop";
|
||
import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop";
|
||
|
||
import ReactSelect from "../common/reactselect/ReactSelect";
|
||
import { useState } from "react";
|
||
import EstimateCopyPop from "./estimatepop/EstimateCopyPop";
|
||
|
||
export default function CanvasEstimate() {
|
||
const [hidden, setHidden] = useState(false);
|
||
return(
|
||
<div className="sub-content estimate">
|
||
<div className="sub-content-inner">
|
||
<div className="sub-content-box">
|
||
<div className="sub-table-box">
|
||
<div className="estimate-list-wrap one">
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">品番</div>
|
||
<div className="estimate-name">RX524231020006 (Plan No: 1)</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">見積書番号</div>
|
||
<div className="estimate-name">5242310200065242</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">登録日</div>
|
||
<div className="estimate-name">2024.09.28</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">変更日時</div>
|
||
<div className="estimate-name">2024.09.28 06:36</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="sub-content-box">
|
||
<div className="sub-table-box">
|
||
<div className="table-box-title-wrap">
|
||
<div className="title-wrap">
|
||
<h3>基本情報</h3>
|
||
</div>
|
||
</div>
|
||
<div className="common-table bt-able">
|
||
<table>
|
||
<colgroup>
|
||
<col style={{width : '160px'}}/>
|
||
<col />
|
||
<col style={{width : '160px'}}/>
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<th>一次販売店名</th>
|
||
<td>
|
||
鈴与商事株式会社
|
||
</td>
|
||
<th>見積日 <span className="important">*</span></th>
|
||
<td>
|
||
<div className="date-picker" style={{width: '350px'}}>
|
||
<SingleDatePicker/>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>二次販売店名</th>
|
||
<td>
|
||
2次店販売店名表示
|
||
</td>
|
||
<th>担当者 <span className="important">*</span></th>
|
||
<td>
|
||
<div className="input-wrap" style={{width: '350px'}}>
|
||
<input type="text" className="input-light" defaultValue={'商品情報で入力した担当者名を表示'}/>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>案件名 <span className="important">*</span></th>
|
||
<td colSpan={3}>
|
||
<div className="form-flex-wrap">
|
||
<div className="input-wrap mr5" style={{width: '610px'}}>
|
||
<input type="text" className="input-light" defaultValue={'三油商会PITステーション名東一社'}/>
|
||
</div>
|
||
<div className="input-wrap" style={{width: '200px'}}>
|
||
<input type="text" className="input-light" defaultValue={'案件'}/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>メモ</th>
|
||
<td colSpan={3}>
|
||
商品情報から入力したメモを表示
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>注文分類 <span className="important">*</span></th>
|
||
<td colSpan={3}>
|
||
<div className="radio-wrap">
|
||
<div className="d-check-radio light mr10">
|
||
<input type="radio" name="radio01" id="ra01" />
|
||
<label htmlFor="ra01">住宅PKG</label>
|
||
</div>
|
||
<div className="d-check-radio light">
|
||
<input type="radio" name="radio01" id="ra02" />
|
||
<label htmlFor="ra02">積上げ( YJOD )</label>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>屋根材・仕様施工 </th>
|
||
<td colSpan={3}>
|
||
<div className="form-flex-wrap mb5">
|
||
<div className="input-wrap mr5" style={{width: '610px'}}>
|
||
<input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
|
||
</div>
|
||
<div className="input-wrap" style={{width: '200px'}}>
|
||
<input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
|
||
</div>
|
||
</div>
|
||
<div className="form-flex-wrap mb5">
|
||
<div className="input-wrap mr5" style={{width: '610px'}}>
|
||
<input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
|
||
</div>
|
||
<div className="input-wrap" style={{width: '200px'}}>
|
||
<input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
|
||
</div>
|
||
</div>
|
||
<div className="form-flex-wrap mb5">
|
||
<div className="input-wrap mr5" style={{width: '610px'}}>
|
||
<input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
|
||
</div>
|
||
<div className="input-wrap" style={{width: '200px'}}>
|
||
<input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
|
||
</div>
|
||
</div>
|
||
<div className="form-flex-wrap">
|
||
<div className="input-wrap mr5" style={{width: '610px'}}>
|
||
<input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
|
||
</div>
|
||
<div className="input-wrap" style={{width: '200px'}}>
|
||
<input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>備考</th>
|
||
<td colSpan={3}>
|
||
<div className="input-wrap">
|
||
<input type="text" className="input-light" />
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="table-box-title-wrap">
|
||
<div className="title-wrap">
|
||
<h3>ファイル添付</h3>
|
||
<div className="d-check-box light mr5">
|
||
<input type="checkbox" id="ch99" />
|
||
<label htmlFor="ch99" style={{color: '#101010'}}>後日資料提出</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="common-table mb10">
|
||
<table>
|
||
<colgroup>
|
||
<col style={{width: '160px'}}/>
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<th>ファイル添付</th>
|
||
<td>
|
||
<div className="drag-file-box">
|
||
<div className="btn-area">
|
||
<label className="file-upload" htmlFor="img">ファイル選択</label>
|
||
<input type="file" name="" id="img" style={{display: 'none'}}/>
|
||
</div>
|
||
<div className="drag-file-area">
|
||
<p>Drag file here</p>
|
||
<ul className="file-list">
|
||
<li className="file-item"><span>選択したファイル名 <button className="delete"></button></span></li>
|
||
<li className="file-item"><span>選択したファイル名 <button className="delete"></button></span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="common-table bt-able">
|
||
<table>
|
||
<colgroup>
|
||
<col style={{width: '160px'}}/>
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<th>添付ファイル一覧</th>
|
||
<td>
|
||
<div className="drag-file-box">
|
||
<ul className="file-list">
|
||
<li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
|
||
<li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
|
||
</ul>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="table-box-title-wrap">
|
||
<div className="title-wrap">
|
||
<h3 className="product">見積もりの具体的な</h3>
|
||
<div className="product_tit">製品情報</div>
|
||
</div>
|
||
<div className="left-unit-box">
|
||
<button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>
|
||
<button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>
|
||
</div>
|
||
</div>
|
||
<div className={`estimate-check-wrap ${hidden ? 'hide':''}`}>
|
||
<div className="estimate-check-inner">
|
||
<div className="special-note-check-wrap">
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch01" />
|
||
<label htmlFor="ch01">共通 </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch02" />
|
||
<label htmlFor="ch02">積上げ(YJOD) </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch03" disabled checked/>
|
||
<label htmlFor="ch03">出力制御の時 (中三電以外)</label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch04" />
|
||
<label htmlFor="ch04">北面設置 </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch05" />
|
||
<label htmlFor="ch05">塩害地域 </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch06" />
|
||
<label htmlFor="ch06">積雪地域 </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch07" />
|
||
<label htmlFor="ch07">屋根材・寸法・レイアウト </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch08" />
|
||
<label htmlFor="ch08">施工関連 </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item act">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch09" />
|
||
<label htmlFor="ch09">別途費用</label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch10" />
|
||
<label htmlFor="ch10">過積載</label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch11" />
|
||
<label htmlFor="ch11">パワコン・蓄電池 PCS </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch12" />
|
||
<label htmlFor="ch12">架台</label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch13" />
|
||
<label htmlFor="ch13">Q.SUPREME </label>
|
||
</div>
|
||
</div>
|
||
<div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch14" />
|
||
<label htmlFor="ch14">HEMS</label>
|
||
</div>
|
||
</div>
|
||
{/* <div className="special-note-check-item">
|
||
<div className="d-check-box light">
|
||
<input type="checkbox" id="ch15" />
|
||
<label htmlFor="ch15">概算見積概算見積</label>
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
<div className="calculation-estimate">
|
||
<dl>
|
||
<dt>ダイドハント (D Y 4)(DY5)</dt>
|
||
<dd>・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。 </dd>
|
||
<dd>・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 </dd>
|
||
<dd>・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。 </dd>
|
||
<dd>・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>ワンカチ </dt>
|
||
<dd>・風速は46ｍ/sを超える地域は設置不可となります。 </dd>
|
||
<dd>・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。 </dd>
|
||
<dd>・屋根材板厚は0.6㎜以上として御見積もり作成しております。</dd>
|
||
<dd>ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、</dd>
|
||
<dd>弊社システム保証対象外になりますので充分 ご注意下さい 。"</dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table-box-title-wrap">
|
||
<div className="title-wrap">
|
||
<h3>製品情報</h3>
|
||
</div>
|
||
</div>
|
||
<div className="esimate-wrap">
|
||
<div className="estimate-list-wrap one">
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">数量 (PCS)</div>
|
||
<div className="estimate-name blue">74</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">容量 (Kw)</div>
|
||
<div className="estimate-name blue">8300</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">供給価格</div>
|
||
<div className="estimate-name blue">6,798,900</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">税 (10％)</div>
|
||
<div className="estimate-name blue">679,890</div>
|
||
</div>
|
||
<div className="estimate-box">
|
||
<div className="estimate-tit">総額</div>
|
||
<div className="estimate-name red">7,478,790</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="common-table bt-able">
|
||
<table>
|
||
<colgroup>
|
||
<col style={{width : '160px'}}/>
|
||
<col />
|
||
<col style={{width : '160px'}}/>
|
||
<col />
|
||
<col style={{width : '160px'}}/>
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<th>住宅PKG単価 (W)<span className="important">*</span></th>
|
||
<td>
|
||
<div className="input-wrap">
|
||
<input type="text" className="input-light" />
|
||
</div>
|
||
</td>
|
||
<th>PKG容量(Kw)</th>
|
||
<td>
|
||
(モジュール容量×数量)÷1000
|
||
</td>
|
||
<th>PKG金額</th>
|
||
<td>
|
||
PKG単価 (W)×PKG容量(W)
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="estimate-product-option">
|
||
<div className="product-price-wrap">
|
||
<div className="product-price-tit">価格表示</div>
|
||
<div className="select-wrap">
|
||
<select className="select-light" name="" id="" >
|
||
<option>定価</option>
|
||
</select>
|
||
</div>
|
||
<button className="btn-origin grey ml5">Pricing</button>
|
||
</div>
|
||
<div className="product-edit-wrap">
|
||
<ul className="product-edit-explane">
|
||
<li className="explane-item item01"><span className="ico"></span>製品価格 OPEN</li>
|
||
<li className="explane-item item02"><span className="ico"></span>追加, 変更資材</li>
|
||
<li className="explane-item item03"><span className="ico"></span>添付必須</li>
|
||
<li className="explane-item item04"><span className="ico"></span>クリックして製品の特異性を確認する</li>
|
||
</ul>
|
||
<div className="product-edit-btn">
|
||
<button className="btn-origin navy mr5"><span className='plus'></span> 製品を追加</button>
|
||
<button className="btn-origin grey"><span className='minus'></span>製品削除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="esimate-table">
|
||
<table>
|
||
<colgroup>
|
||
<col width={50}/>
|
||
<col width={100}/>
|
||
<col/>
|
||
<col width={200}/>
|
||
<col width={100}/>
|
||
<col width={100}/>
|
||
<col width={200}/>
|
||
<col width={240}/>
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
<div className="d-check-box pop no-text">
|
||
<input type="checkbox" id="ch97" disabled/>
|
||
<label htmlFor="ch97"></label>
|
||
</div>
|
||
</th>
|
||
<th>アイテム</th>
|
||
<th>品番</th>
|
||
<th>型板</th>
|
||
<th>数量</th>
|
||
<th>単位</th>
|
||
<th>単価</th>
|
||
<th>金額 (税別別)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td className="al-c">
|
||
<div className="d-check-box light no-text">
|
||
<input type="checkbox" id="ch98" />
|
||
<label htmlFor="ch98"></label>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">100</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="select-wrap mr5">
|
||
<ReactSelect/>
|
||
</div>
|
||
<div className="btn-area">
|
||
<span className="tb_ico change_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="name">HNW-MC4-CHN30</div>
|
||
<div className="icon-wrap">
|
||
<span className="tb_ico file_check"></span>
|
||
<button className="grid-tip"></button>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="input-wrap" style={{width: '100%'}}>
|
||
<input type="text" className="input-light al-r" defaultValue={'20'}/>
|
||
</div>
|
||
</td>
|
||
<td>セット</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="input-wrap mr5">
|
||
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
|
||
</div>
|
||
<div className="btn-area">
|
||
<span className="tb_ico open_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">5,561,000</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="al-c">
|
||
<div className="d-check-box light no-text">
|
||
<input type="checkbox" id="ch98" />
|
||
<label htmlFor="ch98"></label>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">100</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="select-wrap mr5">
|
||
<ReactSelect/>
|
||
</div>
|
||
<div className="btn-area">
|
||
<span className="tb_ico change_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="name">HNW-MC4-CHN30</div>
|
||
<div className="icon-wrap">
|
||
<button className="grid-tip"></button>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="input-wrap" style={{width: '100%'}}>
|
||
<input type="text" className="input-light al-r" defaultValue={'20'}/>
|
||
</div>
|
||
</td>
|
||
<td>セット</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="input-wrap mr5">
|
||
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
|
||
</div>
|
||
<div className="btn-area">
|
||
<span className="tb_ico open_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">5,561,000</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="al-c">
|
||
<div className="d-check-box light no-text">
|
||
<input type="checkbox" id="ch98" />
|
||
<label htmlFor="ch98"></label>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">100</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="select-wrap mr5">
|
||
<ReactSelect/>
|
||
</div>
|
||
<div className="btn-area">
|
||
<span className="tb_ico change_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="name">HNW-MC4-CHN30</div>
|
||
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="input-wrap" style={{width: '100%'}}>
|
||
<input type="text" className="input-light al-r" defaultValue={'20'}/>
|
||
</div>
|
||
</td>
|
||
<td>セット</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="input-wrap mr5">
|
||
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
|
||
</div>
|
||
<div className="btn-area">
|
||
<span className="tb_ico open_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">5,561,000</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="al-c">
|
||
<div className="d-check-box light no-text">
|
||
<input type="checkbox" id="ch98" />
|
||
<label htmlFor="ch98"></label>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">100</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="select-wrap ">
|
||
<ReactSelect/>
|
||
</div>
|
||
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="name">HNW-MC4-CHN30</div>
|
||
<div className="icon-wrap">
|
||
<span className="tb_ico file_check"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="input-wrap" style={{width: '100%'}}>
|
||
<input type="text" className="input-light al-r" defaultValue={'20'}/>
|
||
</div>
|
||
</td>
|
||
<td>セット</td>
|
||
<td>
|
||
<div className="form-flex-wrap">
|
||
<div className="input-wrap mr5">
|
||
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
|
||
</div>
|
||
|
||
</div>
|
||
</td>
|
||
<td className="al-r">5,561,000</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 제품 특이사항 */}
|
||
{/* <ProductFeaturesPop/> */}
|
||
|
||
{/* 문서 다운로드 옵션 */}
|
||
{/* <FileDownOptionPop/> */}
|
||
|
||
{/* 견적복사 */}
|
||
{/* <EstimateCopyPop/> */}
|
||
</div>
|
||
)
|
||
} |