import web_webview from '@ohos.web.webview';
import process from '@ohos.process'
import router from '@ohos.router';
import uploadInstance from "../utils/UploadUtil"


const TAG = "openHarmonyBridge" //webview和vue沟通的名称
const webUrl = "http://10.88.11.200:11000"

// const webUrl = "http://10.88.20.88:3005/"

class BridgeModel {
  constructor() {

  }

  // this.controller.registerJavaScriptProxy 这个里面要对应
  download(params: string): void {
    // download(value: string, params: BridgeParams): string {
    // let downloadUrl: string = baseUrl + proxyPrefix + params.path
    // console.info(TAG, `download:`, downloadUrl);
    console.info(TAG, `params:`, params);
    // return true;
  }

  goToDevicePage(params: string): void {
    console.info(TAG, `goToDevicePage:`, params);
    uploadInstance.configUploadParam(params)
    router.pushUrl({ url: "pages/StationDevicesPage" })
  }

  selectFile(params: string): void {
    console.info(TAG, `selectFile:`, params);
    uploadInstance.configUploadParam(params)
    router.pushUrl({ url: "pages/SelectFilePage" })
  }

  startCamera(params: string): void {
    console.info(TAG, `startCamera:`, params);
    uploadInstance.configUploadParam(params)
    router.pushUrl({ url: "pages/CameraPage" })
  }

  exitApp(params: string): void {
    let pro = new process.ProcessManager();
    pro.exit(0);
  }
}


@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State bridgeObj: BridgeModel = new BridgeModel();
  hasRegistered: boolean = false
  registerJS = () => {

    // 这个必须要调用刷新才起作用， 而且只能执行一次
    if (!this.hasRegistered) {
      console.info(TAG, `registerJavaScriptProxy:`);

      this.controller.registerJavaScriptProxy(this.bridgeObj, TAG, ["download", "selectFile", "startCamera", "goToDevicePage", "exitApp"])
      this.controller.refresh()
      this.hasRegistered = true

      uploadInstance.controller = this.controller
    }
  }

  build() {
    Column() {
      Stack() {
        // 这个webview调用相机不知道为什么只能执行一次，选择文件的回到还行，但是为了统一写法还是用registerJavaScriptProxy，但是有时候注册的方法也只能执行一次，不知道为什么。
        // Web({ src: $rawfile('doc_old.html'), controller: this.controller })//测试官方文档 这个是好使的

        // Web({
        //   src: "http://192.168.101.90:3005/login",
        //   controller: this.controller
        // })
        // Web({
        //   src: "http://10.88.20.88:3005",
        //   controller: this.controller
        // })
        Web({
          src: webUrl,
          controller: this.controller
        })
          .mixedMode(MixedMode.All)
          .onlineImageAccess(true)
          .javaScriptAccess(true)
          .overviewModeAccess(true)
          .databaseAccess(true)
          .domStorageAccess(true)
          .onShowFileSelector((event) => {
            console.log(TAG, "onShowFileSelector", JSON.stringify(event))
            // this.openGallery()
            // setTimeout(() => {
            //   // 这个会触发addEventListener('change')的事件，但是每次的值都要不同。
            //   event?.result.handleFileList([Date.now() + '.jpg']);
            // }, 1300)
            return true;
          })
          .onProgressChange((e) => {
            if (e && e.newProgress == 100) {
              this.registerJS()
            }
          })

          .onPermissionRequest((event) => {
            console.log(TAG, "onPermissionRequest")

            // event.request.grant([""])
          })
        // .onConsole((e) => {
        //   console.log(TAG, "onConsole", JSON.stringify(e))
        //   return true
        // })


        // 退出程序
        // Row() {
        //   Image($r('app.media.shutdown'))
        //     .width(px2vp(80))
        //     .height(px2vp(80))
        //     .onClick(() => {
        //       let pro = new process.ProcessManager();
        //       pro.exit(0);
        //     })
        //
        // }.width(px2vp(1920))
        // .height(px2vp(80))
        // .justifyContent(FlexAlign.End)
      }.width(px2vp(1920))
      .height(px2vp(1080))
      .align(Alignment.BottomEnd)

    }
    .width(px2vp(1920))
    .height(px2vp(1080))

  }
}
