
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 = "ElectricScrewdriver"
@Component
export struct ElectricScrewdriverView {
  @Link opComponents: OperationComponent[]
  @Link index:number
  // 拧紧控制基本参数
  @State targetTorque: number = 0.01; // 目标扭力 (Nm)
  @State tighteningMode: string = "扭矩控制"; // 拧紧模式：扭矩控制/角度控制/屈服控制
  @State rotationDirection: string = "顺时针"; // 旋转方向：clockwise/anticlockwise

  // 拧紧过程参数
  @State torqueMaintenanceTime: number = 1000; // 扭力保持时间 (ms)
  @State floatHeightDetectionCycles: number = 3; // 浮高界定圈数
  @State stripDetectionCycles: number = 5; // 滑牙界定圈数

  // 扭力容差参数
  @State torqueUpperLimit: number = 0.015; // 扭力偏差上限 (+50%)
  @State torqueLowerLimit: number = 0.005; // 扭力偏差下限 (-50%)

  // 质量检测开关
  @State enableFloatAndStrip: boolean = true; // 开启浮高滑牙检测
  //@State enableStripDetection: boolean = true; // 开启滑牙检测

  // 拧紧状态监控
  // @State currentTorque: number = 0; // 当前实时扭力
  // @State totalRotation: number = 0; // 总旋转圈数
  @State tighteningStatus: string = "ready"; // 拧紧状态：ready/running/completed/failed


  @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 currentTemp :number = 150
  @State preSetTemp :number = 150
  @State isOpenPurifier:boolean = true
  @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('紧固操作')
          .fontSize($r('app.float.fontSize_24'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.FFFFFF'))
      }
      .height('10%')
      .width('96%')


      Row(){
        Column(){
          Image(this.selectedPhotoIndex===-1?this.commodityPixelMap:this.photoPixelMaps[this.selectedPhotoIndex].pixelMap)
            .width('100%')
            .height('80%')
            .objectFit(ImageFit.Fill)
            .borderRadius($r('app.float.virtualSize_20'))
          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('5%')
              .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--
                  this.currentTemp-=50
                  this.preSetTemp-=50
                }, 200);
              })
              List({ space: 3,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('90%')
              .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('5%')
              .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++
                  this.currentTemp+=50
                  this.preSetTemp+=50
                }
              })
            } .height('18%')
            .width('100%')
            .margin({top:'1%'})
          }
        }.width('65%')
        .height('100%')
        Divider()
          .vertical(true)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
          .height('100%')
          .margin({left:'1%',right:'1%'})
        Column() {
          Scroll() {
            Text(this.description[this.selectedPhotoIndex])
              .fontSize($r('app.float.fontSize_16'))
              .fontWeight(FontWeight.Regular)
              .fontColor($r('app.color.FFFFFF'))
              .width('100%')
          }
          .scrollable(ScrollDirection.Vertical)    // 垂直滚动
          .width('98%')
          .height('40%')
          Divider()
            .vertical(false)
            .strokeWidth(1)
            .color($r('app.color.15FFFFFF'))
            .width('100%')
            .margin({top:'3%',bottom:'3%'})
          Column({space:10}){
            Text('电动螺丝刀参数')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.FFFFFF'))
              .margin({bottom:'3%'})
            Row(){
              ParamsComponent({
                value:this.rotationDirection,
                title:'旋转方向'
              }).height('100%').width('45%')
              Row(){}.width('10%')
              ParamsComponent({
                value:this.torqueMaintenanceTime,
                title:'保持时间'
              }).height('100%').width('45%')
            }.height('18%').width('100%')
            Row(){
              ParamsComponent({
                value:this.targetTorque,
                title:'目标扭力(Kgf.cm'
              }).height('100%').width('45%')
              Row(){}.width('10%')
              Column(){
                Text('开启浮高滑牙检测')
                  .fontSize($r('app.float.fontSize_12'))
                  .fontWeight(FontWeight.Normal)
                  .fontColor($r('app.color.FFFFFF'))
                Toggle({ type: ToggleType.Switch, isOn: this.enableFloatAndStrip  })
                  .selectedColor($r('app.color.30D158'))
                  .switchPointColor($r('app.color.FFFFFF'))
                    //.enabled(this.scanState === 1 ? true : false)
                  .onChange( (isOn: boolean) => {
                    this.enableFloatAndStrip = isOn

                  })
              }.height('100%')
              .width('45%')
              .justifyContent(FlexAlign.Center)
              .alignItems(HorizontalAlign.Start)
            }.height('18%').width('100%')
            Row(){
              ParamsComponent({
                value:this.torqueUpperLimit,
                title:'扭力偏差上限(Kgf.cm)'
              }).height('100%').width('45%')
              Row(){}.width('10%')
              ParamsComponent({
                value:this.torqueLowerLimit,
                title:'扭力偏差下限(Kgf.cm)'
              }).height('100%').width('45%')
            }.height('18%').width('100%')
            Row(){
              ParamsComponent({
                value:this.floatHeightDetectionCycles,
                title:'浮高界定圈数(r)'
              }).height('100%').width('45%')
              Row(){}.width('10%')
              ParamsComponent({
                value:this.stripDetectionCycles,
                title:'滑牙界定圈数(r)'
              }).height('100%').width('45%')
            }.height('18%').width('100%')
          }
          .height('52%')
          .margin({top:'2%'})
          .width('98%')

        }
        .width('33%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }.width('96%')
      .height('88%')
    }
    .width('100%')
    .height('100%')
  }

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


@Component
export struct ParamsComponent {
  @Prop value : number|string
  @Prop title:string
  @State addButtonClick:number =1
  @State subButtonClick:number =1
  onButtonClick: () => void = () => {}
  build() {
    Column({space:4}){
      Text(this.title)
        .fontSize($r('app.float.fontSize_12'))
        .fontWeight(FontWeight.Normal)
        .fontColor($r('app.color.FFFFFF'))
      Row(){
        Row(){
          Row().width('5%')
          Text(`${this.value}`)
            .fontSize($r('app.float.fontSize_16'))
            .fontWeight(FontWeight.Normal)
            .fontColor($r('app.color.FFFFFF'))
        }
        .width('100%')
        .height('70%')
        .borderRadius($r('app.float.virtualSize_14'))
        .backgroundColor($r('app.color.10FFFFFF'))
      }
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
}