<script lang="ts" setup>
  import { BasicHelp } from '/@/components/Basic';
  import { createImgPreview } from '/@/components/Preview/index';
  import snStep4 from '/@/assets/images/sn-step4.png';
  import { useI18n } from '/@/hooks/web/useI18n';
  const imgList: string[] = [snStep4];
  function handlePreview() {
    createImgPreview({ imageList: imgList, defaultWidth: 1000 });
  }

  const { t } = useI18n();
</script>

<template>
  <div>{{ t('video.configuration.monitoringPointNumberText') }}</div>

  <BasicHelp
    placement="top"
    @click="handlePreview"
    class="mx-1"
    :text="t(`video.configuration.monitoringPointNumberHelpText`)"
  />
</template>