Text() {
    buildHighLightSpan(item.title)
}
.fontSize(17)
.fontColor('#FF222222')
.fontWeight(600)
.textOverflow({
    overflow: TextOverflow.Ellipsis
})
.width('100%')


/**
 * 解析 <em> </em>标签高亮显示
 *
 * 注意：不支持嵌套
 *
 * @param highLightTitle 带标签的文本
 */
@Builder
function buildHighLightSpan(highLightTitle: string | undefined) {
  if (highLightTitle == null || highLightTitle.indexOf('<em>') == -1 || highLightTitle.indexOf('</em>') == -1) {
    Span(highLightTitle?.replace('<em>', '').replace('</em>', '')).fontColor('#FF222222')
  } else {
    ForEach(highLightTitle.split('</em>'), (attr: string) => {
      ForEach(attr.split('<em>'), (item: string, index: number) => {
        if (item != null || item != '') {
          if (index == 0) {
            Span(item).fontColor('#FF222222');
          } else {
            Span(item).fontColor('#FF00A3FF');
          }
        }
      });
    })
  }
}

@Component
struct SearchResultPage {
  @State input: string = '';
  @State searchWord: string = ''

  aboutToAppear(): void {
    this.syncSearchWord(this.input)
  }

  build() {
    Column() {
      SearchDramaResultList({ searchWord: this.searchWord }).layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }

  syncSearchWord(keyword: string) {
    if (keyword == '') return;
    this.searchWord = keyword
  }
}

@Component
export struct SearchDramaResultList {
  @Prop @Watch('requestData') searchWord: string;
  @State data?: SearchSeasonVo[] | null = null
  private vm = new SearchVM()
  // 需绑定列表或宫格组件
  private scroller: Scroller = new Scroller();

  aboutToAppear(): void {
    // request data.
    this.requestData()
  }

  requestData(propName: string) {
    console.log("requestData: searchWord=", this.searchWord, ",propName=", propName);
    // do data request with searchWord
  }
}

/*
 * Copyright (c) 2024 @Dench.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

export class StringBuilder {
  private value: string[];

  constructor() {
    this.value = [];
  }

  append(str: string | number | undefined | null): StringBuilder {
    this.value.push(String(str));
    return this;
  }

  appendNotNull(str: string | number | undefined | null): StringBuilder {
    if (str != null) {
      this.value.push(String(str));
    }
    return this;
  }

  build(separator?: string): string {
    return this.value.join(separator);
  }
}

let res = new StringBuilder()
  .append("123")
  .append("aaa")
  .append("456")
  .append("bbb")
  .append("789")
  .build(".");
console.info(res);

@State input: string = '';
@Builder
SearchLayout() {
  Row() {
    TextInput({placeholder: 'inupt your text...',})
      .onChange((value) => {
        this.input = value
      })
      .layoutWeight(1)
    ImageView({
      option: {
        loadSrc: $r("app.media.clear"),
        width: 16,
        height: 16,
      }
    })
      .visibility(this.input == '' ? Visibility.None : Visibility.Visible)
      .onClick(() => {
        this.input = ''
      })
  }
}

Image($r("app.media.back"))
  .width(24)
  .height(24)
  .onClick(() => {})
  .focusable(true)
  .defaultFocus(true);

TextInput({
  placeholder: "搜索您想要的内容",
})
  .focusable(true)
  .focusOnTouch(true)
  .defaultFocus(false);

/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { display } from "@kit.ArkUI";

export class DeviceUtil {
  private static width = 0;
  private static widthPx = 0;
  private static height = 0;
  private static heightPx = 0;

  public static getDisplayWidth(): number {
    if (DeviceUtil.width == 0) {
      DeviceUtil.setupDisplaySize();
    }
    return DeviceUtil.width;
  }

  public static getDisplayWidthPx(): number {
    if (DeviceUtil.widthPx == 0) {
      DeviceUtil.setupDisplaySize();
    }
    return DeviceUtil.widthPx;
  }

  public static getDisplayHeight(): number {
    if (DeviceUtil.height == 0) {
      DeviceUtil.setupDisplaySize();
    }
    return DeviceUtil.height;
  }

  public static getDisplayHeightPx(): number {
    if (DeviceUtil.heightPx == 0) {
      DeviceUtil.setupDisplaySize();
    }
    return DeviceUtil.heightPx;
  }

  private static setupDisplaySize() {
    let width = display.getDefaultDisplaySync().width;
    let height = display.getDefaultDisplaySync().height;
    DeviceUtil.widthPx = width;
    DeviceUtil.width = px2vp(width);
    DeviceUtil.heightPx = height;
    DeviceUtil.height = px2vp(height);
  }
}