<script setup lang="ts">
import { ref } from 'vue';
import useStore from '@/stores';

const secProps = defineProps({
  content: {
    required: true,
    type: String,
    default: '',
  },
  cardMode: String,
});

const BANNER_MAX_HEIGHT = 64;
const store = useStore();
const bannerRef = ref(null);
const disabled = ref(true);
const webStyle = store.state.glob.webStyle;
const placement = webStyle === 'default' ? 'bottom' : 'top';
const state = ref(false);

// 安全公告tip信息的显示逻辑
function showTooltip() {
  const elem: any = bannerRef.value;
  const h = elem ? elem.scrollHeight : 0;
  if (h > BANNER_MAX_HEIGHT) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
}

function closeBanner() {
  state.value = false;
}

defineExpose({
  show: () => {
    state.value = true;
  },
  hide: () => {
    state.value = false;
  },
});
</script>

<template>
  <div v-if="state" class="root-container">
    <div
      id="secBanner"
      class="sec-notice"
      :class="{ large: cardMode === 'large' }"
      @mouseenter="showTooltip()"
    >
      <el-tooltip
        :popper-class="'security-tip'"
        :disabled="disabled"
        :content="secProps.content"
        :placement="placement"
        :append-to-body="false"
        trigger-keys
      >
        <div class="container">
          <div class="sec-close" @click.stop="closeBanner()">
            <el-icon>
              <CloseIcon />
            </el-icon>
          </div>
          <div class="sec-ico">
            <el-icon>
              <WarningFilled />
            </el-icon>
          </div>
          <div class="login-secury-content">
            <h5 class="sec-title">{{ $t('COMMON_SECURITY_BANNNER') }}</h5>
            <div ref="bannerRef" class="sec-content">{{ secProps.content }}</div>
          </div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../login.scss';

.login--button-tip {
  width: 100%;
  padding: 16px;
}
</style>
