<template>
  <view style="flex: 1;" @click="clickEvent(0)">
    <view v-for="item in logs" :key="item">{{ item }}</view>
  </view>
  <view class="mask" @click="clickEvent(1)">
    <view class="mask-content" @click="clickEvent(2)">
    </view>
  </view>
</template>

<script setup>
  const logs = reactive<string[]>([])
  const jest_result: number[] = []
  function clickEvent(from : number) {
    if (logs.length > 5) {
      logs.shift()
      jest_result.shift()
    }
    logs.push(`trigger click from ${from}: ${Date.now()}`)
    jest_result.push(from)
  }

  function get_jest_result() {
    return jest_result
  }

  defineExpose({
    get_jest_result
  })
</script>

<style scoped>
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    align-items: center;
    justify-content: center;
  }

  .mask-content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>