import { BASE_IMAGE_URL } from "../../app/AppCache";
import AppConstants from "../../app/AppConstant";
import { AppDataModel } from "../../model/resultModel/ApplicationResultModel";

@Component
export struct SelectAppItem {
  @ObjectLink item: AppDataModel;
  onSelect?: (item: AppDataModel) => void

  build() {
    Row() {
      Radio({
        value: 'Radio1', group: 'radioGroup',
        indicatorType: RadioIndicatorType.TICK
      })
        .checked(this.item.isSelect)
        .height($r('app.float.default_20'))
        .width($r('app.float.default_20'))
        .onChange((isChecked: boolean) => {
          // 只有选中时才触发选择事件，实现单选
          if (isChecked && this.onSelect) {
            this.onSelect(this.item)
          }
        })

      Image(BASE_IMAGE_URL+this.item.icon)
        .width($r('app.float.default_24'))
        .height($r('app.float.default_24'))
        .margin({left: $r('app.float.default_8'), right: $r('app.float.default_5')})

      Text(this.item.name)
        .layoutWeight(1)
        .fontColor(this.item.isSelect ? $r('app.color.colorBluen8') : $r('app.color.colorGrey7'))
        .fontSize($r('app.float.text_size_14'))
        .onClick(() => {
          // 点击文本时触发选择
          if (this.onSelect) {
            this.onSelect(this.item)
          }
        })
    }
    .width(AppConstants.PERCENTAGE_MAX)
    .padding({
      left: $r('app.float.default_10'),
      right: $r('app.float.default_10'),
      top: $r('app.float.default_6'),
      bottom: $r('app.float.default_6')
    })
    // 添加按压效果提升用户体验
    .useEffect(true)
    .backgroundColor(this.item.isSelect
      ? $r('app.color.colorBluen1')
      : Color.Transparent)

  }
}