<template>
  <div v-if="showPermissionDialog" class="push-permission-dialog">
    <div class="dialog-mask"></div>
    <div class="dialog-content">
      <div class="dialog-header">
        <h3>开启消息推送</h3>
      </div>
      <div class="dialog-body">
        <p>开启推送通知，及时接收重要消息和提醒</p>
        <ul class="benefits">
          <li>• 实时接收安全检查提醒</li>
          <li>• 及时获取任务通知</li>
          <li>• 重要消息不错过</li>
        </ul>
      </div>
      <div class="dialog-footer">
        <button class="btn-cancel" @click="handleCancel">暂不开启</button>
        <button class="btn-confirm" @click="handleConfirm">立即开启</button>
      </div>
    </div>
  </div>
</template>

<script>
import pushInstance from '@/utils/push'

export default {
  name: 'PushPermission',
  data() {
    return {
      showPermissionDialog: false,
      hasRequested: false
    }
  },
  mounted() {
    this.checkAndShowPermission()
  },
  methods: {
    async checkAndShowPermission() {
      // 检查是否已经请求过权限
      const requested = localStorage.getItem('push_permission_requested')
      if (requested) {
        this.hasRequested = true
        return
      }

      // 检查当前环境是否支持推送
      const isSupported = await pushInstance.checkPermission()
      if (!isSupported) {
        // 延迟显示权限请求对话框
        setTimeout(() => {
          this.showPermissionDialog = true
        }, 2000)
      }
    },

    async handleConfirm() {
      try {
        await pushInstance.requestPermission()
        this.showPermissionDialog = false
        localStorage.setItem('push_permission_requested', 'true')
        
        // 显示成功提示
        this.$toast.success('推送权限已开启')
        
        // 触发权限开启事件
        this.$emit('permission-granted')
      } catch (error) {
        console.error('请求推送权限失败:', error)
        this.$toast.fail('推送权限开启失败')
      }
    },

    handleCancel() {
      this.showPermissionDialog = false
      localStorage.setItem('push_permission_requested', 'true')
      this.$emit('permission-denied')
    }
  }
}
</script>

<style scoped>
.push-permission-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: relative;
  width: 80%;
  max-width: 300px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dialog-header {
  padding: 20px 20px 10px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.dialog-body {
  padding: 20px;
}

.dialog-body p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.benefits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits li {
  font-size: 13px;
  color: #888;
  margin-bottom: 5px;
}

.dialog-footer {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  padding: 15px;
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-cancel {
  color: #999;
  border-right: 1px solid #f0f0f0;
}

.btn-cancel:hover {
  background: #f5f5f5;
}

.btn-confirm {
  color: #007aff;
  font-weight: 600;
}

.btn-confirm:hover {
  background: #f0f8ff;
}
</style>