import { ChangePhotoGrids, HdNav, ViewImageInfo } from "@itcast/basic"
import { PhotoActionSheet } from '@itcast/basic'

@Component
export struct MyOpinionComp {
  @State photos: string[] = []
  @State previewIndex: number = -1
  @State maxSelectNumber: number = 6
  private photoSheetDialog!: CustomDialogController;
  @State
  @Watch('onRemoveImg')
  removeImg: boolean=false

  @State
  @Watch('onAddImg')
  addImg: boolean=false

  @State removeIndex: number=0
  onAddImg()
  {
    this.photoSheetDialog.open()
  }
  onRemoveImg()
  {
    this.photos.splice(this.removeIndex, 1)
    this.maxSelectNumber = this.maxSelectNumber - this.photos.length;
  }
  private initPhotoDialog() {
    this.photoSheetDialog = new CustomDialogController({
      builder: PhotoActionSheet({
        controller: this.photoSheetDialog,
        maxSelectNumber:this.maxSelectNumber,
        // 修改为支持多选
        onPhotoSelected: async (uris: string[] | string) => {
          let selectedUris: string[] = [];
          if (Array.isArray(uris)) {
            selectedUris = uris;
          } else if (typeof uris === 'string') {
            selectedUris = [uris];
          }

            this.photos.push(...selectedUris);
          this.maxSelectNumber = this.maxSelectNumber - this.photos.length;


        }
        // onPhotoSelected: async (uri: string) => {
        //   if (uri && this.photos.length < 9) {
        //     this.photos.push(uri)
        //   }
        //   // this.photoPath = uri;
        //   // this.base64Stringphoto = await ChangeUtil.convertUriToBase64(uri);
        // }
      }),
      alignment: DialogAlignment.Bottom,
      customStyle: true,
      autoCancel: false,
      backgroundColor: ('rgba(0,0,0,0.5)'),
      height: '100%'
    });
  }
  aboutToAppear(): void {
    this.initPhotoDialog()
  }


  build() {
    Column() {
      HdNav({ title: '我的意见', showRightIcon: false, showLeftIcon: true })

      ChangePhotoGrids({imgList:this.changeToImg(this.photos),maxSelectNumber:6
      ,addImg:this.addImg,removeImg:this.removeImg,removeIndex:this.removeIndex})
        .backgroundColor(Color.Red)


    }
    .height('100%')
    .width('100%')
  }

  changeToImg( imgListurl:string[])
  {
    let imgListtmps:ViewImageInfo[]=[]
    imgListurl.forEach((url: string) => {
      let item = {uri:url} as ViewImageInfo
      imgListtmps.push(item)
    })
    return imgListtmps

  }
}