<template>
  <view>
    <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
    <!-- #ifdef APP-ANDROID || APP-IOS || APP-HARMONY -->
    <!-- 在兼容组件中 ios 返回非普通对象数据，比如 Map 数据时候会被 jscore 统一处理为 object，和安卓产生了差异 -->
    <!-- 测试用例用来验证返回数据特殊，安卓和其他平台无此限制 -->
    <view>---</view>
    <test-props id="btn1" :numList="numList" :objList='objList' @buttonclick='onButtonClick'
      @numListChange='numListChange' @objListChange='objListChange'
      style="width: 80px;height: 30px;background-color: lightblue"></test-props>
    <view style="flex-direction: row ;">
      <text>isNumListValid: </text>
      <text id='isNumListValid'>{{isNumListValid}}</text>
    </view>
    <view style="flex-direction: row ;">
      <text>isObjListValid: </text>
      <text id='isObjListValid'>{{isObjListValid}}</text>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
  import { testInOtherFile } from './call-method-easycom-uni-modules'

  // #ifdef APP-ANDROID || APP-IOS
  import { PropsChangeEvent } from '@/uni_modules/test-props'
  // #endif

  const delay = () : Promise<string> =>
    new Promise((resolve, _) => {
      setTimeout(() => {
        resolve('')
      }, 1000)
    })

  const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)

  const numList = ref<number[]>([1])   // 传递 props
  const objList = ref<any[]>([])
  const isNumListValid = ref(false)
  const isObjListValid = ref(false)


  const callMethod1 = () => {
    // 调用组件的 foo1 方法
    callEasyMethod1.value?.foo1?.()
  }
  const callMethod2 = () => {
    // 调用组件的 foo2 方法并传递 1个参数
    callEasyMethod1.value?.foo2?.(Date.now())
  }
  const callMethod3 = () => {
    // 调用组件的 foo3 方法并传递 2个参数
    callEasyMethod1.value?.foo3?.(Date.now(), Date.now())
  }
  const callMethod4 = () => {
    // 调用组件的 foo4 方法并传递 callback
    callEasyMethod1.value?.foo4?.(() => {
      console.log('callback')
    })
  }
  const callMethod5 = () => {
    // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
    const result = callEasyMethod1.value?.foo5?.('string5') as string
    console.log(result) // string1
  }
  const callMethodTest = (text : string) : string | null => {
    const result = callEasyMethod1.value?.foo5?.(text) as string
    return result
  }
  const callMethodInOtherFile = (text : string) : string => {
    return testInOtherFile(callEasyMethod1.value!, text)
  }

  // #ifdef APP-ANDROID
  const numListChange = (res : Map<string, Map<string, any>>) => {
    const value = res['detail']!['value'] as number[]
    const isArray = Array.isArray(value)
    const isLengthGt0 = value.length > 0
    isNumListValid.value = isArray && isLengthGt0
  }
  // #endif

  // #ifdef APP-IOS || APP-HARMONY
  const numListChange = (res : any) => {
    const value = res['detail']!['value'] as number[]
    const isArray = Array.isArray(value)
    const isLengthGt0 = value.length > 0
    isNumListValid.value = isArray && isLengthGt0
  }
  // #endif


  // #ifdef APP-ANDROID
  const objListChange = (res : Map<string, Map<string, any>>) => {
    const value = res['detail']!['value'] as any[]
    const isArray = Array.isArray(value)
    const isLengthGt0 = value.length > 0
    isObjListValid.value = isArray && isLengthGt0
  }
  // #endif

  // #ifdef APP-IOS || APP-HARMONY
  const objListChange = (res : any) => {
    const value = res['detail']!['value'] as any[]
    const isArray = Array.isArray(value)
    const isLengthGt0 = value.length > 0
    isObjListValid.value = isArray && isLengthGt0
  }
  // #endif


  const onButtonClick = () => {
    // 改变 props: 观察 props 返回值为非响应式值
    numList.value = [3, 2, 1]
    objList.value = [{ id: '3' }, { id: '4' }]
  }


  const call = async () : Promise<void> => {
    callMethod1()
    await delay()
    callMethod2()
    await delay()
    callMethod3()
    await delay()
    callMethod4()
    await delay()
    callMethod5()
  }

  onReady(() => {
    call()
  })

  defineExpose({
    callMethodTest,
    callMethodInOtherFile,
    onButtonClick
  })
</script>