<template>
  <View v-show="modelValue" h-100vh w-full w-750rpx relative bg="#818181" overflow-hidden z-1000>
    <View class="th-prompt" w-400rpx text-center rounded-16rpx absolute top="1/3" left="1/2" ml="-200rpx" right-0 bg-white z-1001>
      <View color="#3a3a3a" fs-32 font-400 my-48rpx>
        {{ content }}
      </View>
      <View fs-32>
        <View bg="#f2f7ff" h-1rpx mx-32rpx />
        <View
          active="bg-#f2f7ff"
          flex-grow
          color="#3b82f6"
          py-16rpx
          cursor-pointer
          select-none
          rounded-b-16rpx
          @click="confirm"
        >
          {{ confirmText }}
        </View>
      </View>
    </View>
  </View>
</template>

<script lang="ts" setup name="Alert">
withDefaults(
  defineProps<{
    /** 是否显示 */
    modelValue?: boolean
    /** 内容 */
    content?: string
    /** 确认按钮的默认值 */
    confirmText?: string
  }>(),
  {
    modelValue: false,
    confirmText: '确定',
  },
)

const emit = defineEmits<{
  /** 更新modelValue */
  (event: 'update:modelValue', modelValue: boolean): void
  /** 确认事件 */
  (event: 'confirm'): void
}>()

function confirm() {
  emit('update:modelValue', false)
  emit('confirm')
}
</script>
