<template>
  <van-space direction="vertical" fill>
    <van-row justify="center">
      <van-col>
        <van-image
          width="10rem"
          height="10rem"
          fit="cover"
          round
          src="/nadarik.jpg"
        />
      </van-col>
    </van-row>

    <van-cell-group title="Информация о пидарасе" inset>
      <van-cell title="Имя" value="Надар" />
      <van-cell title="Должность" value="Хуеплет" label="Это чистая правда" />
    </van-cell-group>

    <van-cell-group inset>
      <van-cell title="Нажми меня" is-link @click="showActions = true" />
    </van-cell-group>
  </van-space>

  <van-action-sheet
    v-model:show="showActions"
    duration="0.1"
    :actions="actions"
    cancel-text="Атминет"
    close-on-click-action
    @select="onClickAction"
    @cancel="onCancel"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ActionSheetAction } from 'vant'
import { Haptics } from '@capacitor/haptics'

const showActions = ref(false)

const actions: ActionSheetAction[] = [
  {
    name: 'Моча',
  },
  {
    name: 'Какаши',
  },
]

function onClickAction(action: ActionSheetAction) {
  showNotify({ type: 'success', message: action.name })
  Haptics.vibrate()
}

function onCancel() {
  showNotify({ type: 'danger', message: 'Закрыто нахой' })
}
</script>

<style scoped>
</style>
