/* lk-supply.jsx — «Материалы и доставки» для кабинетов сотрудников (прораб первым), в стиле окон кабинета клиента.
   SupplyW — окно по объектам: слева что принять на объекте сегодня-завтра, риски по срокам заказа и выбор клиента, справа ближайшие
   доставки (окно приезда, кто везёт, подтвердил ли клиент), ниже материалы по этапам и принятые поставки. Заказывает закупщик —
   здесь только видно, где он и когда привезут.
   DeliveryAccept — приёмка одной поставки на объекте: позиции (привезли / принято / брак и причина), чек-лист, фото и накладная,
   комментарий; если что-то не так — возврат поставщику (замена или возврат денег). Действия — функции ProjectStore, что и в старом
   кабинете (acceptDelivery, createReturn) через onAccept / onReturn кабинета. Данные — ForemanViews.supply() / delivery().
   Exports on window: LKW.SupplyW, LKW.DeliveryAccept (дописывает в библиотеку lk-widgets.jsx, грузится после неё). */
(function () {
  'use strict';
  const W = window.LKW;
  const { Ic, Modal, CalTabs, rub, plural, dateR, dayLabel, short } = W;
  const CHECKS = [['appearance', 'Товарный вид', 'Упаковка цела, следов влаги и ударов нет'], ['quantity', 'Количество', 'Совпадает с заказом и накладной'], ['noDefects', 'Без брака', 'Вскрыли выборочно, повреждений нет'], ['docs', 'Накладная и фото', 'Приложены к приёмке']];
  const REASONS = [['', 'Причина'], ['damaged', 'повреждено'], ['incomplete', 'некомплект'], ['wrong', 'не тот товар'], ['mixed', 'пересорт']];
  const num = (x) => Math.round((+x || 0) * 100) / 100;
  const qty = (n, u) => num(n).toLocaleString('ru-RU') + (u ? ' ' + u : '');
  const win = (r) => (r.from ? r.from + (r.to ? '–' + r.to : '') : '');
  // «Сегодня», «Завтра», «Вс, 1 нояб.» — коротко, чтобы дата с окном приезда помещалась в строку
  const dayS = (d, t0) => (d === t0 || d === W.isoAdd(t0, 1) ? dayLabel(d, t0) : W.cap(dateR(d, { weekday: 'short', month: 'short' })));
  const bads = (sh, df) => [sh ? 'недостача ' + num(sh) : '', df ? 'брак ' + num(df) : ''].filter(Boolean).join(' · ');
  const items = (list, n) => list.slice(0, n).map((it) => it.name + ' · ' + qty(it.qty, it.unit)).join(', ') + (list.length > n ? ' и ещё ' + (list.length - n) : '');

  /* карточка доставки: когда, к какому этапу, что везут, кто везёт, подтвердил ли клиент окно; «Принять» — у того, что уже везут */
  function DlCard({ r, t0, onAccept, onObject, one }) {
    const soon = r.poId && onAccept;
    const st = r.late ? ['не заказано', 'lw-wst is-late'] : r.status === 'in_transit' ? ['в пути', 'pill-n'] : r.status === 'ordered' ? ['заказано', 'pill-g'] : r.status === 'partial' ? ['частично', 'lw-wst is-late'] : ['по плану', 'pill-d'];
    return (
      <div className={'cv-w cv-dlcard lw-dl' + (soon ? ' is-ask' : '') + (r.late ? ' is-late' : '')}>
        <div className="hd">
          <div style={{ minWidth: 0 }}>
            <div className="t">{r.slot || r.poId ? dayS(r.date, t0) + (win(r) ? ', ' + win(r) : '') : 'Ориентировочно ' + dateR(r.date, { month: 'short' })}</div>
            <div className="lab" style={{ marginTop: 3 }}>{one ? '' : short(r.obj) + ' · '}к этапу «{r.stage}»</div>
          </div>
          <span className={st[1]}>{st[0]}</span>
        </div>
        <div className="lw-dli">{items(r.items, 3)}</div>
        <dl className="cv-meta">
          {[['Статус', r.replaces ? 'замена по возврату ' + r.replaces : r.late ? 'закупщик ещё не заказал, нужно было к ' + dateR(r.needBy) : r.status === 'planned' ? 'закупщик закажет к старту этапа' : r.statusL],
            ['Кто везёт', r.carrier || r.supplier], ['Машина', r.vehicle], ['Окно приезда', r.slotL], ['Встретит', r.meetBy], ['Сумма', r.sum ? rub(r.sum) : '']]
            .filter((x) => x[1]).map((x) => <div key={x[0]}><dt>{x[0]}</dt><dd className={x[0] === 'Окно приезда' && r.slot === 'confirmed' ? 'is-ok' : ''}>{x[1]}</dd></div>)}
        </dl>
        {(soon || onObject) && <div className="lw-dlact">
          {onObject && !one ? <button type="button" className="cv-arrow-btn" onClick={() => onObject(r.pid)}>Объект<Ic n="ne" s={14} /></button> : <span />}
          {soon ? <button type="button" className="lw-btn-k" onClick={() => onAccept(r)}><Ic n="box" s={15} />Принять поставку</button> : null}
        </div>}
      </div>);
  }
  /* материал строкой: что, сколько, к какому этапу, где он сейчас */
  function MatRow({ m, one, right }) {
    return (
      <div className={'lw-mrow' + (m.risk === 'red' ? ' is-late' : '')}>
        <span className="tx"><span className="t">{m.name}</span><span className="lab">{[one ? '' : short(m.obj), m.stage, qty(m.qty, m.unit)].filter(Boolean).join(' · ')}</span></span>
        <span className={'lab' + (m.risk === 'red' ? ' is-late' : '')}>{right}</span>
      </div>);
  }
  // точка статуса материала на этапе: на объекте — зелёная, заказан и в пути — тёмная, не заказан — пустая
  const DOT = { on_site: 'is-on', installed: 'is-on', partial: 'is-part', ordered: 'is-ord', in_transit: 'is-ord', delayed: 'is-late' };

  function SupplyW({ s, t0, pid, onAccept, onObject, view, close }) {
    const objs = s.mats.map((o) => ({ pid: o.pid, obj: o.obj }));
    const [tab, setTab] = React.useState(pid && objs.some((o) => o.pid === pid) ? pid : 'all');
    const [allDone, setAllDone] = React.useState(false);
    const inTab = (x) => tab === 'all' || x.pid === tab;
    const one = tab !== 'all' || objs.length === 1;
    const acc = s.accept.filter(inTab), next = s.next.filter(inTab), risk = s.risk.filter(inTab), cl = s.client.filter(inTab), done = s.done.filter(inTab);
    const counts = { all: s.accept.length + s.next.length }; objs.forEach((o) => { counts[o.pid] = s.accept.concat(s.next).filter((r) => r.pid === o.pid).length; });
    const week = next.filter((r) => r.date <= W.isoAdd(t0, 7));
    // карточками — то, что уже заказано, с анкетой, просрочено или в ближайшие две недели; дальше по графику — строками
    const near = next.filter((r) => r.poId || r.slot || r.late || r.date <= W.isoAdd(t0, 14)), later = next.filter((r) => !near.includes(r));
    return (
      <Modal size="wide" className="lw-sup" title="Материалы и доставки" onClose={close}
        sub={[acc.length ? acc.length + ' ' + plural(acc.length, 'поставка', 'поставки', 'поставок') + ' принять' : 'Принимать сейчас нечего', week.length ? week.length + ' ' + plural(week.length, 'доставка', 'доставки', 'доставок') + ' на неделе' : '', risk.length ? risk.length + ' под риском' : ''].filter(Boolean).join(' · ')}>
        {objs.length > 1 ? <CalTabs label="Объекты" kinds={[['all', 'Все объекты']].concat(objs.map((o) => [o.pid, short(o.obj)]))} tab={tab} setTab={setTab} counts={counts} /> : null}
        <div className="cv-dlgrid lw-supg">
          <aside className="cv-dlside">
            <div className="cv-sec-h"><h2 className="h2">Принять на объекте</h2>{acc.length > 0 && <span className="lab">{acc.length}</span>}</div>
            {acc.length ? acc.map((r) => <DlCard key={r.key} r={r} t0={t0} one={one} onAccept={onAccept} onObject={onObject} />)
              : <div className="cv-w cv-dlcard is-quiet"><div className="lab">Сегодня и завтра ничего не везут. Когда закупщик отправит заказ, поставка появится здесь — с окном приезда и кнопкой приёмки.</div></div>}
            <div className="cv-sec-h lw-sup-h"><h2 className="h2">Под риском</h2>{risk.length > 0 && <span className="lab">{risk.length}</span>}</div>
            {risk.length ? <div className="cv-w lw-plain lw-mlist">{risk.map((m) => <MatRow key={m.pid + m.id} m={m} one={one} right={m.why} />)}</div>
              : <div className="cv-w cv-dlcard is-quiet"><div className="lab">Материалы к ближайшим этапам заказаны вовремя.</div></div>}
            {cl.length > 0 && <React.Fragment>
              <div className="cv-sec-h lw-sup-h"><h2 className="h2">Ждут выбора клиента</h2><span className="lab">{cl.length}</span></div>
              <div className="cv-w lw-plain lw-mlist">{cl.slice(0, 5).map((m) => <MatRow key={m.pid + m.id} m={m} one={one} right={'этап с ' + dateR(m.stageStart, { month: 'short' })} />)}
                {cl.length > 5 && <div className="lab lw-more">и ещё {cl.length - 5}</div>}</div>
              <div className="lab lw-note">Чистовые материалы клиент согласует в своём кабинете. Без его решения закупщик их не заказывает.</div>
            </React.Fragment>}
          </aside>
          <div className="lw-supm">
            <div className="cv-sec-h"><h2 className="h2">Ближайшие доставки</h2>{near.length > 0 && <span className="lab">{near.length}</span>}</div>
            {near.length ? <div className={'cv-dlist' + (near.length === 1 ? ' one' : '')}>{near.map((r) => <DlCard key={r.key} r={r} t0={t0} one={one} onObject={onObject} />)}</div>
              : <div className="empty" style={{ marginTop: 14 }}>В ближайшие две недели доставок нет.</div>}
            {later.length > 0 && <React.Fragment>
              <div className="cv-sec-h lw-sup-h"><h2 className="h2">Дальше по графику</h2><span className="lab">закупщик закажет к старту этапа</span></div>
              <div className="cv-w lw-plain lw-mlist">{later.map((r) => (
                <div key={r.key} className="lw-mrow lw-lrow">
                  <span className="d">{dateR(r.date, { month: 'short' })}</span>
                  <span className="tx"><span className="t">{r.stage}</span><span className="lab">{[one ? '' : short(r.obj), items(r.items, 2)].filter(Boolean).join(' · ')}</span></span>
                  <span className="lab">{rub(r.sum)}</span>
                </div>))}</div>
            </React.Fragment>}
          </div>
        </div>

        <section className="lw-sec" aria-labelledby="lw-mats-h">
          <div className="lw-sech"><h2 className="h2" id="lw-mats-h">Материалы по этапам</h2>
            <span className="lw-mleg"><span><i className="is-on" />на объекте</span><span><i className="is-ord" />заказан или в пути</span><span><i className="is-part" />частично</span><span><i />не заказан</span></span></div>
          {s.mats.filter(inTab).map((o) => (
            <div key={o.pid} className="cv-w lw-mobj">
              {!one && <div className="lw-mobj-h"><button type="button" className="cv-arrow-btn" onClick={() => onObject(o.pid)}>{short(o.obj)}<Ic n="ne" s={14} /></button><span className="lab">на объекте {o.onSiteN} из {o.n}</span></div>}
              {o.stages.map((g) => (
                <div key={g.name} className="lw-mst">
                  <span className="t">{g.name}<span className="lab">с {dateR(g.start, { month: 'short' })}</span></span>
                  <span className="lw-mchips">{g.rows.map((m) => (
                    <span key={m.id} className="lw-mchip" title={m.name + ' — ' + m.procL + (m.approval === 'pending' ? ', ждёт выбора клиента' : '')}>
                      <i className={DOT[m.proc] || ''} />{m.name}<span className="lab">{m.defect ? 'брак ' + qty(m.defect, m.unit) : m.approval === 'pending' ? 'ждёт клиента' : m.procL}</span>
                    </span>))}</span>
                </div>))}
            </div>))}
        </section>

        {done.length > 0 && <section className="lw-sec" aria-labelledby="lw-dld-h">
          <div className="lw-sech"><h2 className="h2" id="lw-dld-h">Принятые поставки</h2><span className="lab">{done.length}</span></div>
          <div className="cv-w lw-plain">{(allDone ? done : done.slice(0, 5)).map((r) => (
            <div key={r.pid + r.key} className="lw-dld">
              <span className="tx"><span className="t">{dateR(String(r.at).slice(0, 10), { month: 'short' })} · {r.stage}</span>
                <span className="lab">{[one ? '' : short(r.obj), r.supplier, r.lines.length + ' поз.'].filter(Boolean).join(' · ')}{r.note ? ' · ' + r.note : ''}</span></span>
              <span className={r.full ? 'lab' : 'lab is-late'}>{r.full ? 'принято полностью' : bads(r.shortage, r.defect) + (r.ret ? ' · ' + (r.ret.resolution === 'replace' ? 'замена' : 'возврат денег') + (r.ret.status === 'closed' ? '' : ', оформляется') : '')}</span>
              {r.photos.length ? <button type="button" className="lw-watt" onClick={() => view(r.photos.map((x) => ({ kind: 'image', url: x.url, name: x.name })), 0)} aria-label="Фото поставки"><img src={r.photos[0].url} alt="" /></button> : <span />}
            </div>))}
            {done.length > 5 && <button type="button" className="cv-arrow-btn lw-more" onClick={() => setAllDone(!allDone)}>{allDone ? 'Свернуть' : 'Все ' + done.length}</button>}
          </div>
        </section>}
      </Modal>);
  }

  /* приёмка поставки: form → (что-то не так) return → done. onAccept(report) и onReturn(spec) возвращают результат стора или { error } */
  function DeliveryAccept({ d, t0, onClose, onAccept, onReturn, onObject, upload, view }) {
    const full0 = () => d.lines.map((l) => ({ ...l, received: l.ordered, accepted: l.ordered, defect: 0, reason: '' }));
    const [rows, setRows] = React.useState(full0);
    const [check, setCheck] = React.useState({ appearance: true, quantity: true, noDefects: true, docs: false });
    const [note, setNote] = React.useState('');
    const [files, setFiles] = React.useState([]);
    const [busy, setBusy] = React.useState(0);
    const [step, setStep] = React.useState('form');
    const [res, setRes] = React.useState(null);
    const [ret, setRet] = React.useState(null);
    const [err, setErr] = React.useState('');
    const set = (i, k, v) => setRows((rs) => rs.map((r, j) => {
      if (j !== i) return r;
      const n = { ...r, [k]: k === 'reason' ? v : Math.max(0, num(v)) };
      if (k === 'received') { n.accepted = Math.min(n.accepted, n.received); n.defect = Math.min(n.defect, n.received - n.accepted); }
      if (k === 'accepted') { n.accepted = Math.min(n.accepted, n.received); n.defect = Math.min(n.defect, n.received - n.accepted); }
      if (k === 'defect') { n.defect = Math.min(n.defect, n.received); n.accepted = Math.min(n.accepted, n.received - n.defect); } // брак вычитается из принятого
      if ((n.defect > 0 || n.received < n.ordered) && !n.reason) n.reason = n.defect > 0 ? 'damaged' : 'incomplete';
      if (n.defect === 0 && n.received >= n.ordered) n.reason = '';
      return n;
    }));
    const short1 = (r) => num(Math.max(0, r.ordered - r.accepted - r.defect));
    const shortage = rows.reduce((a, r) => a + short1(r), 0), defect = rows.reduce((a, r) => a + r.defect, 0);
    const full = shortage === 0 && defect === 0;
    const photos = files.filter((f) => f.role === 'photo');
    const needPhoto = d.finish && !photos.length;
    const pick = (role) => (e) => {
      const list = Array.from(e.target.files || []); e.target.value = '';
      if (!list.length) return;
      setBusy((n) => n + list.length);
      Promise.all(list.map((f) => upload(f).then((u) => ({ name: u.name || f.name, url: u.url, kind: /^image\//.test(f.type) ? 'image' : 'file', role }))))
        .then((ups) => { setFiles((x) => x.concat(ups)); setCheck((c) => ({ ...c, docs: true })); })
        .catch((x) => setErr(x.message || 'Файл не загрузился'))
        .then(() => setBusy((n) => Math.max(0, n - list.length)));
    };
    const go = () => {
      // чек-лист сверяем с цифрами: недостача снимает «количество», брак — «без брака»
      const checklist = { ...check, quantity: check.quantity && shortage === 0, noDefects: check.noDefects && defect === 0 };
      const r = onAccept({ checklist, lines: rows.map((x) => ({ matId: x.matId, received: x.received, accepted: x.accepted, defect: x.defect, reason: x.reason })), note: note.trim(), files });
      if (!r || r.error) { setErr((r && r.error) || 'Не получилось принять поставку'); return; }
      setErr(''); setRes(r);
      if (r.full) { setStep('done'); return; }
      setRet({ resolution: 'replace', note: note.trim(), lines: rows.filter((x) => x.defect > 0 || short1(x) > 0).map((x) => ({ matId: x.matId, name: x.name, unit: x.unit, qty: num(x.defect + short1(x)), reason: x.reason || (x.defect ? 'damaged' : 'incomplete') })) });
      setStep('return');
    };
    const makeReturn = () => {
      const r = onReturn({ kind: rows.every((x) => x.accepted === 0) ? 'full' : 'partial', resolution: ret.resolution, note: ret.note, lines: ret.lines.map((l) => ({ matId: l.matId, qty: l.qty, reason: l.reason })) });
      if (!r || r.error) { setErr((r && r.error) || 'Не получилось оформить возврат'); return; }
      setErr(''); setRet({ ...ret, made: r }); setStep('done');
    };
    const head = [short(d.obj), d.stage ? 'к этапу «' + d.stage + '»' : '', d.supplier].filter(Boolean).join(' · ');
    return (
      <Modal size="wide" className="lw-work lw-dacc" sub={head} title={(d.replaces ? 'Замена по возврату · ' : d.again ? 'Довоз · ' : 'Приёмка поставки · ') + d.poId} onClose={onClose}
        head={onObject ? <button type="button" className="lw-btn-l" onClick={onObject}>Объект</button> : null}>
        <div className="lw-wg">
          <div className="lw-wmain">
            <div className="lw-sech"><h3 className="lw-h3">Что привезли · {d.lines.length} {plural(d.lines.length, 'позиция', 'позиции', 'позиций')}</h3>
              {step === 'form' && !full && <button type="button" className="cv-arrow-btn" onClick={() => setRows(full0())}>Всё как в заказе</button>}</div>
            <div className="cv-w lw-plain lw-alist">{rows.map((r, i) => {
              const sh = short1(r), bad = sh > 0 || r.defect > 0;
              const inp = (k, l) => <label className="lw-afld"><span className="lab">{l}</span><span className="in"><input type="number" min={0} step="any" inputMode="decimal" value={r[k]} disabled={step !== 'form'} onChange={(e) => set(i, k, e.target.value)} aria-label={l + ': ' + r.name} /><span className="u">{r.unit}</span></span></label>;
              return (
                <div key={r.matId} className={'lw-arow' + (bad ? ' is-bad' : '')}>
                  <span className="tx"><span className="t">{r.name}</span><span className="lab">{r.kind === 'finish' ? 'чистовой · ' : ''}в заказе {qty(r.ordered, r.unit)}</span>
                    {bad && <span className="lab is-late">{[sh ? 'недостача ' + qty(sh, r.unit) : '', r.defect ? 'брак ' + qty(r.defect, r.unit) : ''].filter(Boolean).join(' · ')}</span>}</span>
                  {inp('received', 'Привезли')}{inp('accepted', 'Принято')}{inp('defect', 'Брак')}
                  <select className="lw-asel" value={r.reason} disabled={step !== 'form' || !bad} onChange={(e) => set(i, 'reason', e.target.value)} aria-label={'Причина: ' + r.name}>{REASONS.map((o) => <option key={o[0]} value={o[0]}>{o[1]}</option>)}</select>
                </div>);
            })}</div>
            <div className="lw-sech lw-aph-h"><h3 className="lw-h3">Фото и накладная{d.finish ? <span className="lab"> · в поставке чистовые материалы, фото обязательно</span> : null}</h3></div>
            <div className={'lw-aph' + (files.length ? ' has' : '')}>
              {files.length > 0 && <div className="lw-wstrip lw-afiles">{files.map((f, i) => f.kind === 'image'
                ? <button type="button" key={i} onClick={() => view(files.filter((x) => x.kind === 'image').map((x) => ({ kind: 'image', url: x.url, name: x.name })), files.filter((x) => x.kind === 'image').indexOf(f))} aria-label={'Открыть ' + f.name} className="on"><img src={f.url} alt="" />{f.role === 'invoice' ? <span>накл.</span> : null}</button>
                : <span key={i} className="lw-afile"><Ic n="doc" s={16} />{f.name}</span>)}</div>}
              {!files.length && <span className="lab">Снимите упаковку и этикетки, повреждения крупно, и приложите накладную — их увидят закупщик и, если всё в порядке, клиент.</span>}
              {step === 'form' && <div className="lw-aup">
                <label className="lw-btn-l"><Ic n="camera" s={15} />Фото поставки<input type="file" accept="image/*" multiple hidden onChange={pick('photo')} /></label>
                <label className="lw-btn-l"><Ic n="doc" s={15} />Накладная<input type="file" accept="image/*,application/pdf" multiple hidden onChange={pick('invoice')} /></label>
                {busy > 0 && <span className="lab">Загружаем {busy}…</span>}
              </div>}
            </div>
          </div>
          <div className="cv-w lw-wside lw-aside">
            <div className="lw-wf">
              <span><b>{d.date ? dayS(d.date, t0) : '—'}</b><span className="lab">{[win(d), d.meetBy ? 'встречает ' + d.meetBy.toLowerCase() : ''].filter(Boolean).join(' · ') || 'привезут'}</span></span>
              <span><b className="lw-acar">{d.carrier || '—'}</b><span className="lab">{d.phone || 'кто везёт'}</span></span>
            </div>
            {step === 'form' && <React.Fragment>
              <div><div className="lw-wsh">Чек-лист приёмки</div>
                {CHECKS.map((c) => { const off = (c[0] === 'quantity' && shortage > 0) || (c[0] === 'noDefects' && defect > 0); // цифры важнее галочки
                  return <label key={c[0]} className={'lw-ack' + (check[c[0]] && !off ? ' on' : '') + (off ? ' is-off' : '')}><input type="checkbox" checked={!!check[c[0]] && !off} disabled={off} onChange={() => setCheck((x) => ({ ...x, [c[0]]: !x[c[0]] }))} /><span><span className="t">{c[1]}</span><span className="lab">{off ? (c[0] === 'quantity' ? 'Есть недостача' : 'Есть брак') : c[2]}</span></span></label>; })}</div>
              <div className="lw-wdec"><label className="lw-wsh" htmlFor="lw-anote">Комментарий</label>
                <textarea id="lw-anote" rows={2} value={note} onChange={(e) => setNote(e.target.value)} placeholder="Что не так с поставкой, номер накладной…" />
                <div className={'lab' + (full ? '' : ' is-late')}>{full ? 'Всё привезли как в заказе.' : W.cap(bads(shortage, defect)) + ' — после приёмки оформим возврат.'}</div>
                {err && <div className="lab is-late" role="alert">{err}</div>}
                <div className="lw-wbtns"><button type="button" className="lw-btn-k" disabled={busy > 0 || needPhoto} onClick={go}><Ic n="check" s={14} />{full ? 'Принять поставку' : 'Принять частично'}</button></div>
                {needPhoto && <div className="lab" style={{ marginTop: 6 }}>Добавьте фото поставки — в ней чистовые материалы.</div>}</div>
            </React.Fragment>}
            {step === 'return' && ret && <div className="lw-wdec">
              <div className="lw-wsh">Возврат поставщику</div>
              {ret.lines.map((l, i) => <div key={l.matId} className="lw-aret"><span className="tx"><span className="t">{l.name}</span><span className="lab">{(REASONS.find((x) => x[0] === l.reason) || ['', ''])[1]}</span></span>
                <span className="in"><input type="number" min={0} step="any" value={l.qty} aria-label={'К возврату: ' + l.name} onChange={(e) => setRet({ ...ret, lines: ret.lines.map((y, j) => (j === i ? { ...y, qty: Math.max(0, num(e.target.value)) } : y)) })} /><span className="u">{l.unit}</span></span></div>)}
              <div className="lw-seg2" role="radiogroup" aria-label="Решение по возврату">
                {[['replace', 'Замена', 'Поставщик довезёт — новый заказ'], ['refund', 'Возврат денег', 'Сумма заказа уменьшится']].map((o) => (
                  <button type="button" key={o[0]} role="radio" aria-checked={ret.resolution === o[0]} className={ret.resolution === o[0] ? 'on' : ''} onClick={() => setRet({ ...ret, resolution: o[0] })}><span className="t">{o[1]}</span><span className="lab">{o[2]}</span></button>))}
              </div>
              <textarea rows={2} value={ret.note} onChange={(e) => setRet({ ...ret, note: e.target.value })} placeholder="Комментарий поставщику" aria-label="Комментарий поставщику" />
              {err && <div className="lab is-late" role="alert">{err}</div>}
              <div className="lw-wbtns"><button type="button" className="lw-btn-l" onClick={() => setStep('done')}>Без возврата</button><button type="button" className="lw-btn-k" onClick={makeReturn}>Оформить возврат</button></div>
            </div>}
            {step === 'done' && <div className="lw-adone" role="status">
              <span className={'ic' + (res && res.full ? '' : ' is-late')}><Ic n={res && res.full ? 'check' : 'box'} s={22} /></span>
              <div className="t">{res && res.full ? 'Поставка принята' : 'Принято частично'}</div>
              <div className="lab">{res && res.full ? 'Материалы на объекте, событие ушло в ленту проекта.' : W.cap(bads(res ? res.shortage : 0, res ? res.defect : 0)) + '.' + (ret && ret.made ? ' Возврат оформлен: ' + (ret.resolution === 'replace' ? 'поставщик довезёт замену.' : 'сумму заказа уменьшат.') : ' Возврат не оформляли — закупщик увидит недостачу в заказе.')}</div>
              <div className="lw-wbtns"><button type="button" className="lw-btn-k" onClick={onClose}>Готово</button></div>
            </div>}
          </div>
        </div>
      </Modal>);
  }

  W.SupplyW = SupplyW;
  W.DeliveryAccept = DeliveryAccept;
})();