
import image from '@ohos.multimedia.image';
import fs from "@ohos.file.fs"
import { ConfirmDialog } from '../ConfirmDialog';
import { ConfirmDialogParams } from '../../viewmodel/ConfirmDialogParam';
import OperationComponent from '../../viewmodel/process/OperationComponent';

const TAG = "ESOP"
@Component
export struct ESOPView {
  @Link opComponents: OperationComponent[]
  @Link index:number
  @State commodityPixelMap: PixelMap | null = null;
  @State photoPixelMaps: photoInfo[] = []; // 存储所有照片的 PixelMap
  private scrollerPhoto: Scroller = new Scroller()
  @State selectedPhotoIndex:number = -1
  @State leftButtonClick:number =1
  @State rightButtonClick:number=1
  @State description:string[]=[
    '1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。1. 准备材料与工具材料：PCB板、电子元件、焊锡丝（含助焊剂）。工具：电烙铁（温度可调）、镊子、吸锡器、助焊剂（可选）、防静电设备。。',
    '2. 元件定位用镊子将元件引脚对准PCB焊盘，轻压固定。',
    '3. 焊接操作烙铁头清洁并预热至300~350℃（铅锡合金）或350~400℃（无铅锡）。烙铁头同时接触焊盘与元件引脚，送焊锡丝至接触点，待熔锡自然流动后撤离。'
  ]


  //提示确认弹窗
  commonDialogController: CustomDialogController | null = null;

  private showConfirmDialog() {
    if (this.commonDialogController) {
      this.commonDialogController.close()
    }

    this.commonDialogController = new CustomDialogController({
      builder: ConfirmDialog({
        title: '工步确认',  // 直接写死标题
        message: 'ESOP工步是否已完成？',  // 直接写死内容
        onConfirm: () => {
          this.opComponents[this.index].isComplete=true
          this.index++
        }
      }),
      cancel: () => console.log('用户取消操作'),
      customStyle: true,
      autoCancel: false,
      maskColor: 'rgba(0,0,0,0.6)'
    });

    this.commonDialogController.open();
  }


  loadPhotos = async () => {
    const context = getContext(this);
    console.info(TAG, '开始加载照片', context.filesDir);
    try {
      const localImageDir = `${context.filesDir}/esop/`;
      // 检查目录是否存在
      if (!fs.accessSync(localImageDir)) {
        console.warn(TAG, "目录不存在，创建目录");
        fs.mkdirSync(localImageDir);
      }

      const newPixelMaps: photoInfo[] = [];
      let imageIndex = 1;

      // 动态检测连续的图片文件
      while (true) {
        const filename = `Image_esop_${imageIndex.toString().padStart(3, '0')}.jpg`;
        const filePath = `${localImageDir}${filename}`;

        // 检查文件是否存在
        if (!fs.accessSync(filePath)) {
          console.info(TAG, `文件 ${filename} 不存在，停止加载`);
          break; // 重要：添加 break 语句停止循环
        }

        try {
          const imageSource = image.createImageSource(filePath);
          const imageInfo = await imageSource.getImageInfo();
          const scaleRatio = Math.min(600 / imageInfo.size.width, 800 / imageInfo.size.height);

          const thumbnailOpts: image.InitializationOptions = {
            size: {
              width: Math.floor(imageInfo.size.width * scaleRatio),
              height: Math.floor(imageInfo.size.height * scaleRatio)
            }
          }
          const pixelMap = await imageSource.createPixelMap(thumbnailOpts);
          newPixelMaps.push({
            pixelMap: pixelMap,
            filename: filename
          });
          imageSource.release();
          console.info(TAG, `成功加载图片: ${filename}`);
        } catch (err) {
          console.error(TAG, `加载图片 ${filename} 失败:`, err);
          break; // 如果加载失败，停止继续尝试
        }

        imageIndex++;
      }
      this.photoPixelMaps = newPixelMaps;
      console.info(TAG, `共加载了 ${newPixelMaps.length} 张图片`);
      if (newPixelMaps.length > 0) {
        this.selectedPhotoIndex = 0;
      }
    } catch (err) {
      console.error(TAG, "加载照片失败:", err);
    }
  };
  aboutToAppear() {
    this.loadPhotos()
  }


  build() {
    Column() {
      Row() {
        Text('ESOP')
          .fontSize($r('app.float.fontSize_24'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.FFFFFF'))
      }
      .height('10%')
      .width('96%')

      Row(){
        Image(this.selectedPhotoIndex===-1?this.commodityPixelMap:this.photoPixelMaps[this.selectedPhotoIndex].pixelMap)
          .width('65%')
          .height('100%')
          .objectFit(ImageFit.Fill)
          .borderRadius($r('app.float.virtualSize_20'))
        Divider()
          .vertical(true)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
          .height('100%')
          .margin({left:'1%',right:'1%'})
        Row() {
          Scroll() {
            Text(this.description[this.selectedPhotoIndex])
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Regular)
              .fontColor($r('app.color.FFFFFF'))
              .width('100%')
          }
          .scrollable(ScrollDirection.Vertical)    // 垂直滚动
          .width('35%')
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
      }.width('96%')
      .height('70%')
      if(this.selectedPhotoIndex!=-1)
      {
        Row(){
          Row() {
            Image($r("app.media.double_left"))
              .width($r('app.float.virtualSize_24'))
              .height($r('app.float.virtualSize_24'))
              .fillColor($r('app.color.0A84FF'))
          }
          .width('3%')
          .height('85%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .scale({ x: this.leftButtonClick, y: this.leftButtonClick })
          .animation({
            duration: 200,
            curve: Curve.Linear
          })
          .onClick(()=>{
            this.leftButtonClick = 0.9; // 点击时缩小
            setTimeout(() => {
              this.leftButtonClick = 1; // 0.2秒后恢复
              if(this.selectedPhotoIndex===0) return
              this.selectedPhotoIndex--
            }, 200);
          })
          List({ space: 8,scroller:this.scrollerPhoto }) {
            ForEach(this.photoPixelMaps, (item:photoInfo, index) => {
              ListItem() {
                Column({space:4}){
                  Column(){
                    Image(item.pixelMap)
                      .objectFit(ImageFit.Fill)
                      .borderRadius($r('app.float.virtualSize_16'))
                      .height('97%')
                      .width('98%')
                      .opacity(index === this.selectedPhotoIndex ? 0.8 : 1)  // 20% 閫忔槑搴?
                    // Text("第"+index+"步")
                    //   .fontSize($r('app.float.fontSize_16'))
                    //   .fontColor($r('app.color.FFFFFF'))
                    //   .width('60%')
                    //   .textAlign(TextAlign.Start)
                  }
                  .backgroundColor(index === this.selectedPhotoIndex ? $r('app.color.30D158') : '')
                  .width('90%')
                  .justifyContent(FlexAlign.Center)
                  .alignItems(HorizontalAlign.Center)
                  .borderRadius($r('app.float.virtualSize_16'))
                  .height('100%')
                  // Text(`${item.updated}`)
                  //   .fontSize($r('app.float.fontSize_12'))
                  //   .fontColor($r('app.color.FFFFFF'))
                  //   .width('90%')
                  //   .textAlign(TextAlign.Start)
                }
                .width('100%')
                .height('100%')
                .justifyContent(FlexAlign.Start)
                .alignItems(HorizontalAlign.Center)
                //.enabled(!this.isCapturing)
                .onClick(()=>{
                  this.selectedPhotoIndex = index;
                  // this.resetImageTransform()
                  // this.stopView();

                })
              }.height('100%')
              .width('20%')
            })
          }
          .width('59%')
          .height('85%')
          .listDirection(Axis.Horizontal)
          Row() {
            Image($r("app.media.double_right"))
              .width($r('app.float.virtualSize_24'))
              .height($r('app.float.virtualSize_24'))
              .fillColor($r('app.color.0A84FF'))
          }
          .width('3%')
          .height('85%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .scale({ x: this.rightButtonClick, y: this.rightButtonClick })
          .animation({
            duration: 200,
            curve: Curve.Linear
          })
          .onClick(()=>{
            this.rightButtonClick = 0.9;
            setTimeout(() => {
              this.rightButtonClick = 1;
            }, 200);
            if(this.selectedPhotoIndex===this.photoPixelMaps.length-1) {
              this.showConfirmDialog()
            }else{
              this.selectedPhotoIndex++
            }
          })
        } .height('16%')
        .width('96%')
        .margin({top:'1%'})
      }
    }
    .width('100%')
    .height('100%')
  }

}
interface photoInfo {
  pixelMap: PixelMap;
  filename: string;
}