import { CuteParams } from '@ohos/common/src/main/ets/viewmodel/ParamBean';
import { TitleBarComponent } from '../view/TitleBarComponent';
import { ResizeStyle, TrimStyle } from '../viewmodel/LocalBean';
import { image } from '@kit.ImageKit';
import { StickerView } from '../view/StickerView';
import { common } from '@kit.AbilityKit';
import { Logger } from '@ohos/common';
import { ToastUtils } from '@ohos/common/src/main/ets/dialog/ToastUtils';
import { ImageUtils } from '@ohos/common/src/main/ets/utils/ImageUtils';
import cuteViewModel from "../viewmodel/CuteViewModel";
import { StickerItem } from '@ohos/common/src/main/ets/viewmodel/LocalBean';

@Builder
export function CuteBuilder() {
  CuteLayout()
}

/**
 * 抠图页面
 */
@Component
export struct CuteLayout {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @Consume('pageInfos') pageStack: NavPathStack;
  @State cuteParams: CuteParams | null = null;

  @State stickers: StickerItem[] = [];
  @State selectedIndex: number = -1; // 当前选中的图片索引

  @State backgroundColorVal: string | null = '#FFFFFFFF';
  @State selectedImageUri:string | null = null;
  @State processedPixelMap: image.PixelMap | null = null;

  //服装和发现预览按钮展示
  @State isPreviewButtonShow: boolean = false;
  @State clothingShow: boolean = true;
  @State hairStyleShow: boolean = true;




  aboutToAppear(): void {
    ImageUtils.openCutoutGallery().then(item => {
      if (item) {
        this.processedPixelMap = item.pixelMap;
        cuteViewModel.setProcessedPixelMap(this.processedPixelMap);
        let newItem = new StickerItem(this.processedPixelMap,0);
        newItem.zIndex = 10;
        this.stickers.push(newItem);
        this.selectedIndex = this.stickers.length - 1;
      }
    })
  }

  build() {
    NavDestination() {
      Column() {
        TitleBarComponent({
          titleName: '',
          isShowTitle: false,
          isShowBack: true,
          isShowSave: true,
          onSave: () => {
            ImageUtils.saveImageForID('sticker_container')
          }
        })

        Stack() {
          Stack({alignContent:Alignment.Top}){
            if(this.processedPixelMap == null){
              Stack() {
                Column(){
                  Image($r('app.media.ic_image_pld')).width(120).height(111.2)
                  Text('去相册选一张美照吧~').fontColor('#FFD8D8D8').fontSize(12)
                }
              }
              .width('80%')
              .aspectRatio((this.cuteParams?.width??300) / (this.cuteParams?.height??420))//300/420
              .backgroundColor('#FFFFFFFF')
              .borderColor('#FFD8D8D8')
              .borderWidth(1)
              .onClick(() => {
                ImageUtils.openCutoutGallery().then(item => {
                  if (item) {
                    this.processedPixelMap = item.pixelMap;
                    cuteViewModel.setProcessedPixelMap(this.processedPixelMap);
                    let newItem = new StickerItem(this.processedPixelMap,0);
                    newItem.zIndex = 10;
                    this.stickers.push(newItem);
                    this.selectedIndex = this.stickers.length - 1;
                  }
                })
              })

            }else{
              Stack() {
                Rect()
                  .fill(this.backgroundColorVal)
                  .width('100%')
                  .height('100%')
                  .zIndex(-1)

                ForEach(this.stickers, (item: StickerItem, index: number) => {
                  StickerView({
                    item: item,
                    selectedIndex: $selectedIndex, // 使用 $ 实现双向绑定
                    index: index
                  })
                }, (item: StickerItem) => item.id)

              }
              .id('sticker_container')
              .width('80%')
              .aspectRatio((this.cuteParams?.width??300) / (this.cuteParams?.height??420))
              .clip(true)
            }
          }
          .width('100%')
          .height('100%')


          Column(){
            //预览按钮（服装/发型）
            if(this.isPreviewButtonShow){
              Row(){
                Row(){
                  Image($r(this.clothingShow ? 'app.media.ic_look' : 'app.media.ic_un_look')).width('14vp').height('14vp').margin({ left: 5, top: 5, bottom: 5 })
                  Text('服装').fontSize(14).fontColor(this.clothingShow ?'#FF1A1A1A':'#FF767676').margin({ left: 4, right: 5, top: 5, bottom: 5 })
                }
                .borderRadius(1008)
                .borderWidth(1)
                .borderColor(this.clothingShow ?'#FF000000':'#00000000')
                .backgroundColor(this.clothingShow ?'#00000000':'#FFFFFF')
                .onClick(()=>{
                  this.clothingShow = !this.clothingShow;
                  let index = this.stickers.findIndex(item => item.type === 1);
                  if (index !== -1) {
                    this.stickers[index].isHidden = !this.clothingShow;
                  }
                })

                Row(){
                  Image($r(this.hairStyleShow ? 'app.media.ic_look' : 'app.media.ic_un_look')).width('14vp').height('14vp').margin({ left: 5, top: 5, bottom: 5 })
                  Text('发型').fontSize(14).fontColor(this.hairStyleShow ?'#FF1A1A1A':'#FF767676').margin({ left: 4, right: 5, top: 5, bottom: 5 })
                }
                .borderRadius(1008)
                .borderWidth(1)
                .borderColor(this.hairStyleShow ?'#FF000000':'#00000000')
                .backgroundColor(this.hairStyleShow ?'#00000000':'#FFFFFF')
                .margin({ left: 8 })
                .onClick(()=>{
                  this.hairStyleShow = !this.hairStyleShow;
                  let index = this.stickers.findIndex(item => item.type === 2);
                  if (index !== -1) {
                    this.stickers[index].isHidden = !this.hairStyleShow;
                  }
                })
              }
              .width('100%')
              .margin({ left: 16, bottom: 12 })
              .justifyContent(FlexAlign.Start)
            }
            BottomToolBar({
              onSwitch: async (_: string, type: number) => {
                if( type === 1 || type === 2 ){
                  this.isPreviewButtonShow = true;
                }else{
                  this.isPreviewButtonShow = false;
                }
              },
              onParamChange: async (name: string, type: number, color: string | undefined, clothing: TrimStyle | undefined, hairStyle: TrimStyle | undefined, width: number, height:number) => {
                const context = getContext(this) as common.UIAbilityContext;
                const defaultIcon = $r('app.media.ic_cute_background_color_normal');
                //type:0 颜色，1 衣服， 2 发型， 3 尺寸
                if(type==0){
                  this.backgroundColorVal = color??'#FFFFFFFF'
                }else if(type==1){
                  let clothingIcon = clothing?.icon ?? $r('app.media.ic_cute_background_color_normal');
                  if (clothing?.icon.id == defaultIcon.id) {
                    let tempStickers = this.stickers.filter(s => s.type !== 1);

                    this.stickers = tempStickers;
                    this.selectedIndex = this.stickers.length - 1;
                  }else{
                    try {
                      const pm = await ImageUtils.getPixelMapFromResource(clothingIcon, context);

                      if (pm) {
                        let clothingItem = this.stickers.find(item => {return item.type === 1});
                        let newItem = new StickerItem(pm,1);
                        newItem.zIndex = 20;
                        if(this.stickers.length<=1){
                          this.stickers.push(newItem);
                        }else if (clothingItem) {
                          clothingItem.pixelMap = pm;
                        } else {
                          let tempStickers = this.stickers.filter(s => s.type !== 1);
                          tempStickers.push(newItem);

                          this.stickers = tempStickers;
                          this.selectedIndex = this.stickers.findIndex(s => s.id === newItem.id);
                        }
                      }
                    } catch (e) {
                      console.error("加载失败: " + e);
                    }
                  }
                }else if(type==2){
                  let hairStyleIcon = hairStyle?.icon ?? $r('app.media.ic_cute_background_color_normal');
                  if (hairStyle?.icon.id == defaultIcon.id) {
                    //无
                    let tempStickers = this.stickers.filter(s => s.type !== 2);

                    this.stickers = tempStickers;
                    this.selectedIndex = this.stickers.length - 1;
                  }else{
                    try {
                      const pm = await ImageUtils.getPixelMapFromResource(hairStyleIcon, context);

                      if (pm) {
                        let hairStyleItem = this.stickers.find(item => {return item.type === 2});

                        let newItem = new StickerItem(pm,2);
                        newItem.zIndex = 20;

                        if(this.stickers.length<=1){
                          //只有头像则直接添加
                          this.stickers.push(newItem);
                        }else if (hairStyleItem) {
                          hairStyleItem.pixelMap = pm;
                        } else {
                          let tempStickers = this.stickers.filter(s => s.type !== 2);
                          tempStickers.push(newItem);

                          this.stickers = tempStickers;
                          this.selectedIndex = this.stickers.findIndex(s => s.id === newItem.id);
                        }
                      }
                    } catch (e) {
                      console.error("加载失败: " + e);
                    }
                  }
                }else if(type==3){
                  if (this.cuteParams) {
                    this.cuteParams.width = width;
                    this.cuteParams.height = height;
                  } else {
                    this.cuteParams = { id: 0, name: name, width: width, height: height };
                  }
                }
              }
            })
              .width('100%')
          }
        }
        .alignContent(Alignment.Bottom)
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF4F4F4')
    }
    .onReady((context: NavDestinationContext) => {
      this.cuteParams = context.pathInfo.param as CuteParams;
    })
    .hideTitleBar(true)
  }
}


@Component
struct BottomToolBar {
  onSwitch?: (name: string, type: number) => void;
  onParamChange?: (name: string, type: number, color: string | undefined, clothing: TrimStyle | undefined, hairStyle: TrimStyle | undefined, width: number, height:number) => void;
  @State indexTable: number = 0;
  @State clothingShow: boolean = true;
  @State hairStyleShow: boolean = false;

  build() {
    Column(){
      if(this.indexTable == 0){
        BackgroundColorBar({
          onColorChange: (color: string) => {
            this.onParamChange?.('', 0, color, undefined, undefined, 0, 0)
          }
        })
          .onAppear(() => {
            this.onSwitch?.('背景', 0);
          })
      }
      else if(this.indexTable == 1){
        ClothingBar({
          onClothingChange: (clothing: TrimStyle) => {
            Logger.info('BottomToolBar', 'ClothingBar--->onClothingChange');
            this.onParamChange?.('', 1, undefined, clothing, undefined, 0, 0)
          }
        })
          .onAppear(() => {
            this.onSwitch?.('服装', 1);
          })
      }
      else if(this.indexTable == 2){
        HairstyleBar({
          onHairstyleChange: (hairStyle: TrimStyle) => {
            this.onParamChange?.('', 2, undefined, undefined, hairStyle, 0, 0)
          }
        })
          .onAppear(() => {
            this.onSwitch?.('发型', 2);
          })
      }else if(this.indexTable == 3){
        ResizeBar({
          onResizeChange: (resizeStyle: ResizeStyle) => {
            this.onParamChange?.('', 3, undefined,  undefined, undefined, resizeStyle.width, resizeStyle.height)
          }
        })
          .onAppear(() => {
            this.onSwitch?.('尺寸', 3);
          })
      }

      // 底部工具tab栏
      Row() {
        Row(){
          if(this.indexTable == 0){
            Image($r('app.media.ic_cute_background_icon')).width('14vp').height('14vp').margin({ right: 2})
          }
          Text('背景')
            .fontSize(14)
            .height(34)
            .fontColor(this.indexTable == 0? '#FF1A1A1A' : '#FFAAAAAA')
            .align(Alignment.Center)
        }
        .justifyContent(FlexAlign.Center) // 设置主轴（横向）居中
        .alignItems(VerticalAlign.Center) // 设置交叉轴（纵向）居中
        .layoutWeight(1)
        .borderRadius(359)
        .borderColor(this.indexTable == 0? '#FF1A1A1A' : '#FFAAAAAA')
        .borderWidth(1)
        .margin({right: 13, bottom: 20})
        .onClick(()=>{
          this.indexTable = 0;
        })

        Row(){
          if(this.indexTable == 1){
            Image($r('app.media.ic_cute_clothing_icon')).width('14vp').height('14vp').margin({ right: 2})
          }
          Text('服装')
            .fontSize(14)
            .height(34)
            .fontColor(this.indexTable == 1? '#FF1A1A1A' : '#FFAAAAAA')
            .align(Alignment.Center)
        }
        .justifyContent(FlexAlign.Center) // 设置主轴（横向）居中
        .alignItems(VerticalAlign.Center) // 设置交叉轴（纵向）居中
        .layoutWeight(1)
        .borderRadius(359)
        .borderColor(this.indexTable == 1? '#FF1A1A1A' : '#FFAAAAAA')
        .borderWidth(1)
        .margin({right: 13, bottom: 20})
        .onClick(()=>{
          this.indexTable = 1;
        })

        Row(){
          if(this.indexTable == 2) {
            Image($r('app.media.ic_cute_hairstyle_icon')).width('14vp').height('14vp').margin({ right: 2})
          }
          Text('发型')
            .fontSize(14)
            .height(34)
            .fontColor(this.indexTable == 2? '#FF1A1A1A' : '#FFAAAAAA')
            .align(Alignment.Center)
        }
        .justifyContent(FlexAlign.Center) // 设置主轴（横向）居中
        .alignItems(VerticalAlign.Center) // 设置交叉轴（纵向）居中
        .layoutWeight(1)
        .borderRadius(359)
        .borderColor(this.indexTable == 2? '#FF1A1A1A' : '#FFAAAAAA')
        .borderWidth(1)
        .margin({right: 13, bottom: 20})
        .onClick(()=>{
          this.indexTable = 2;
        })

        Row(){
          if(this.indexTable == 3) {
            Image($r('app.media.ic_cute_resize_icon')).width('14vp').height('14vp').margin({ right: 2})
          }
          Text('尺寸')
            .fontSize(14)
            .height(34)
            .fontColor(this.indexTable == 3? '#FF1A1A1A' : '#FFAAAAAA')
            .align(Alignment.Center)
        }
        .justifyContent(FlexAlign.Center) // 设置主轴（横向）居中
        .alignItems(VerticalAlign.Center) // 设置交叉轴（纵向）居中
        .layoutWeight(1)
        .borderRadius(359)
        .borderColor(this.indexTable == 3? '#FF1A1A1A' : '#FFAAAAAA')
        .borderWidth(1)
        .margin({bottom: 20})
        .onClick(()=>{
          this.indexTable = 3;
        })
      }
      .width('100%')
      .padding({left:16, right:16, top:20})
    }
    .width('100%')
    .backgroundColor('#FFFFFF')
    .borderRadius({ topLeft: 16, topRight: 16})
    .padding({top: 13})
  }
}

@Component
struct BackgroundColorBar {
  onColorChange?: (color: string) => void;
  @State indexSelected: number = 0;
  @State colors: Array<string> = ['#FFFF0000', '#FFCA1318', '#FF990C09', '#FF438EDB', '#FF1838EF', '#FF38CBFB', '#FFFFFFFF'];
  build() {
    Column() {
      Text('基础色')
        .fontSize(16)
        .fontColor('#FF1A1A1A')

      Image($r('app.media.ic_title_indicator'))
        .width(32)
        .height(5)
        // .offset({ y: -18 })

      Row(){
        Stack() {
          Image($r('app.media.ic_cute_background_color_normal'))
            .aspectRatio(1)
            .layoutWeight(1)
            .width('26vp')
            .height('26vp')
            .onClick(()=>{
              this.indexSelected = 0;

              this.onColorChange?.('#00000000')
            })
          if(0 == this.indexSelected){
            Circle()
              .width('20vp')
              .height('20vp')
              .fill(Color.Transparent)
              .stroke('#4d414040')
              .strokeWidth('2vp')
          }
        }

        Row().width(23)
        ForEach(this.colors, (color: string, index: number) => {
          Stack() {
            Circle()
              .width('26vp')
              .height('26vp')
              .fill(color)

            if((index + 1) == this.indexSelected){
              Circle()
                .width('24vp')
                .height('24vp')
                .fill(color == '#FFFFFFFF'? '#FFEDEDED' :'#FFFFFFFF')
            }

            Circle()
              .width('12vp')
              .height('12vp')
              .fill(color)
          }
          .width('26vp')
          .height('26vp')
          .borderWidth(0.5)
          .borderColor('#FFAAAAAA')
          .borderRadius(359)
          .aspectRatio(1)
          .layoutWeight(1)
          .onClick(()=>{
            this.indexSelected = index + 1;
            this.onColorChange?.(color)
          })
          if(index < this.colors.length-1){
            Row().width(23)
          }
        })
      }
      .width('100%')
      .height(84)
      .padding({left: 16, right: 16})
    }
  }
}

@Component
struct ClothingBar {
  onClothingChange?: (clothing: TrimStyle) => void;
  @State indexSelected: number = 0;
  @State femaleSelected: number = 0;
  @State manSelected: number = 0;
  @State private clothingFemales: TrimStyle[] = [
    { id: '0', type: 0, name: '无', icon: $r('app.media.ic_cute_background_color_normal') },
    { id: '1', type: 0, name: '青春', icon: $r('app.media.ic_clothing_female_1') },
    { id: '2', type: 0, name: '学生', icon: $r('app.media.ic_clothing_female_2') },
    { id: '3', type: 0, name: '职场', icon: $r('app.media.ic_clothing_female_3') },
    { id: '4', type: 0, name: '休闲', icon: $r('app.media.ic_clothing_female_4') },
    { id: '5', type: 0, name: '日韩', icon: $r('app.media.ic_clothing_female_5') },
    { id: '6', type: 0, name: '艺术', icon: $r('app.media.ic_clothing_female_6') }
  ];
  @State private clothingMans: TrimStyle[] = [
    { id: '0', type: 1, name: '无', icon: $r('app.media.ic_cute_background_color_normal') },
    { id: '1', type: 1, name: '青春', icon: $r('app.media.ic_clothing_man_2') },
    { id: '2', type: 1, name: '学生', icon: $r('app.media.ic_clothing_man_3') },
    { id: '3', type: 1, name: '职场', icon: $r('app.media.ic_clothing_man_4') },
    { id: '4', type: 1, name: '休闲', icon: $r('app.media.ic_clothing_man_5') },
    { id: '5', type: 1, name: '日韩', icon: $r('app.media.ic_clothing_man_6') },
    { id: '6', type: 1, name: '艺术', icon: $r('app.media.ic_clothing_man_7') }
  ];
  build() {
    Column() {
      //男装~女装
      Row(){
        Column(){
          Text('女装')
            .fontSize(16)
            .fontColor('#FF1A1A1A')

          if(0 == this.indexSelected){
            Image($r('app.media.ic_title_indicator'))
              .width(32)
              .height(5)
          }
        }
        .onClick(()=>{
          this.indexSelected = 0;
        })
        .justifyContent(FlexAlign.Center)
        .layoutWeight(1)

        Column(){
          Text('男装')
            .fontSize(16)
            .fontColor('#FF1A1A1A')

          if(1 == this.indexSelected){
            Image($r('app.media.ic_title_indicator'))
              .width(32)
              .height(5)
          }
        }
        .onClick(()=>{
          this.indexSelected = 1;
        })
        .layoutWeight(1)
        .justifyContent(FlexAlign.Center)
      }
      .margin({ bottom:12 })

      if(0 == this.indexSelected){
        Scroll(){
          Row(){
            ForEach(this.clothingFemales, (clothing: TrimStyle, index: number) => {
              Stack() {
                Column()
                  .width('100%')
                  .height('100%')
                  .linearGradient({
                    angle: 180, // 渐变方向：180度表示从上到下
                    colors: [
                      ['#FFF4F4F4', 0.0],   // 起始颜色：灰色，位置 0%
                      ['#00FFFFFF', 1.0]    // 结束颜色：白色透明，位置 100%
                    ]
                  })
                Stack({ alignContent: Alignment.Bottom }){
                  if(clothing.name == '无'){
                    Stack(){
                      Image(clothing.icon)
                        .width(25)
                        .height(25)
                    }
                    .width('100%')
                    .height('100%')
                    .onClick(()=>{
                      if(cuteViewModel.getProcessedPixelMap()){
                        this.femaleSelected = index;
                        this.onClothingChange?.(clothing);
                      }else{
                        ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                      }
                    })
                  }else{
                    Image(clothing.icon)
                      .width('100%')
                      .layoutWeight(1)
                      .onClick(()=>{
                        if(cuteViewModel.getProcessedPixelMap()){
                          this.femaleSelected = index;
                          this.onClothingChange?.(clothing);
                        }else{
                          ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                        }
                      })
                  }
                  Text(clothing.name)
                    .textAlign(TextAlign.Center)
                    .fontSize(10)
                    .fontColor('#FFFFFFFF')
                    .width('100%')
                    .height(16)
                    .backgroundColor('#4D000000')
                    .backdropBlur(9.29)
                    .borderRadius({bottomLeft:3.71, bottomRight:3.71})
                }
                .width('100%')
                .height('100%')
              }
              .width(65)
              .height(82)
              .aspectRatio(65/82)
              .borderRadius(3.71)
              .borderColor(this.femaleSelected == index? '#FFC2FF43' : '#00000000')
              .borderWidth(1.86)
              .margin({ left: index==0? 16 : 8, right: index==this.clothingFemales.length-1? 16 : 0})
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }else{
        Scroll(){
          Row(){
            ForEach(this.clothingMans, (clothing: TrimStyle, index: number) => {
              Stack({ alignContent: Alignment.Bottom }) {
                Column()
                  .width('100%')
                  .height('100%')
                  .linearGradient({
                    angle: 180, // 渐变方向：180度表示从上到下
                    colors: [
                      ['#FFF4F4F4', 0.0],   // 起始颜色：灰色，位置 0%
                      ['#00FFFFFF', 1.0]    // 结束颜色：白色透明，位置 100%
                    ]
                  })
                if(clothing.name == '无'){
                  Stack(){
                    Image(clothing.icon)
                      .width(25)
                      .height(25)
                  }
                  .width('100%')
                  .height('100%')
                  .onClick(()=>{
                    if(cuteViewModel.getProcessedPixelMap()){
                      this.manSelected = index;
                      this.onClothingChange?.(clothing);
                    }else{
                      ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                    }
                  })
                }else{
                  Image(clothing.icon)
                    .width('100%')
                    .layoutWeight(1)
                    .onClick(()=>{
                      if(cuteViewModel.getProcessedPixelMap()){
                        this.manSelected = index;
                        this.onClothingChange?.(clothing);
                      }else{
                        ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                      }
                    })
                }
                Text(clothing.name)
                  .textAlign(TextAlign.Center)
                  .fontSize(10)
                  .fontColor('#FFFFFFFF')
                  .width('100%')
                  .height(16)
                  .backgroundColor('#4D000000')
                  .backdropBlur(9.29)
                  .borderRadius({bottomLeft:3.71, bottomRight:3.71})
              }
              .width(65)
              .height(82)
              .aspectRatio(65/82)
              .borderRadius(3.71)
              .borderColor(this.manSelected == index? '#FFC2FF43' : '#00000000')
              .borderWidth(1.86)
              .margin({ left: index==0? 16 : 8, right: index==this.clothingMans.length-1? 16 : 0})
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }
    }
  }
}

@Component
struct HairstyleBar {
  onHairstyleChange?: (hairstyle: TrimStyle) => void;
  @State indexSelected: number = 0;
  @State femaleSelected: number = 0;
  @State manSelected: number = 0;
  @State private hairstyleFemales: TrimStyle[] = [
    { id: '0', type: 0, name: '无', icon: $r('app.media.ic_cute_background_color_normal') },
    { id: '1', type: 0, name: '青春', icon: $r('app.media.ic_hairstyle_female_1') },
    { id: '2', type: 0, name: '学生', icon: $r('app.media.ic_hairstyle_female_2') },
    { id: '3', type: 0, name: '职场', icon: $r('app.media.ic_hairstyle_female_3') },
    { id: '4', type: 0, name: '休闲', icon: $r('app.media.ic_hairstyle_female_4') },
    { id: '5', type: 0, name: '日韩', icon: $r('app.media.ic_hairstyle_female_5') },
    { id: '6', type: 0, name: '艺术', icon: $r('app.media.ic_hairstyle_female_6') }
  ];
  @State private hairstyleMans: TrimStyle[] = [
    { id: '0', type: 1, name: '无', icon: $r('app.media.ic_cute_background_color_normal') },
    { id: '1', type: 1, name: '青春', icon: $r('app.media.ic_hairstyle_man_1') },
    { id: '2', type: 1, name: '学生', icon: $r('app.media.ic_hairstyle_man_2') },
    { id: '3', type: 1, name: '职场', icon: $r('app.media.ic_hairstyle_man_3') },
    { id: '4', type: 1, name: '休闲', icon: $r('app.media.ic_hairstyle_man_4') },
    { id: '5', type: 1, name: '日韩', icon: $r('app.media.ic_hairstyle_man_5') },
    { id: '6', type: 1, name: '艺术', icon: $r('app.media.ic_hairstyle_man_6') }
  ];
  build() {
    Column() {
      //男~女发型
      Row(){
        Column(){
          Text('女生')
            .fontSize(16)
            .fontColor('#FF1A1A1A')

          if(0 == this.indexSelected){
            Image($r('app.media.ic_title_indicator'))
              .width(32)
              .height(5)
          }
        }
        .onClick(()=>{
          this.indexSelected = 0;
        })
        .justifyContent(FlexAlign.Center)
        .layoutWeight(1)

        Column(){
          Text('男生')
            .fontSize(16)
            .fontColor('#FF1A1A1A')

          if(1 == this.indexSelected){
            Image($r('app.media.ic_title_indicator'))
              .width(32)
              .height(5)
          }
        }
        .onClick(()=>{
          this.indexSelected = 1;
        })
        .layoutWeight(1)
        .justifyContent(FlexAlign.Center)
      }
      .margin({ bottom:12 })


      if(0 == this.indexSelected){
        Scroll(){
          Row(){
            ForEach(this.hairstyleFemales, (hairstyle: TrimStyle, index: number) => {
              Stack({ alignContent: Alignment.Bottom }) {
                Column()
                  .width('100%')
                  .height('100%')
                  .linearGradient({
                    angle: 180, // 渐变方向：180度表示从上到下
                    colors: [
                      ['#FFF4F4F4', 0.0],   // 起始颜色：灰色，位置 0%
                      ['#00FFFFFF', 1.0]    // 结束颜色：白色透明，位置 100%
                    ]
                  })
                  .borderRadius(3.71)
                if(hairstyle.name == '无'){
                  Stack(){
                    Image(hairstyle.icon)
                      .width(25)
                      .height(25)
                  }
                  .width('100%')
                  .height('100%')
                  .onClick(()=>{
                    if(cuteViewModel.getProcessedPixelMap()){
                      this.femaleSelected = index;
                      this.onHairstyleChange?.(hairstyle)
                    }else{
                      ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                    }
                  })
                }else{
                  Image(hairstyle.icon)
                    .layoutWeight(1)
                    .onClick(()=>{
                      if(cuteViewModel.getProcessedPixelMap()){
                        this.femaleSelected = index;
                        this.onHairstyleChange?.(hairstyle)
                      }else{
                        ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                      }
                    })
                }
                Text(hairstyle.name)
                  .textAlign(TextAlign.Center)
                  .fontSize(10)
                  .fontColor('#FFFFFFFF')
                  .width('100%')
                  .height(16)
                  .backgroundColor('#4D000000')
                  .backdropBlur(9.29)
                  .borderRadius({bottomLeft:3.71, bottomRight:3.71})
              }
              .width(65)
              .height(82)
              .aspectRatio(65/82)
              .borderRadius(3.71)
              .borderColor(this.femaleSelected == index? '#FFC2FF43' : '#00000000')
              .borderWidth(1.86)
              .margin({ left: index==0? 16 : 8, right: index==this.hairstyleFemales.length-1? 16 : 0})
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }else{
        Scroll(){
          Row(){
            ForEach(this.hairstyleMans, (hairstyle: TrimStyle, index: number) => {
              Stack({ alignContent: Alignment.Bottom }) {
                Column()
                  .width('100%')
                  .height('100%')
                  .linearGradient({
                    angle: 180, // 渐变方向：180度表示从上到下
                    colors: [
                      ['#FFF4F4F4', 0.0],   // 起始颜色：灰色，位置 0%
                      ['#00FFFFFF', 1.0]    // 结束颜色：白色透明，位置 100%
                    ]
                  })
                  .borderRadius(3.71)
                if(hairstyle.name == '无'){
                  Stack(){
                    Image(hairstyle.icon)
                      .width(25)
                      .height(25)
                  }
                  .width('100%')
                  .height('100%')
                  .onClick(()=>{
                    if(cuteViewModel.getProcessedPixelMap()){
                      this.manSelected = index;
                      this.onHairstyleChange?.(hairstyle)
                    }else{
                      ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                    }
                  })
                }else{
                  Image(hairstyle.icon)
                    .layoutWeight(1)
                    .onClick(()=>{
                      if(cuteViewModel.getProcessedPixelMap()){
                        this.manSelected = index;
                        this.onHairstyleChange?.(hairstyle)
                      }else{
                        ToastUtils.showToast(this.getUIContext(), '请先选择头像');
                      }
                    })
                }

                Text(hairstyle.name)
                  .textAlign(TextAlign.Center)
                  .fontSize(10)
                  .fontColor('#FFFFFFFF')
                  .width('100%')
                  .height(16)
                  .backgroundColor('#4D000000')
                  .backdropBlur(9.29)
                  .borderRadius({bottomLeft:3.71, bottomRight:3.71})
              }
              .width(65)
              .height(82)
              .aspectRatio(65/82)
              .borderRadius(3.71)
              .borderColor(this.manSelected == index? '#FFC2FF43' : '#00000000')
              .borderWidth(1.86)
              .margin({ left: index==0? 16 : 8, right: index==this.hairstyleMans.length-1? 16 : 0})
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }
    }
  }
}

@Component
struct ResizeBar {
  onResizeChange?: (resizeStyle: ResizeStyle) => void;
  @State indexSelected: number = 0;
  @State private resizeStyle: ResizeStyle[] = [
    { id: '1', name: '标准一寸', width:25,height:35 },
    { id: '2', name: '小一寸', width:22,height:32 },
    { id: '3', name: '标准二寸', width:35,height:53 },
    { id: '4', name: '小二寸', width:33,height:48 },
    { id: '5', name: '身份证', width:26,height:32 },
    { id: '6', name: '护照', width:33,height:48 },
    { id: '7', name: '驾驶证', width:22,height:32 },
    { id: '8', name: '社保卡', width:26,height:32 },
    { id: '9', name: '四六级', width:26,height:32 },
    { id: '10', name: '司法考试', width:33,height:48 },
    { id: '11', name: '结婚证', width:40,height:60 },
    { id: '12', name: '中国签证', width:35,height:45 }
  ];
  build() {
    Column() {
      Column() {
        Text('选择尺寸')
          .fontSize(16)
          .fontColor('#FF1A1A1A')
        Image($r('app.media.ic_title_indicator'))
          .width(32)
          .height(5)
      }
      .margin({ bottom:14 })

      Scroll(){
        Row(){
          ForEach(this.resizeStyle, (resizeStyle: ResizeStyle, index: number) => {
            Stack({ alignContent: Alignment.Bottom }) {
              Column()
                .width('100%')
                .height('100%')
                .linearGradient({
                  angle: 180, // 渐变方向：180度表示从上到下
                  colors: [
                    ['#FFF4F4F4', 0.0],   // 起始颜色：灰色，位置 0%
                    ['#00FFFFFF', 1.0]    // 结束颜色：白色透明，位置 100%
                  ]
                })
                .borderRadius(3.71)
                .borderColor('#FFEDEDED')
                .borderWidth(1)
              Stack(){
                Column(){
                  Text(resizeStyle.name)
                    .textAlign(TextAlign.Center)
                    .fontSize(12)
                    .fontColor('#FF1A1A1A')
                    .width('100%')
                    .height(16)

                  Text(resizeStyle.width + 'x' + resizeStyle.height + 'mm')
                    .textAlign(TextAlign.Center)
                    .fontSize(10)
                    .fontColor('#FFAAAAAA')
                    .width('100%')
                    .height(16)
                }
              }
              .width('100%')
              .height('100%')

            }
            .width(70)
            .height(60)
            .aspectRatio(70/60)
            .borderRadius(3.71)
            .borderColor(this.indexSelected == index? '#FFC2FF43' : '#00000000')
            .borderWidth(1.86)
            .margin({ left: index==0? 16 : 8, right: index == this.resizeStyle.length-1? 16 : 0})
            .onClick(()=>{
              this.indexSelected = index;

              this.onResizeChange?.(resizeStyle)
            })
          })
        }
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .width('100%')
    }

  }
}