neo-cmp-cli 1.13.16 → 1.13.17

package/template/neo-bi-cmps/src/components/filterBar__c/index.tsx

@@ -1,200 +1,722 @@
 /**
  * @file 筛选栏组件
- * @description 支持日期范围、负责人、业务类型等多维度筛选
+ * @description 支持日期范围、负责人（user 实体）、业务类型等多维度筛选
  */
 import * as React from 'react';
+import { DatePicker, Select, Spin } from 'antd';
+import moment, { Moment } from 'moment';
 // @ts-ignore
-import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+import { request, xObject } from 'neo-open-api';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+
+import { getDefaultOpportunityOwnerIds } from '../../utils/common';
+
+import {
+  defaultChangesSinceOptions,
+  momentRangeToTimestamps,
+  normalizeOptions,
+  parseBusinessTypes,
+  parseUserRecordsToOwnerOptions,
+  relativeCloseDateRangeFromCode,
+  resolveDefaultBusinessTypeValue,
+  type FilterOption,
+  type TimestampRange,
+} from '../../utils/filterBar';
 
+export type { FilterOption, TimestampRange } from '../../utils/filterBar';
+
+import './common.scss';
 import './style.scss';
 
-interface FilterOption {
-  value: string;
-  label: string;
+const { RangePicker } = DatePicker;
+
+const BUSI_TYPE_URL = '/rest/data/v2.0/xobjects/opportunity/busiType';
+
+/** Opportunity Owner 人员列表：平台 user 实体 */
+const USER_ENTITY_API_KEY = 'user';
+const USER_QUERY_FIELDS = [
+  'id',
+  'name',
+  'nickName',
+  'personalEmail',
+  'telephone',
+] as const;
+
+interface FilterBarEventData {
+  data: FilterBarChangePayload;
+}
+
+export interface FilterBarChangePayload {
+  closeDate: number | string;
+  closeDateCustomRange?: TimestampRange;
+  /** Opportunity Owner 多选：人员 id 列表，空数组表示未选 */
+  opportunityOwner: (number | string)[];
+  businessType: string | number;
+  /** 当前选中的业务类型展示名（与 businessType 对应） */
+  businessTypeLabel?: string;
+  businessTypeApiKey?: string;
+  changesSince: string | number;
+  /** Changes Since 为 Custom 时：所选日期的当日 0 点 Unix 毫秒时间戳 */
+  changesSinceCustomTime?: number;
 }
 
-interface FilterItem {
+/** 设计器 / 页面注入的当前登录用户（与 __NeoCurrentUser 一致） */
+interface NeoCurrentUser {
+  id: number;
   name: string;
-  label: string;
-  type: 'select' | 'date' | 'owner' | 'custom';
-  options?: FilterOption[];
-  placeholder?: string;
+  icon?: string;
+  departId?: number;
+  localCode?: string;
+  type?: number;
+  languageCode?: string;
+  currencyApiKey?: string;
 }
 
 interface FilterBarProps {
-  filters: FilterItem[];
-  values?: Record<string, string>;
-  onChange?: (key: string, value: string) => void;
-  onSearch?: () => void;
+  /** Close Date 下拉选项（由页面 / 设计器配置传入） */
+  closeDateOptions?: FilterOption[];
+  /**
+   * 默认业务类型：与接口返回项的 apiKey 相等时，将该项的 id（或 value）作为 Business Type 初始选中值
+   */
+  defaultBusiType?: string;
   className?: string;
   style?: React.CSSProperties;
+  /** 与 NeoEvent 并存：便于父组件直接监听 */
+  onValuesChange?: (payload: FilterBarChangePayload) => void;
+  /** 页面数据：含 __NeoCurrentUser，用于负责人列表首位插入当前用户 */
+  data?: { __NeoCurrentUser?: NeoCurrentUser };
+}
+
+interface FilterValues {
+  closeDate: number | string;
+  businessType: string | number;
+  changesSince: string | number;
 }
 
 interface FilterBarState {
-  values: Record<string, string>;
-  ownerPickerOpen: boolean;
-  ownerSearchText: string;
+  closeDateOptions: FilterOption[];
+  changesSinceOptions: FilterOption[];
+  opportunityOwnerOptions: FilterOption[];
+  businessTypeOptions: FilterOption[];
+  values: FilterValues;
+  /** Opportunity Owner 选中的人员 id（多选） */
+  opportunityOwner: (number | string)[];
+  /** Close Date 为 custom 时的自定义区间时间戳 */
+  closeDateCustomRange: TimestampRange | null;
+  /** Changes Since 为 Custom 时的单个时间点（当日 0 点，Unix 毫秒） */
+  changesSinceCustomTime: number | null;
+  ownerLoading: boolean;
+  businessTypeLoading: boolean;
 }
 
 class FilterBar extends BaseCmp<FilterBarProps, FilterBarState> {
+  /** 初始化筛选 state 与 Close Date 选项 */
   constructor(props: FilterBarProps) {
     super(props);
+    const closeOpts = normalizeOptions(
+      props.closeDateOptions && props.closeDateOptions.length > 0
+        ? props.closeDateOptions
+        : FilterBar.defaultCloseDateOptions(),
+    );
+    const csOpts = defaultChangesSinceOptions();
+    const initialClose = closeOpts[2]?.value ?? 401; // 默认本季度
+    const initialRelativeRange = relativeCloseDateRangeFromCode(initialClose);
     this.state = {
-      values: props.values || {},
-      ownerPickerOpen: false,
-      ownerSearchText: '',
+      closeDateOptions: closeOpts,
+      changesSinceOptions: csOpts,
+      opportunityOwnerOptions: [],
+      businessTypeOptions: [],
+      values: {
+        closeDate: initialClose,
+        businessType: '',
+        changesSince: csOpts[0]?.value ?? '',
+      },
+      opportunityOwner: getDefaultOpportunityOwnerIds(props),
+      closeDateCustomRange: initialRelativeRange,
+      changesSinceCustomTime: initialRelativeRange?.start ?? null,
+      ownerLoading: false,
+      businessTypeLoading: false,
     };
 
-    this.handleFilterChange = this.handleFilterChange.bind(this);
-    this.handleOwnerSelect = this.handleOwnerSelect.bind(this);
+    // 绑定方法到 this
+    this.syncDefaultBusinessTypeFromProps =
+      this.syncDefaultBusinessTypeFromProps.bind(this);
+    this.syncCloseDateOptionsFromProps =
+      this.syncCloseDateOptionsFromProps.bind(this);
+    this.buildPayload = this.buildPayload.bind(this);
+    this.emitChange = this.emitChange.bind(this);
+    this.loadOpportunityOwnerOptions =
+      this.loadOpportunityOwnerOptions.bind(this);
+    this.loadBusinessTypeOptions = this.loadBusinessTypeOptions.bind(this);
+    this.patchValues = this.patchValues.bind(this);
+    this.handleCloseDateChange = this.handleCloseDateChange.bind(this);
+    this.handleChangesSinceChange = this.handleChangesSinceChange.bind(this);
+    this.handleCloseDateRangeChange =
+      this.handleCloseDateRangeChange.bind(this);
+    this.handleChangesSinceTimeChange =
+      this.handleChangesSinceTimeChange.bind(this);
+    this.closeDateRangePickerValue =
+      this.closeDateRangePickerValue.bind(this);
+    this.changesSinceDatePickerValue =
+      this.changesSinceDatePickerValue.bind(this);
+    this.getFilters = this.getFilters.bind(this);
+    this.resetFilters = this.resetFilters.bind(this);
+    this.renderCloseDateBlock = this.renderCloseDateBlock.bind(this);
+    this.renderOwnerBlock = this.renderOwnerBlock.bind(this);
+    this.renderBusinessTypeBlock = this.renderBusinessTypeBlock.bind(this);
+    this.renderChangesSinceBlock = this.renderChangesSinceBlock.bind(this);
   }
 
+  /** Close Date 内置默认选项 */
+  static defaultCloseDateOptions(): FilterOption[] {
+    return [
+      { value: 201, label: 'This Week' },
+      { value: 301, label: 'This Month' },
+      { value: 401, label: 'This Quarter' },
+      { value: 'custom', label: 'Custom' },
+    ];
+  }
+
+  /** 同步 props 选项并拉取负责人、业务类型 */
   componentDidMount() {
-    console.log('FilterBar 组件挂载');
+    this.syncCloseDateOptionsFromProps(this.props);
+    this.loadOpportunityOwnerOptions();
+    this.loadBusinessTypeOptions();
+  }
+
+  /** props.closeDateOptions 变化时同步本地选项 */
+  componentWillReceiveProps(nextProps: FilterBarProps) {
+    if (nextProps.closeDateOptions !== this.props.closeDateOptions) {
+      this.syncCloseDateOptionsFromProps(nextProps);
+    }
+    if (nextProps.defaultBusiType !== this.props.defaultBusiType) {
+      this.syncDefaultBusinessTypeFromProps(nextProps);
+    }
+    const nextOwnerIds = getDefaultOpportunityOwnerIds(nextProps);
+    const prevUserId = this.props.data?.__NeoCurrentUser?.id;
+    const nextUserId = nextProps.data?.__NeoCurrentUser?.id;
+    if (
+      nextOwnerIds.length > 0 &&
+      prevUserId !== nextUserId &&
+      this.state.opportunityOwner.length === 0
+    ) {
+      this.setState({ opportunityOwner: nextOwnerIds }, () =>
+        this.emitChange(),
+      );
+    }
+  }
+
+  /** defaultBusiType 配置变更时，在已加载的下拉数据中重新匹配默认业务类型 */
+  syncDefaultBusinessTypeFromProps(props: FilterBarProps) {
+    const { businessTypeOptions } = this.state;
+    if (!businessTypeOptions.length) return;
+    const nextVal = resolveDefaultBusinessTypeValue(
+      businessTypeOptions,
+      props.defaultBusiType,
+    );
+    this.setState(
+      (prev) => ({
+        values: { ...prev.values, businessType: nextVal },
+      }),
+      () => this.emitChange(),
+    );
+  }
+
+  /** 用 props 更新 Close Date 选项并校正当前选中值 */
+  syncCloseDateOptionsFromProps(props: FilterBarProps) {
+    const next = normalizeOptions(
+      props.closeDateOptions && props.closeDateOptions.length > 0
+        ? props.closeDateOptions
+        : FilterBar.defaultCloseDateOptions(),
+    );
+    this.setState((prev) => {
+      const stillValid = next.some((o) => o.value === prev.values.closeDate);
+      const closeDate = stillValid
+        ? prev.values.closeDate
+        : next[0]?.value ?? '';
+      const isCustom = String(closeDate).toLowerCase() === 'custom';
+      const relativeRange = !isCustom
+        ? relativeCloseDateRangeFromCode(closeDate)
+        : null;
+      return {
+        closeDateOptions: next,
+        values: { ...prev.values, closeDate },
+        closeDateCustomRange: isCustom
+          ? prev.closeDateCustomRange
+          : relativeRange,
+        changesSinceCustomTime: prev.values.changesSince === 'Custom'
+        ? prev.changesSinceCustomTime
+        : relativeRange?.start ?? null,
+      };
+    });
+  }
+
+  /** 由 state 组装对外事件 / 回调用的 payload */
+  buildPayload(): FilterBarChangePayload {
+    const {
+      values,
+      opportunityOwner,
+      closeDateCustomRange,
+      changesSinceCustomTime,
+      businessTypeOptions,
+    } = this.state;
+    const closeCustom = String(values.closeDate).toLowerCase() === 'custom';
+    const changesCustom = values.changesSince === 'Custom';
+
+    const rangeResolved = closeCustom
+      ? closeDateCustomRange
+      : closeDateCustomRange ??
+        relativeCloseDateRangeFromCode(values.closeDate);
+
+    const curBusinessType =
+      values.businessType === '' || values.businessType == null
+        ? undefined
+        : businessTypeOptions.find((o) => o.value === values.businessType);
+
+    return {
+      closeDate: values.closeDate,
+      closeDateCustomRange: rangeResolved ?? undefined,
+      opportunityOwner,
+      businessType: values.businessType,
+      businessTypeLabel: curBusinessType?.label,
+      businessTypeApiKey: curBusinessType?.apiKey,
+      changesSince: values.changesSince,
+      changesSinceCustomTime: changesCustom
+        ? changesSinceCustomTime ?? undefined
+        : rangeResolved?.start != null
+          ? rangeResolved.start
+          : undefined,
+    };
+  }
+
+  /** 打日志、触发 onValuesChange 与设计器事件 */
+  emitChange() {
+    const payload = this.buildPayload();
+    console.log('[FilterBar__c] filters change', payload);
+    const { onValuesChange } = this.props;
+    if (onValuesChange) {
+      onValuesChange(payload);
+    }
+    this.onFiltersChange({
+      data: payload
+    });
+
+    /*
+    console.log('触发了一个广播事件 updateFilterData:', payload);
+    NeoEvent.broadcast('updateFilterData', payload);
+    */
   }
 
-  handleFilterChange(key: string, value: string) {
-    this.setState((prevState) => ({
-      values: { ...prevState.values, [key]: value },
-    }));
+  /** 设计器事件：筛选条件变化（含自定义区间） */
+  @NeoEvent.dispatch
+  onFiltersChange(eventData?: FilterBarEventData) {}
 
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(key, value);
+  /** 请求 user 实体，填充 Opportunity Owner 下拉 */
+  async loadOpportunityOwnerOptions() {
+    this.setState({ ownerLoading: true });
+    const currentUser = Object.assign({}, this.props.data?.__NeoCurrentUser);
+    // 给当前用户增加标记
+    if (currentUser && currentUser.name && currentUser.name.indexOf('（CurrentUser）') === -1) {
+      currentUser.name = currentUser.name + '（CurrentUser）';
+    }
+    const currentUserRecords =
+      currentUser?.id != null &&
+      currentUser.name != null &&
+      String(currentUser.name).trim() !== ''
+        ? [currentUser]
+        : [];
+
+    try {
+      const result = await xObject.query({
+        xObjectApiKey: USER_ENTITY_API_KEY,
+        fields: [...USER_QUERY_FIELDS],
+        page: 1,
+        pageSize: 500,
+      });
+
+      let opportunityOwnerOptions: FilterOption[] = [];
+      if (result?.status) {
+        const records = Array.isArray(result.data) ? result.data : [];
+        opportunityOwnerOptions = parseUserRecordsToOwnerOptions([
+          ...currentUserRecords,
+          ...records,
+        ]);
+      } else {
+        console.warn(
+          'FilterBar xObject.query(user) 非成功:',
+          result?.msg ?? result,
+        );
+        opportunityOwnerOptions =
+          parseUserRecordsToOwnerOptions(currentUserRecords);
+      }
+
+      const defaultOwnerIds = getDefaultOpportunityOwnerIds(this.props);
+      let appliedOwnerDefault = false;
+      this.setState(
+        (prev) => {
+          const shouldApply =
+            defaultOwnerIds.length > 0 && prev.opportunityOwner.length === 0;
+          if (shouldApply) appliedOwnerDefault = true;
+          return {
+            ownerLoading: false,
+            opportunityOwnerOptions,
+            opportunityOwner: shouldApply
+              ? defaultOwnerIds
+              : prev.opportunityOwner,
+          };
+        },
+        () => {
+          if (appliedOwnerDefault) this.emitChange();
+        },
+      );
+    } catch (e) {
+      console.error('FilterBar 加载负责人（user）失败:', e);
+      const fallbackOptions =
+        parseUserRecordsToOwnerOptions(currentUserRecords);
+      const defaultOwnerIds = getDefaultOpportunityOwnerIds(this.props);
+      let appliedOwnerDefault = false;
+      this.setState(
+        (prev) => {
+          const shouldApply =
+            defaultOwnerIds.length > 0 && prev.opportunityOwner.length === 0;
+          if (shouldApply) appliedOwnerDefault = true;
+          return {
+            ownerLoading: false,
+            opportunityOwnerOptions: fallbackOptions,
+            opportunityOwner: shouldApply
+              ? defaultOwnerIds
+              : prev.opportunityOwner,
+          };
+        },
+        () => {
+          if (appliedOwnerDefault) this.emitChange();
+        },
+      );
+    }
+  }
+
+  /** 请求商机业务类型接口，填充 Business Type 下拉 */
+  async loadBusinessTypeOptions() {
+    this.setState({ businessTypeLoading: true });
+    try {
+      const res = await request({
+        url: BUSI_TYPE_URL,
+        method: 'GET',
+        data: {},
+      });
+      const businessTypeOptions = parseBusinessTypes(res);
+      const defaultBt = resolveDefaultBusinessTypeValue(
+        businessTypeOptions,
+        this.props.defaultBusiType,
+      );
+      this.setState(
+        (prev) => ({
+          businessTypeLoading: false,
+          businessTypeOptions,
+          values: {
+            ...prev.values,
+            businessType: defaultBt,
+          },
+        }),
+        () => {
+          if (defaultBt) this.emitChange();
+        },
+      );
+    } catch (e) {
+      console.error('FilterBar 加载业务类型失败:', e);
+      this.setState({ businessTypeLoading: false, businessTypeOptions: [] });
     }
   }
 
-  handleOwnerSelect(name: string) {
-    this.setState((prevState) => ({
-      values: { ...prevState.values, owner: name },
-      ownerPickerOpen: false,
-    }));
+  /** 合并 values 子集并通知变更 */
+  patchValues(patch: Partial<FilterValues>) {
+    this.setState(
+      (prev) =>
+        ({
+          values: { ...prev.values, ...patch },
+        } as Pick<FilterBarState, 'values'>),
+      () => this.emitChange(),
+    );
+  }
 
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange('owner', name);
+  /** Close Date 下拉变更；非 custom 时按编码写入相对周期的起止时间戳及起点到 changesSinceCustomTime */
+  handleCloseDateChange(value: number | string) {
+    if (String(value).toLowerCase() !== 'custom') {
+      const relativeRange = relativeCloseDateRangeFromCode(value);
+      this.setState(
+        (prev) =>
+          ({
+            values: { ...prev.values, closeDate: value },
+            closeDateCustomRange: relativeRange,
+            changesSinceCustomTime:
+              prev.values.changesSince === 'Custom'
+                ? prev.changesSinceCustomTime
+                : relativeRange?.start ?? null,
+          } as Pick<
+            FilterBarState,
+            'values' | 'closeDateCustomRange' | 'changesSinceCustomTime'
+          >),
+        () => this.emitChange(),
+      );
+      return;
     }
+    this.setState(
+      (prev) => ({
+        values: { ...prev.values, closeDate: value },
+        closeDateCustomRange: null,
+        changesSinceCustomTime:
+          prev.values.changesSince === 'Custom'
+            ? prev.changesSinceCustomTime
+            : null,
+      }),
+      () => this.emitChange(),
+    );
   }
 
-  toggleOwnerPicker = () => {
-    this.setState((prevState) => ({
-      ownerPickerOpen: !prevState.ownerPickerOpen,
-    }));
-  };
-
-  handleOwnerSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ ownerSearchText: e.target.value });
-  };
-
-  renderFilterItem(filter: FilterItem) {
-    const { values } = this.state;
-
-    switch (filter.type) {
-      case 'select':
-        return (
-          <div className="filter-group" key={filter.name}>
-            <label>{filter.label}</label>
-            <select
-              value={values[filter.name] || ''}
-              onChange={(e) =>
-                this.handleFilterChange(filter.name, e.target.value)
-              }
-            >
-              {filter.options?.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
+  /** Changes Since 下拉变更；非 Custom 且 Close Date 为相对周期时同步起点时间戳 */
+  handleChangesSinceChange(value: string | number) {
+    if (value !== 'Custom') {
+      const closeDate = this.state.values.closeDate;
+      const closeCustom = String(closeDate).toLowerCase() === 'custom';
+      const relativeRange = !closeCustom
+        ? relativeCloseDateRangeFromCode(closeDate)
+        : null;
+      this.setState(
+        (prev) =>
+          ({
+            values: { ...prev.values, changesSince: value },
+            changesSinceCustomTime: relativeRange?.start ?? null,
+          } as Pick<FilterBarState, 'values' | 'changesSinceCustomTime'>),
+        () => this.emitChange(),
+      );
+      return;
+    }
+    this.setState(
+      (prev) => ({
+        values: { ...prev.values, changesSince: value },
+        changesSinceCustomTime: null,
+      }),
+      () => this.emitChange(),
+    );
+  }
+
+  /** Close Date 自定义 RangePicker：写入时间戳区间 */
+  handleCloseDateRangeChange(dates: any) {
+    const closeDateCustomRange = momentRangeToTimestamps(dates);
+    this.setState({ closeDateCustomRange }, () => this.emitChange());
+  }
+
+  /** Changes Since 自定义 DatePicker：写入当日 0 点时间戳 */
+  handleChangesSinceTimeChange(date: Moment | null) {
+    const changesSinceCustomTime =
+      date != null ? moment(date).startOf('day').valueOf() : null;
+    this.setState({ changesSinceCustomTime }, () => this.emitChange());
+  }
+
+  /** state.closeDateCustomRange → RangePicker 受控值 */
+  closeDateRangePickerValue(): [Moment | null, Moment | null] | null {
+    const r = this.state.closeDateCustomRange;
+    if (!r || (r.start == null && r.end == null)) return null;
+    return [
+      r.start != null ? moment(r.start) : null,
+      r.end != null ? moment(r.end) : null,
+    ];
+  }
+
+  /** state.changesSinceCustomTime → DatePicker 受控值 */
+  changesSinceDatePickerValue(): Moment | null {
+    const t = this.state.changesSinceCustomTime;
+    if (t == null) return null;
+    return moment(t);
+  }
+
+  /** 动作流 / 外部调用：返回当前筛选快照 */
+  @NeoEvent.function
+  getFilters(): FilterBarChangePayload {
+    return this.buildPayload();
+  }
+
+  /** 动作流：恢复默认并清空自定义区间后通知 */
+  @NeoEvent.function
+  resetFilters() {
+    const { closeDateOptions, changesSinceOptions } = this.state;
+    const resetClose = closeDateOptions[0]?.value ?? '';
+    const resetCustom = String(resetClose).toLowerCase() === 'custom';
+    const resetRange = !resetCustom
+      ? relativeCloseDateRangeFromCode(resetClose)
+      : null;
+    this.setState(
+      {
+        values: {
+          closeDate: resetClose,
+          businessType: '',
+          changesSince: changesSinceOptions[0]?.value ?? '',
+        },
+        opportunityOwner: getDefaultOpportunityOwnerIds(this.props),
+        closeDateCustomRange: resetRange,
+        changesSinceCustomTime: resetRange?.start ?? null,
+      },
+      () => this.emitChange(),
+    );
+  }
+
+  /** Close Date + 自定义日期区间 */
+  renderCloseDateBlock() {
+    const { closeDateOptions, values } = this.state;
+    const showCustom = String(values.closeDate).toLowerCase() === 'custom';
+
+    return (
+      <div className="filter-block" key="closeDate">
+        <div className="filter-field">
+          <label>Close Date</label>
+          <Select
+            className="filter-select"
+            value={values.closeDate || undefined}
+            onChange={(v) => this.handleCloseDateChange(v)}
+            options={closeDateOptions.map((o) => ({
+              value: o.value,
+              label: o.label,
+            }))}
+          />
+        </div>
+        {showCustom && (
+          <div className="filter-field filter-field-range">
+            <RangePicker
+              value={this.closeDateRangePickerValue()}
+              onChange={this.handleCloseDateRangeChange}
+              format="YYYY-MM-DD"
+            />
           </div>
-        );
+        )}
+      </div>
+    );
+  }
 
-      case 'owner':
-        return (
-          <div className="filter-group owner-picker-wrap" key={filter.name}>
-            <label>{filter.label}</label>
-            <div
-              className="owner-picker-trigger"
-              onClick={this.toggleOwnerPicker}
-            >
-              <span className="owner-selected-text">
-                {values[filter.name] || 'Current User'}
-              </span>
-              <span className="owner-arrow">▾</span>
-            </div>
-            {this.state.ownerPickerOpen && (
-              <div className="owner-picker-dropdown open">
-                <input
-                  type="text"
-                  className="owner-search"
-                  placeholder="Search people or departments..."
-                  onChange={this.handleOwnerSearch}
-                />
-                <div className="owner-section-label">People</div>
-                {['Current User', 'Alice', 'Steve', 'Chloe']
-                  .filter((name) =>
-                    name
-                      .toLowerCase()
-                      .includes(this.state.ownerSearchText.toLowerCase()),
-                  )
-                  .map((name) => (
-                    <div
-                      key={name}
-                      className={`owner-item ${
-                        values[filter.name] === name ? 'selected' : ''
-                      }`}
-                      data-name={name}
-                      onClick={() => this.handleOwnerSelect(name)}
-                    >
-                      <span className="owner-check">
-                        {values[filter.name] === name ? '✓' : ''}
-                      </span>
-                      <span className="owner-icon">👤</span>
-                      {name}
-                    </div>
-                  ))}
-                <div className="owner-section-label">Departments</div>
-                {['Sales Dept', 'Enterprise Team']
-                  .filter((name) =>
-                    name
-                      .toLowerCase()
-                      .includes(this.state.ownerSearchText.toLowerCase()),
+  /** Opportunity Owner */
+  renderOwnerBlock() {
+    const { opportunityOwnerOptions, ownerLoading, opportunityOwner } =
+      this.state;
+
+    return (
+      <div className="filter-block" key="owner">
+        <div className="filter-field">
+          <label>Opportunity Owner</label>
+          <Spin spinning={ownerLoading}>
+            <div className="filter-select-spin-wrap">
+              <Select
+                className="filter-select filter-select-wide"
+                mode="multiple"
+                allowClear
+                showSearch
+                placeholder="Please select the owner"
+                value={opportunityOwner}
+                optionFilterProp="label"
+                maxTagCount={2}
+                maxTagPlaceholder={(omitted) => `+${omitted.length}`}
+                onChange={(v) =>
+                  this.setState({ opportunityOwner: v ?? [] }, () =>
+                    this.emitChange(),
                   )
-                  .map((name) => (
-                    <div
-                      key={name}
-                      className={`owner-item ${
-                        values[filter.name] === name ? 'selected' : ''
-                      }`}
-                      data-name={name}
-                      onClick={() => this.handleOwnerSelect(name)}
-                    >
-                      <span className="owner-check">
-                        {values[filter.name] === name ? '✓' : ''}
-                      </span>
-                      <span className="owner-icon">🏢</span>
-                      {name}
-                    </div>
-                  ))}
-              </div>
-            )}
-          </div>
-        );
+                }
+                dropdownMatchSelectWidth={320}
+                options={opportunityOwnerOptions.map((o) => ({
+                  value: o.value,
+                  label: o.label,
+                }))}
+              />
+            </div>
+          </Spin>
+        </div>
+      </div>
+    );
+  }
 
-      default:
-        return null;
-    }
+  /** Business Type */
+  renderBusinessTypeBlock() {
+    const { businessTypeOptions, businessTypeLoading, values } = this.state;
+
+    return (
+      <div className="filter-block" key="businessType">
+        <div className="filter-field">
+          <label>Business Type</label>
+          <Spin spinning={businessTypeLoading}>
+            <div className="filter-select-spin-wrap">
+              <Select
+                className="filter-select"
+                allowClear
+                showSearch
+                placeholder="Please select the business type"
+                value={values.businessType || undefined}
+                optionFilterProp="label"
+                onChange={(v) => this.patchValues({ businessType: v || '' })}
+                options={businessTypeOptions.map((o) => ({
+                  value: o.value,
+                  label: o.label,
+                }))}
+              />
+            </div>
+          </Spin>
+        </div>
+      </div>
+    );
+  }
+
+  /** Changes Since + Custom 时单个日期 */
+  renderChangesSinceBlock() {
+    const { changesSinceOptions, values } = this.state;
+    const showCustom = values.changesSince === 'Custom';
+
+    return (
+      <div className="filter-block" key="changesSince">
+        <div className="filter-field">
+          <label>
+            Changes Since
+            <span className="help-tip">
+              ?
+              <span className="help-tip-text">
+                相对报表周期的变更起始时间；Custom 时可自选日期
+              </span>
+            </span>
+          </label>
+          <Select
+            className="filter-select"
+            value={values.changesSince || undefined}
+            onChange={(v) => this.handleChangesSinceChange(v)}
+            options={changesSinceOptions.map((o) => ({
+              value: o.value,
+              label: o.label,
+            }))}
+          />
+        </div>
+        {showCustom && (
+          <div className="filter-field filter-field-range">
+            <DatePicker
+              value={this.changesSinceDatePickerValue()}
+              onChange={this.handleChangesSinceTimeChange}
+              format="YYYY-MM-DD"
+              placeholder="Select date"
+            />
+          </div>
+        )}
+      </div>
+    );
   }
 
+  /** 筛选栏根布局 */
   render() {
-    const { filters = [], className, style } = this.props;
+    const { className, style } = this.props;
+    console.log('[FilterBar__c] render', this.props);
 
     return (
-      <div className={`filter-bar__c ${className || ''}`} style={style}>
-        {filters.map((filter) => this.renderFilterItem(filter))}
+      <div className={`filterBar__c ${className || ''}`} style={style} data-time='2026.4.15 01'>
+        {this.renderCloseDateBlock()}
+        {this.renderOwnerBlock()}
+        {this.renderBusinessTypeBlock()}
+        {this.renderChangesSinceBlock()}
       </div>
     );
   }
 }
 
-export default StatusHoc(FilterBar);
+export default FilterBar;