https://motobu-farm.com/cdn/shop/t/83/assets/section-traceability-search.js?v=33025787011394212081780539015

1class TraceabilitySearch extends HTMLElement{constructor(){super(),this.apiEndpoint=this.dataset.apiEndpoint||"",this.detailBaseUrlPc=this.dataset.detailBaseUrlPc||this.dataset.detailBaseUrl||"",this.detailBaseUrlSp=this.dataset.detailBaseUrlSp||this.detailBaseUrlPc,this.maxCattle=parseInt(this.dataset.maxCattle,10)||5,this.i18n=this._parseI18n(this.dataset.i18n),this.form=this.querySelector("[data-traceability-form]"),this.input=this.querySelector("[data-traceability-input]"),this.submitBtn=this.querySelector("[data-traceability-submit]"),this.submitLabel=this.querySelector("[data-traceability-submit-label]"),this.resultEl=this.querySelector("[data-traceability-result]"),this.idInfoActionEl=this.querySelector("[data-traceability-id-info-action]"),this._defaultSubmitLabel=this.submitLabel?this.submitLabel.textContent:"",this._isLoading=!1,this._abortController=null;const breakpoint=parseInt(this.dataset.mobileBreakpoint,10)||767;this._mql=typeof window<"u"&&window.matchMedia?window.matchMedia(`(max-width: ${breakpoint}px)`):null,this._onMediaChange=this._onMediaChange.bind(this),this.form&&this.form.addEventListener("submit",this._onSubmit.bind(this))}connectedCallback(){this._mql&&(this._updateAllDetailLinks(),this._mql.addEventListener?this._mql.addEventListener("change",this._onMediaChange):this._mql.addListener&&this._mql.addListener(this._onMediaChange))}disconnectedCallback(){this._abortController&&this._abortController.abort(),this._mql&&(this._mql.removeEventListener?this._mql.removeEventListener("change",this._onMediaChange):this._mql.removeListener&&this._mql.removeListener(this._onMediaChange))}_onMediaChange(){this._updateAllDetailLinks()}_updateAllDetailLinks(){if(this.idInfoActionEl){const pc=this.idInfoActionEl.dataset.hrefPc||"",sp=this.idInfoActionEl.dataset.hrefSp||pc,url=this._getUrlForViewport(pc,sp);url&&this.idInfoActionEl.setAttribute("href",url)}const cattleLinks=this.querySelectorAll(".traceability-cattle-list__link");if(cattleLinks.length){const url=this._getUrlForViewport(this.detailBaseUrlPc,this.detailBaseUrlSp);cattleLinks.forEach(link=>{url&&link.setAttribute("href",url)})}}_getUrlForViewport(pcUrl,spUrl){return(this._mql?this._mql.matches:!1)?spUrl||pcUrl||"":pcUrl||spUrl||""}_onSubmit(event){if(event.preventDefault(),this._isLoading)return;const lot=(this.input.value||"").trim();if(!lot){this.input.focus();return}this._search(lot)}async _search(lot){if(!this.apiEndpoint){this._renderError(this.i18n.error);return}this._setLoading(!0),this._renderLoading(),this._abortController&&this._abortController.abort(),this._abortController=new AbortController;try{const url=`${this.apiEndpoint}${this.apiEndpoint.includes("?")?"&":"?"}lot=${encodeURIComponent(lot)}`,response=await fetch(url,{method:"GET",redirect:"follow",signal:this._abortController.signal});if(!response.ok)throw new Error(`HTTP ${response.status}`);const data=await response.json();console.log("data",data,"lot",lot),this._handleResponse(data,lot)}catch(err){if(err.name==="AbortError")return;console.error("[traceability-search] fetch failed:",err),this._renderError(this.i18n.error)}finally{this._setLoading(!1)}}_handleResponse(data,lot){if(!data||typeof data!="object"){this._renderError(this.i18n.error);return}

1switch(data.status){case"found":this._renderFound(data,lot);break;case"not_found":this._renderNotFound();break;case"error":this._renderError(data.message||this.i18n.error);break;default:this._renderError(this.i18n.error)}}_renderLoading(){this.resultEl&&(this.resultEl.hidden=!1,this.resultEl.innerHTML=`
2      <div class="traceability-search-result__status" role="status">
3        ${this._escape(this.i18n.loading)}
4      </div>
5    `)}_renderNotFound(){this.resultEl&&(this.resultEl.hidden=!1,this.resultEl.innerHTML=`
6      <div class="traceability-search-result__status" role="status">
7        ${this._escape(this.i18n.notFound)}
8      </div>
9    `)}_renderError(message){this.resultEl&&(this.resultEl.hidden=!1,this.resultEl.innerHTML=`
10      <div class="traceability-search-result__status traceability-search-result__status--error" role="alert">
11        ${this._escape(message||this.i18n.error)}
12      </div>
13    `)}_renderFound(data,lot){if(!this.resultEl)return;const lotValue=data.lot||lot||"",processingDate=data.date||data.processing_date||"",cattleIds=Array.isArray(data.cattle)?data.cattle:Array.isArray(data.cattle_ids)?data.cattle_ids:[],cattleCount=data.cattle_count!=null?String(data.cattle_count):String(cattleIds.length),staff=data.staff||"",note=data.note!=null&&String(data.note).length>0?String(data.note):this.i18n.noNote,cattleListHtml=this._renderCattleList(cattleIds);this.resultEl.hidden=!1,this.resultEl.innerHTML=`
14      <article class="traceability-result-card" aria-labelledby="${this.id||"traceability-search"}-result-heading">
15        <header class="traceability-result-card__heading">
16          <span class="traceability-result-card__heading-label">
17            ${this._escape(this.i18n.resultHeading)} / ${this._escape(this.i18n.lotPrefix)}
18          </span>
19          <span class="traceability-result-card__heading-value" id="${this.id||"traceability-search"}-result-heading">
20            ${this._escape(lotValue)}
21          </span>
22        </header>
23
24        <dl class="traceability-result-card__list">
25          <div class="traceability-result-card__row">
26            <dt>${this._escape(this.i18n.processingDate)}</dt>
27            <dd>${this._escape(processingDate)}</dd>
28          </div>
29
30          <div class="traceability-result-card__row">
31            <dt>${this._escape(this.i18n.cattleCount)}</dt>
32            <dd>${this._escape(cattleCount)}${this._escape(this.i18n.cattleUnit)}</dd>
33          </div>
34
35          <div class="traceability-result-card__row">
36            <dt>${this._escape(this.i18n.cattleList)}</dt>
37            <dd>${cattleListHtml}</dd>
38          </div>
39
40          <div class="traceability-result-card__row">
41            <dt>${this._escape(this.i18n.staff)}</dt>
42            <dd>${this._escape(staff)}</dd>
43          </div>
44
45          <div class="traceability-result-card__row">
46            <dt>${this._escape(this.i18n.note)}</dt>
47            <dd>${this._escape(note)}</dd>
48          </div>
49        </dl>
50      </article>
51    `}_renderCattleList(cattleIds){if(!cattleIds.length)return`<span>${this._escape(this.i18n.noNote)}</span>`;const limited=cattleIds.slice(0,this.maxCattle),detailUrl=this._getUrlForViewport(this.detailBaseUrlPc,this.detailBaseUrlSp)||"#";return`<ul class="traceability-cattle-list" role="list">${limited.map(id=>`
52        <li class="traceability-cattle-list__item">
53          <span class="traceability-cattle-list__id">${this._escape(String(id))}</span>
54          <a class="traceability-cattle-list__link"
55             href="${this._escape(detailUrl)}"
56             target="_blank"
57             rel="noopener noreferrer">
58            <span>${this._escape(this.i18n.detailLink)}</span>
59            <svg aria-hidden="true" focusable="false" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
60              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
61              <polyline points="15 3 21 3 21 9"/>
62              <line x1="10" y1="14" x2="21" y2="3"/>
63            </svg>
64          </a>
65        </li>
66      `).join("")}</ul>`}_setLoading(isLoading){this._isLoading=isLoading,this.submitBtn&&(isLoading?(this.submitBtn.setAttribute("aria-busy","true"),this.submitBtn.setAttribute("disabled",""),this.submitLabel&&(this.submitLabel.textContent=this.i18n.loading||this._defaultSubmitLabel)):(this.submitBtn.removeAttribute("aria-busy"),this.submitBtn.removeAttribute("disabled"),this.submitLabel&&(this.submitLabel.textContent=this._defaultSubmitLabel)))}_parseI18n(raw){const fallback={processingDate:"\u52A0\u5DE5\u65E5",cattleCount:"\u4F7F\u7528\u500B\u4F53",cattleList:"\u8B58\u5225\u756A\u53F7\u4E00\u89A7",staff:"\u62C5\u5F53\u8005",note:"\u5099\u8003",detailLink:"\u8A73\u7D30\u3092\u898B\u308B",notFound:"\u30ED\u30C3\u30C8\u756A\u53F7\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093",error:"\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002\u6642\u9593\u3092\u304A\u3044\u3066\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",loading:"\u691C\u7D22\u4E2D...",submit:"\u691C\u7D22\u3059\u308B",cattleUnit:"\u982D",resultHeading:"\u691C\u7D22\u7D50\u679C",lotPrefix:"\u30ED\u30C3\u30C8\u756A\u53F7",noNote:"\u2014"};if(!raw)return fallback;try{const parsed=JSON.parse(raw);return Object.assign({},fallback,parsed)}catch(err){return console.warn("[traceability-search] invalid i18n JSON, using fallback",err),fallback}}_escape(value){return value==null?"":String(value).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}}customElements.get("traceability-search")||customElements.define("traceability-search",TraceabilitySearch);
67//# sourceMappingURL=/cdn/shop/t/83/assets/section-traceability-search.js.map?v=33

67025787011394212081780539015