<template>
  <div v-if="showNotice" class="certification-notice">
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 mb-6">
      <div class="flex items-start">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <h3 class="text-sm font-medium text-blue-800">
            {{ title || '企业认证提示' }}
          </h3>
          <div class="mt-2 text-sm text-blue-700">
            <p>
              {{ description || '为了享受完整的API调用服务，请先完成企业入驻认证。完成认证即可领取额度奖励' }}
            </p>
          </div>
          <div class="mt-3">
            <router-link
              to="/profile/certification"
              class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
            >
              <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              立即认证
            </router-link>
          </div>
        </div>
        <div class="ml-auto pl-3">
          <button
            @click="dismissNotice"
            class="inline-flex text-blue-400 hover:text-blue-600 focus:outline-none focus:text-blue-600 transition-colors duration-200"
          >
            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CertificationNotice',
  props: {
    // 是否显示提示
    show: {
      type: Boolean,
      default: true
    },
    // 自定义标题
    title: {
      type: String,
      default: ''
    },
    // 自定义描述
    description: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dismissed: false
    }
  },
  computed: {
    showNotice() {
      return this.show && !this.dismissed
    }
  },
  methods: {
    dismissNotice() {
      this.dismissed = true
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
.certification-notice {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
