harmony/features/patient/src/main/ets/components/GroupManagementComp.ets

import { BasicConstant, hdHttp, HdResponse, authStore, HdNav , HdLoadingDialog, ChangeUtil,DefaultHintProWindows,InputPopWindow } from '@itcast/basic/Index'
import { promptAction, router } from '@kit.ArkUI'
import { groupModel } from '../models/PatientsGroupModel'
import HashMap from '@ohos.util.HashMap';
import { BusinessError } from '@kit.BasicServicesKit';

@Component
export struct GroupManagementComp {
  @State params:Record<string, string> = router.getParams() as Record<string, string>
  private hintWindowDialog!: CustomDialogController
  @State dialogInputValue: string = ''; // 绑定输入框的值
  // InputPopWindow: CustomDialogController; // 控制器实例
  @State groupList: Array<Record<string,string>> = []
  @State selectedGroups: Array<Record<string,string>> = []

  dialog: CustomDialogController = new CustomDialogController({
    builder: HdLoadingDialog({ message: '加载中...' }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

  private hintPopWindowDialog() {
    this.hintWindowDialog = new CustomDialogController({
      builder:DefaultHintProWindows({
        controller:this.hintWindowDialog,
        message:'最多只能选三项',
        confirmTitleColor: '#333333',
        selectedButton: (index:number)=>{
          this.hintWindowDialog.close();
        }
      }),
      alignment: DialogAlignment.Center,
      cornerRadius:24,
      backgroundColor: ('rgba(0,0,0,0.5)'),
    })
  }

  aboutToAppear() {
    this.hintPopWindowDialog()
    this.addShowTagAction()
    this.fetchGroups()
  }

  addShowTagAction() {
    if (!ChangeUtil.stringIsUndefinedAndNull(this.params.groupNames)) {
      this.selectedGroups = convertToRecordArray(String(this.params.groupNames),String(this.params.groupUuids))
    }
  }

  fetchGroups() {
    this.dialog.open()
    hdHttp.post<string>(BasicConstant.GroupList, {
      "expert_uuid": authStore.getUser().uuid
    } as Record<string,string>).then(async (res: HdResponse<string>) => {
      this.dialog.close();
      let json:Record<string,string | Array<Record<string,string>>> = JSON.parse(res+'') as Record<string,string | Array<Record<string,string>>>
      if(json.code == '1') {
        console.info('上一层传过来的group:',this.params.groupNames)
        // groupUuids
        this.groupList = json.data as Array<Record<string,string>>
      } else {
        console.error('获取分组列表信息失败：'+json.message)
        promptAction.showToast({ message: String(json.message), duration: 1000 })
      }
    }).catch((err: BusinessError) => {
      this.dialog.close();
      console.error(`Response fails: ${err}`);
    })
  }

  onSelectGroup(item: Record<string,string>) {
    const idx = this.selectedGroups.findIndex(g => g.uuid === item.uuid)
    if (idx > -1) {
      this.selectedGroups.splice(idx, 1)
      this.selectedGroups = [...this.selectedGroups]
    } else {
      if (this.selectedGroups.length >= 3) {
        this.hintWindowDialog.open()
        return
      }
      this.selectedGroups.push(item)
      this.selectedGroups = [...this.selectedGroups]
    }
  }

  getSelected(item:Record<string,string>):boolean {
    let selected = this.selectedGroups.some(g => g.uuid === item.uuid)
    return selected
  }

  isChangeColor(showItem:Record<string,string>):boolean {
    return this.selectedGroups.some(item=>`${item.uuid}` === `${showItem.uuid}`)
  }

  onAddGroup() {

  }

  confirmAddGroup() {
    // if (!this.newGroupName.trim()) {
    //   promptAction.showToast({ message: '请输入分组名', duration: 1000 })
    //   return
    // }
    // if (this.newGroupName.length > 10) {
    //   promptAction.showToast({ message: '最多10个字符', duration: 1000 })
    //   return
    // }
    // this.addLoading = true
    // const params = {
    //   expert_uuid: authStore.getUser().uuid,
    //   name: this.newGroupName.trim(),
    //   patient_uuid: ''
    // }
    // hdHttp.post<string>(BasicConstant.addGroup, params).then(async (res: HdResponse<string>) => {
    //   this.addLoading = false
    //   let json = JSON.parse(res + '') as { code: number, message: string }
    //   if (json.code === 1) {
    //     this.showAddDialog = false
    //     this.addDialog.close()
    //     this.fetchGroups()
    //     promptAction.showToast({ message: '添加成功', duration: 1000 })
    //   } else {
    //     promptAction.showToast({ message: json.message, duration: 1000 })
    //   }
    // }).catch(() => {
    //   this.addLoading = false
    // })
  }

  build() {
    Column() {
      HdNav({ title: '分组管理', showRightIcon: false, hasBorder: true, rightText: '保存', showRightText: true })
      // 已选分组
      Row() {
        Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
          ForEach(this.selectedGroups, (item: Record<string, string>) => {
            Text(item.name)
              .border({ width: 1, color: $r('app.color.main_color') })
              .fontColor($r('app.color.main_color'))
              .fontSize(16)
              .borderRadius(10)
              .padding({
                left: 10,
                right: 10,
                top: 5,
                bottom: 5
              })
              .margin({ right: 10 })
              .borderRadius(20)
          })
        }
      }
      .alignItems(VerticalAlign.Top)
      .justifyContent(FlexAlign.Start)
      .width('100%').height(100)
      .backgroundColor(Color.White)
      .padding({left:10,top:10,right:10})
      Column() {
        Row() {
          Text('所有分组').fontColor($r('app.color.main_color')).fontSize(15)
          Text('（选择或取消分组）').fontColor('#999999').fontSize(15)
        }
        .margin({ left: 10, top: 10 })
        .justifyContent(FlexAlign.Start)

        Row() {
          Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
            ForEach(this.groupList, (item: Record<string, string>) => {
                Text(item.name)
                  .border({ width: 1, color: this.getSelected(item)||this.isChangeColor(item) ? '#981308' : '#999999' })
                  .fontColor(this.getSelected(item)||this.isChangeColor(item) ? '#981308' : '#999999')
                  .fontSize(16)
                  .padding({
                    left: 10,
                    right: 10,
                    top: 5,
                    bottom: 5
                  })
                  .margin({ left: 10, top: 10})
                  .borderRadius(10)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(Color.White)
                  .onClick(() => this.onSelectGroup(item))
            })
          }
        }
        .justifyContent(FlexAlign.Start)
      }
      .width('100%')
      .height('40%')
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .backgroundColor(Color.White)
      .margin({top:10})
      .layoutWeight(1)

      Text('添加分组')
        .width('100%')
        .height(50)
        .fontSize(20)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .backgroundColor('#3CC7C0')
        .margin({bottom:10})
        .onClick(()=>this.onAddGroup())
    }
    .height('100%')
    .backgroundColor('#f4f4f4')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
}

export function convertToRecordArray(
  namesStr: string,
  uuidsStr: string
): Record<string, string>[] {
  const names: string[] = namesStr.split(",").map(item => item.trim());
  const uuids: string[] = uuidsStr.split(",").map(item => item.trim());

  const maxLength: number = Math.max(names.length, uuids.length);
  const result: Record<string, string>[] = [];

  for (let i = 0; i < maxLength; i++) {
    const name: string = i < names.length ? names[i] : "";
    const uuid: string = i < uuids.length ? uuids[i] : "";
    const newObject:Record<string,string> = {"name":name,"uuid":uuid} as Record<string,string>
    result.push(newObject);
  }
  return result;
}