<template>
  <view v-if="modelValue" class="npm-mask" @click="onMask">
    <view class="npm-card" @click.stop>
      <text class="npm-title">No Printer Connected</text>
      <text class="npm-msg">Please connect a Bluetooth or built-in printer first.</text>
      <view class="npm-divider-h" />
      <view class="npm-actions">
        <view class="npm-btn npm-btn-cancel" @click="emitCancel">
          <text class="npm-btn-text">Cancel</text>
        </view>
        <view class="npm-divider-v" />
        <view class="npm-btn npm-btn-connect" @click="emitConnect">
          <text class="npm-btn-text primary">Connect</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'connect'): void
  (e: 'cancel'): void
}>()

function close() {
  emit('update:modelValue', false)
}

function onMask() {
  emit('cancel')
  close()
}

function emitCancel() {
  emit('cancel')
  close()
}

function emitConnect() {
  emit('connect')
  close()
}
</script>

<style scoped>
.npm-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48rpx;
}

.npm-card {
  width: 100%;
  max-width: 560rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
}

.npm-title {
  display: block;
  text-align: center;
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
  padding: 40rpx 32rpx 16rpx;
}

.npm-msg {
  display: block;
  text-align: center;
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.45;
  padding: 0 40rpx 32rpx;
}

.npm-divider-h {
  height: 1rpx;
  background: #e5e7eb;
}

.npm-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100rpx;
}

.npm-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 16rpx;
}

.npm-divider-v {
  width: 1rpx;
  background: #e5e7eb;
}

.npm-btn-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #111827;
}

.npm-btn-text.primary {
  color: #2563eb;
  font-weight: 600;
}
</style>
