function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useCallback, useMemo } from 'react';
import { PisellDateTimeDisplay, PisellTimeRangeDisplay } from '@pisell/materials';
import { locales } from '@pisell/utils';
import ClientName from "../../clientName";
import { BOOKING_STATUS_COLOR_MAP, getFilterButtonList, getBookingStatusMap, getBookingPlatformMap, getBookingHeaderLabels, getSortList } from "../config/booking";
import { getPaymentStatusMap, PAYMENT_STATUS_COLOR_MAP } from "../config/order";
import { getBusinessLabelMap, BUSINESS_COLOR_MAP } from "../config";
import { Tag, formatAmount, getDisplayLines, textStyles, buildDateTime, normalizeList, parseJson, formatPhone } from "./perspectiveUtils";
import useEngineContext from "../../../hooks/useEngineContext";
import BookingNotesPreview from "../components/BookingNotesPreview";
import BookingFormsPreview from "../components/BookingFormsPreview";
import { createNoteApis } from "../serve";
function getBookingType(record) {
  var _record$order$metadat, _record$metadata;
  if ((record === null || record === void 0 || (_record$order$metadat = record.order.metadata) === null || _record$order$metadat === void 0 ? void 0 : _record$order$metadat.appointment_structure_version) === '2.0') {
    return 'pisell2';
  }
  if (record !== null && record !== void 0 && (_record$metadata = record.metadata) !== null && _record$metadata !== void 0 && _record$metadata.multiple_resource_flag) {
    return 'pisell2';
  }
  if (record.parent_id > 0 && record.item_type !== 'recurring_booking') {
    return 'pisell2';
  }
  return 'pisell1';
}
export var useBookingPerspective = function useBookingPerspective(params) {
  var _context$appHelper, _context$engine;
  var context = useEngineContext();
  var utils = context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils;
  /** 监听 locale，切换语言时重新计算 label/filter/sort 等文案 */
  var locale = context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale;

  /**
   * 静态部分：label maps、uniqueTables 等重计算量大的数据，
   * 仅在 relationTables 变化时重新计算。
   */
  var staticData = useMemo(function () {
    var BOOKING_STATUS_LABEL_MAP = getBookingStatusMap();
    var BOOKING_PLATFORM_LABEL_MAP = getBookingPlatformMap();
    var PAYMENT_STATUS_LABEL_MAP = getPaymentStatusMap();
    var BUSINESS_LABEL_MAP = getBusinessLabelMap();
    var bookingLabels = getBookingHeaderLabels();
    var _ref = params || {},
      relationTables = _ref.relationTables;
    /** API / 预览占位可能返回非数组 truthy 值（如 {}），不能用 `|| []` */
    var relationTablesList = Array.isArray(relationTables) ? relationTables : [];
    var _relationTables = relationTablesList.filter(function (item) {
      return ['appointment_booking', 'ticket', 'party_room', 'therapist', 'table-order', 'voucher_ticket', 'mobile_order'].includes(item.relation_type);
    });
    var uniqueTables = _relationTables.reduce(function (pre, cur) {
      var exists = pre.some(function (obj) {
        return obj.form_id === cur.form_id;
      });
      if (!exists) {
        pre.push(cur);
      }
      return pre;
    }, []);
    return {
      BOOKING_STATUS_LABEL_MAP: BOOKING_STATUS_LABEL_MAP,
      BOOKING_PLATFORM_LABEL_MAP: BOOKING_PLATFORM_LABEL_MAP,
      PAYMENT_STATUS_LABEL_MAP: PAYMENT_STATUS_LABEL_MAP,
      BUSINESS_LABEL_MAP: BUSINESS_LABEL_MAP,
      bookingLabels: bookingLabels,
      uniqueTables: uniqueTables
    };
  }, [params === null || params === void 0 ? void 0 : params.relationTables, locale]);
  var buildColumns = useCallback(function (ctx) {
    var BOOKING_STATUS_LABEL_MAP = staticData.BOOKING_STATUS_LABEL_MAP,
      BOOKING_PLATFORM_LABEL_MAP = staticData.BOOKING_PLATFORM_LABEL_MAP,
      PAYMENT_STATUS_LABEL_MAP = staticData.PAYMENT_STATUS_LABEL_MAP,
      BUSINESS_LABEL_MAP = staticData.BUSINESS_LABEL_MAP,
      bookingLabels = staticData.bookingLabels,
      uniqueTables = staticData.uniqueTables;
    return [{
      title: bookingLabels.bookingBrief,
      key: 'booking_brief',
      width: 188,
      render: function render(_, record) {
        var _record$order, _record$order2, _record$order3;
        var startAt = buildDateTime(record === null || record === void 0 ? void 0 : record.start_date, record === null || record === void 0 ? void 0 : record.start_time) || (record === null || record === void 0 ? void 0 : record.start_at);
        var status = record === null || record === void 0 ? void 0 : record.appointment_status;
        var statusLabel = BOOKING_STATUS_LABEL_MAP[status] || status || '-';
        var statusColor = BOOKING_STATUS_COLOR_MAP[status] || '';
        var orderNote = record === null || record === void 0 || (_record$order = record.order) === null || _record$order === void 0 ? void 0 : _record$order.note;
        var internalNotes = record === null || record === void 0 ? void 0 : record.notes;
        var noteApis = createNoteApis(record === null || record === void 0 || (_record$order2 = record.order) === null || _record$order2 === void 0 ? void 0 : _record$order2.id);
        return /*#__PURE__*/React.createElement("div", {
          className: "pisell-sales-grid-booking-brief"
        }, /*#__PURE__*/React.createElement(ClientName, {
          dataSource: record === null || record === void 0 || (_record$order3 = record.order) === null || _record$order3 === void 0 ? void 0 : _record$order3.customer
        }), startAt ? /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
          value: startAt,
          layout: "inline",
          textAlign: "left",
          timeFormat: {
            padHour: true
          },
          dateFormat: {
            order: 'DMY',
            showYear: false,
            shortMonth: true,
            showRelativeDay: true,
            useCommaBeforeYear: false
          },
          fields: {
            fieldOrder: ['time', 'weekday', 'date']
            // inlineSeparators: [' ', ', '],
          }
        }) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
          style: {
            backgroundColor: statusColor,
            whiteSpace: 'nowrap',
            border: 'none',
            fontWeight: 500
          }
        }, statusLabel)), /*#__PURE__*/React.createElement(BookingNotesPreview, {
          dataSource: {
            note: orderNote,
            internalNotes: internalNotes,
            apis: noteApis,
            bookingId: record === null || record === void 0 ? void 0 : record.id,
            onChange: function onChange(value, type, noteType) {
              ctx.refresh();
            }
          },
          labels: {
            orderNote: bookingLabels.orderNote,
            internalNote: bookingLabels.internalNote,
            more: bookingLabels.more
          },
          style: {
            maxWidth: '100%'
          }
        }));
      }
    }, {
      title: bookingLabels.resource,
      dataIndex: 'relation_form_name',
      key: 'relation_form_name',
      align: 'center',
      width: 100,
      render: function render(value) {
        if (!value) return '-';
        return /*#__PURE__*/React.createElement("div", {
          style: textStyles.text
        }, value);
      }
    }, {
      title: bookingLabels.serviceTime,
      key: 'service_time',
      align: 'center',
      width: 165,
      render: function render(_, record) {
        var startAt = buildDateTime(record === null || record === void 0 ? void 0 : record.start_date, record === null || record === void 0 ? void 0 : record.start_time) || (record === null || record === void 0 ? void 0 : record.start_at);
        var endAt = buildDateTime(record === null || record === void 0 ? void 0 : record.end_date, record === null || record === void 0 ? void 0 : record.end_time) || (record === null || record === void 0 ? void 0 : record.end_at);
        if (!startAt || !endAt) {
          return null;
        }
        return /*#__PURE__*/React.createElement("div", {
          style: {
            textAlign: 'center'
          }
        }, /*#__PURE__*/React.createElement(PisellTimeRangeDisplay, {
          startAt: startAt,
          endAt: endAt
        }));
      },
      uniformCompare: function uniformCompare(_, record) {
        var _record$start_date = record.start_date,
          start_date = _record$start_date === void 0 ? '' : _record$start_date,
          _record$start_time = record.start_time,
          start_time = _record$start_time === void 0 ? '' : _record$start_time,
          _record$end_date = record.end_date,
          end_date = _record$end_date === void 0 ? '' : _record$end_date,
          _record$end_time = record.end_time,
          end_time = _record$end_time === void 0 ? '' : _record$end_time;
        return "".concat(start_date).concat(start_time).concat(end_date).concat(end_time);
      }
    }, {
      title: bookingLabels.customer,
      key: 'customer',
      align: 'center',
      width: 118,
      uniformCompare: function uniformCompare(_, record) {
        var value = record.order;
        var customer = value === null || value === void 0 ? void 0 : value.customer;
        if (!customer) return '-';
        var guestCode = customer === null || customer === void 0 ? void 0 : customer.guest_code;
        if (guestCode) return "".concat(guestCode);
        if (customer.user_id === 1) return 'walk-in'; // 返回任意固定值即可
        return customer;
      },
      render: function render(_, record) {
        var value = record.order;
        var customer = value === null || value === void 0 ? void 0 : value.customer;
        var guestCode = customer === null || customer === void 0 ? void 0 : customer.guest_code;
        if (guestCode) {
          return /*#__PURE__*/React.createElement("div", {
            style: {
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center'
            }
          }, /*#__PURE__*/React.createElement("div", {
            style: {
              fontWeight: 'bold'
            }
          }, bookingLabels.guest));
        }
        var phone = formatPhone((customer === null || customer === void 0 ? void 0 : customer.phone) || (record === null || record === void 0 ? void 0 : record.phone), (customer === null || customer === void 0 ? void 0 : customer.country_calling_code) || (record === null || record === void 0 ? void 0 : record.country_calling_code));
        var email = customer === null || customer === void 0 ? void 0 : customer.email;
        var lines = getDisplayLines([phone, email]);
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center'
          }
        }, /*#__PURE__*/React.createElement(ClientName, {
          dataSource: customer,
          style: {
            fontSize: 14
          }
        }), lines.map(function (line, index) {
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(line, "-").concat(index),
            style: textStyles.text
          }, line);
        }));
      }
    }, {
      title: bookingLabels.contact,
      key: 'contact',
      align: 'center',
      width: 150,
      uniformCompare: function uniformCompare(_, record) {
        var value = record.order;
        var contactValue = value === null || value === void 0 ? void 0 : value.contacts_info;
        if (!contactValue) return '-';
        return contactValue;
      },
      render: function render(_, record) {
        var value = record.order;
        var contactValue = value === null || value === void 0 ? void 0 : value.contacts_info;
        if (!contactValue) return '-';
        var phone = formatPhone(contactValue === null || contactValue === void 0 ? void 0 : contactValue.phone);
        var lines = getDisplayLines([phone, contactValue === null || contactValue === void 0 ? void 0 : contactValue.email]);
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center'
          }
        }, /*#__PURE__*/React.createElement(ClientName, {
          dataSource: contactValue,
          style: {
            fontSize: 14
          }
        }), lines.map(function (line, index) {
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(line, "-").concat(index),
            style: textStyles.text
          }, line);
        }));
      }
    }, {
      title: bookingLabels.holder,
      dataIndex: 'holder_data',
      key: 'holder_data',
      align: 'center',
      width: 110,
      uniformCompare: function uniformCompare(value, record) {
        if (!value) return '-';
        return value;
      },
      render: function render(value, record) {
        var _holderValue$data;
        if (!value) return '-';
        var holderValue = Array.isArray(value) ? value[0] : value;
        if (!holderValue) return '-';
        var holderPhone;
        var customerPhone = ((_holderValue$data = holderValue.data) === null || _holderValue$data === void 0 ? void 0 : _holderValue$data.customer_phone) || holderValue.customer_phone;
        if (customerPhone) {
          holderPhone = formatPhone(customerPhone);
        }
        var lines = getDisplayLines([holderPhone]);
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center'
          }
        }, /*#__PURE__*/React.createElement(ClientName, {
          dataSource: {
            display_name: holderValue.main_field || record.holder_name || ''
          },
          style: {
            fontSize: 14
          }
        }), lines.map(function (line, index) {
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(line, "-").concat(index),
            style: _objectSpread(_objectSpread({}, textStyles.text), {}, {
              whiteSpace: 'nowrap'
            })
          }, line);
        }));
      }
    }, {
      title: bookingLabels.services,
      key: 'services',
      align: 'center',
      width: 120,
      render: function render(_, record) {
        var detail = parseJson(record === null || record === void 0 ? void 0 : record.order_detail);
        var items = normalizeList(detail);
        var displayItems = items.slice(0, 3);
        var moreCount = items.length - displayItems.length;
        var lines = displayItems.map(function (item) {
          var title = utils.translation(item.product_title);
          var qty = item === null || item === void 0 ? void 0 : item.product_quantity;
          if (!title) return null;
          return qty ? "".concat(title, " x").concat(qty) : String(title);
        }).filter(function (item) {
          return item;
        });
        if (moreCount > 0) {
          lines.push("+".concat(moreCount, " ").concat(bookingLabels.more));
        }
        if (lines.length === 0) return null;
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center'
          }
        }, lines.map(function (line, index) {
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(line, "-").concat(index),
            style: textStyles.text
          }, line);
        }));
      },
      uniformCompare: function uniformCompare(_value, record) {
        return (record === null || record === void 0 ? void 0 : record.order_detail) || '';
      }
    }, {
      title: bookingLabels.pax,
      dataIndex: 'number',
      key: 'number',
      align: 'center',
      width: 110,
      render: function render(_, record) {
        var count = record === null || record === void 0 ? void 0 : record.number;
        return /*#__PURE__*/React.createElement("span", {
          style: _objectSpread(_objectSpread({}, textStyles.text), {}, {
            textAlign: 'center'
          })
        }, count !== null && count !== void 0 ? count : '-');
      }
    }, {
      /** 预约关联表单摘要 */
      title: bookingLabels.forms,
      key: 'appointment_form',
      width: 132,
      align: 'center',
      render: function render(_, record) {
        var _record$order4;
        return /*#__PURE__*/React.createElement("div", {
          style: {
            width: '100%',
            maxWidth: 132,
            margin: '0 auto',
            minWidth: 0
          }
        }, /*#__PURE__*/React.createElement(BookingFormsPreview, {
          value: record === null || record === void 0 ? void 0 : record.appointment_form,
          uniqueTables: uniqueTables,
          bookingLabels: bookingLabels,
          textStyles: textStyles,
          relationId: record.parent_id || record.id,
          relationType: record.item_type,
          customer: (_record$order4 = record.order) === null || _record$order4 === void 0 ? void 0 : _record$order4.customer
        }));
      }
    }, {
      title: bookingLabels.orderInfo,
      key: 'order_info',
      width: 124,
      align: 'center',
      render: function render(_, record) {
        var order = (record === null || record === void 0 ? void 0 : record.order) || {};
        var orderCode = order === null || order === void 0 ? void 0 : order.shop_full_order_number;
        var totalAmount = order === null || order === void 0 ? void 0 : order.total_amount;
        var currencySymbol = order === null || order === void 0 ? void 0 : order.currency_symbol;
        var paymentStatus = order === null || order === void 0 ? void 0 : order.payment_status;
        var paymentLabel = PAYMENT_STATUS_LABEL_MAP[paymentStatus] || '-';
        var paymentColor = PAYMENT_STATUS_COLOR_MAP[paymentStatus] || '';
        return /*#__PURE__*/React.createElement("div", {
          className: "pisell-sales-grid-order-info",
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start'
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            fontWeight: 600,
            textDecoration: 'underline',
            color: 'var(--theme-color, #7f56d9)'
          }
        }, orderCode || '-'), totalAmount != null ? /*#__PURE__*/React.createElement("div", {
          style: textStyles.text
        }, formatAmount(totalAmount, currencySymbol)) : null, paymentLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
          style: {
            backgroundColor: paymentColor,
            whiteSpace: 'nowrap',
            border: 'none',
            fontWeight: 500
          }
        }, paymentLabel)) : null);
      }
    }, {
      title: bookingLabels.bookingId,
      dataIndex: 'booking_id',
      key: 'booking_id',
      align: 'center',
      width: 120,
      render: function render(value) {
        return /*#__PURE__*/React.createElement("span", {
          style: _objectSpread(_objectSpread({}, textStyles.text), {}, {
            textAlign: 'center',
            fontSize: 14,
            fontWeight: 400
          })
        }, value);
      }
    }, {
      title: bookingLabels.orderOrigin,
      key: 'order_origin',
      width: 160,
      align: 'center',
      render: function render(_, record) {
        var _record$order5, _record$order6, _record$order7, _record$order8, _record$order9, _record$order10;
        var businessKey = (record === null || record === void 0 || (_record$order5 = record.order) === null || _record$order5 === void 0 ? void 0 : _record$order5.business_code) || (record === null || record === void 0 ? void 0 : record.business_code);
        var businessLabel = BUSINESS_LABEL_MAP[businessKey];
        var channel = BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 || (_record$order6 = record.order) === null || _record$order6 === void 0 ? void 0 : _record$order6.order_sales_channel] || BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 ? void 0 : record.order_platform] || BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 || (_record$order7 = record.order) === null || _record$order7 === void 0 ? void 0 : _record$order7.order_platform] || (record === null || record === void 0 || (_record$order8 = record.order) === null || _record$order8 === void 0 ? void 0 : _record$order8.order_sales_channel) || (record === null || record === void 0 ? void 0 : record.order_platform);
        var device = (record === null || record === void 0 ? void 0 : record.device_name) || (record === null || record === void 0 ? void 0 : record.device) || (record === null || record === void 0 ? void 0 : record.terminal);
        var time = (record === null || record === void 0 ? void 0 : record.created_at) || (record === null || record === void 0 || (_record$order9 = record.order) === null || _record$order9 === void 0 ? void 0 : _record$order9.created_at);
        var actor = (record === null || record === void 0 || (_record$order10 = record.order) === null || _record$order10 === void 0 ? void 0 : _record$order10.create_account) || (record === null || record === void 0 ? void 0 : record.create_account) || (record === null || record === void 0 ? void 0 : record.operator_name);
        var lines = getDisplayLines([channel, device]);
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start'
          }
        }, businessLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
          color: BUSINESS_COLOR_MAP[businessKey],
          style: {
            color: 'black',
            fontWeight: 500
          }
        }, businessLabel)) : null, lines.map(function (line, index) {
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(line, "-").concat(index),
            style: textStyles.text
          }, line);
        }), actor ? /*#__PURE__*/React.createElement("div", {
          style: _objectSpread({
            display: 'flex',
            alignItems: 'center'
          }, textStyles.text)
        }, /*#__PURE__*/React.createElement("span", null, bookingLabels.createdBy, ":"), /*#__PURE__*/React.createElement(ClientName, {
          dataSource: actor,
          style: {
            fontSize: 12
          }
        })) : null, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
          value: time,
          layout: "inline",
          textAlign: "left",
          timeFormat: {
            padHour: true
          },
          dateFormat: {
            order: 'DMY',
            showYear: false,
            shortMonth: true,
            showRelativeDay: true,
            useCommaBeforeYear: false
          },
          fields: {
            fieldOrder: ['time', 'weekday', 'date']
            // inlineSeparators: [' ', ', '],
          },
          style: {
            whiteSpace: 'nowrap'
          }
        }));
      }
    }, {
      title: bookingLabels.updated,
      key: 'updated',
      width: 132,
      align: 'center',
      render: function render(_, record) {
        var _record$order11;
        var time = (record === null || record === void 0 ? void 0 : record.updated_at) || (record === null || record === void 0 || (_record$order11 = record.order) === null || _record$order11 === void 0 ? void 0 : _record$order11.updated_at);
        var channel = BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 ? void 0 : record.order_platform] || (record === null || record === void 0 ? void 0 : record.order_platform);
        var lines = getDisplayLines([channel]);
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start'
          }
        }, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
          value: time,
          layout: "inline",
          textAlign: "left",
          timeFormat: {
            padHour: true
          },
          dateFormat: {
            order: 'DMY',
            showYear: false,
            shortMonth: true,
            showRelativeDay: true,
            useCommaBeforeYear: false
          },
          fields: {
            fieldOrder: ['time', 'weekday', 'date']
            // inlineSeparators: [' ', ', '],
          },
          style: {
            whiteSpace: 'nowrap'
          }
        }), lines.map(function (line, index) {
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(line, "-").concat(index),
            style: textStyles.text
          }, line);
        }));
      }
    }];
  }, [staticData]);

  /**
   * 最终 perspective 配置：
   * - 使用 getChildComponentProps 工厂函数，在运行时接收 ctx 后构建完整配置。
   * - onRow 中通过 ctx.refresh() 实现弹窗关闭后刷新列表。
   * - columns 中通过 ctx.refresh() 实现备注编辑后刷新列表。
   */
  var _perspective = useMemo(function () {
    return {
      key: 'monitor',
      label: 'Monitor',
      getChildComponentProps: function getChildComponentProps(ctx) {
        return {
          grid: {
            bordered: true,
            collapseUniformColumns: true,
            columns: buildColumns(ctx),
            defaultHiddenColumnKeys: ['order_origin', 'updated'],
            scroll: {
              // x: '1800px',
              x: 'max-content',
              autoCalc: true,
              scrollToFirstRowOnChange: true
            },
            rowSelection: false,
            onRow: function onRow(record) {
              return {
                onClick: function onClick() {
                  var _record$order12, _record$order13;
                  if (!record.id) return;

                  // handleOpenSaleDetail
                  utils === null || utils === void 0 || utils.action({
                    type: 'pisell1.handleOpenSaleDetail',
                    data: {
                      osProps: {
                        orderId: record.order.id,
                        osKey: 'sales-management-item-detail'
                      }
                    }
                  });
                  return;
                  var time = new Date();
                  utils === null || utils === void 0 || utils.action({
                    type: 'pisell1.bookingDetail',
                    data: {
                      component_type: getBookingType(record),
                      booking_id: record.order.id,
                      type: record.parent_id === 0 ? 'list' : 'detail',
                      id: record.id,
                      isParallelResourcesBooking: record.relation_id === 0 && record.relation_type === '',
                      preliminaryBookingDetail: {
                        customer: record === null || record === void 0 || (_record$order12 = record.order) === null || _record$order12 === void 0 ? void 0 : _record$order12.customer,
                        id: record.order.id,
                        order_sales_channel: record === null || record === void 0 || (_record$order13 = record.order) === null || _record$order13 === void 0 ? void 0 : _record$order13.order_sales_channel,
                        bookings: {
                          booking_id: record === null || record === void 0 ? void 0 : record.booking_id,
                          appointment_status: record === null || record === void 0 ? void 0 : record.appointment_status,
                          list: [{
                            start_date: record === null || record === void 0 ? void 0 : record.start_date,
                            start_time: record === null || record === void 0 ? void 0 : record.start_time
                          }]
                        }
                      }
                    },
                    callback: function callback(cbParams) {
                      var _ref2 = cbParams || {},
                        type = _ref2.type;
                      // 打开弹窗前会先调用关闭，打开前调用的关闭不需要响应
                      if (Date.now() - time.getTime() < 500) {
                        return;
                      }
                      if (type === 'close') {
                        return;
                      }
                      ctx.refresh();
                    }
                  });
                }
              };
            }
          },
          toolBar: {
            search: {
              showConfirmButton: false
            },
            sort: {
              list: getSortList()
            },
            filter: {
              hiddenQuickFilter: true,
              defaultFilterValue: {
                quickFilter: [],
                otherFilter: getFilterButtonList(),
                values: {}
              }
            },
            quickFilter: {
              /** RecordBoard 平面图视图时用顶栏日程；网格视图保留快筛日期 */
              hideFilterNamesOnFloorMap: ['booking_time_start_between'],
              filterList: [{
                type: 'rangePicker',
                name: 'booking_time_start_between',
                key: 'bookingTimeStartBetween',
                props: {
                  placeholder: locales.getText('pisell2.salesManagement.booking.filter.bookingDate.label'),
                  showTime: true
                }
              }]
            }
          },
          batchActionBar: {
            overflowThreshold: 2
          }
        };
      }
    };
  }, [buildColumns, utils, locale]);
  return _perspective;
};