<script setup lang="ts">
import { getStoreData } from '@/utils/composition';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { IconAlarm } from '@computing/opendesign-icons';

const $router = useRouter();
// 点击 - 路由跳转
function goToSecurityConfiguration() {
  $router.push({
    path: '/navigate/user/security/enhance',
  });
}
// 获取locked锁定值
let systemLockDownEnabled = computed(() => {
  return getStoreData('glob', 'systemLocked');
});
</script>

<template>
  <div v-if="systemLockDownEnabled" id="lock">
    <el-icon class="alarm-icon" :size="16">
      <IconAlarm />
    </el-icon>
    <div>
      {{ $t('COMMON_LOCKING_CONTENT1') }}
      <span class="aLink" @click="goToSecurityConfiguration()">
        {{ $t('SECURITY_ENHANCE') }}
      </span>
      {{ $t('COMMON_LOCKING_CONTENT2') }}
    </div>
  </div>
  <div v-else class="no-locked"></div>
</template>

<style scoped lang="scss">
#lock {
  margin: 8px 0;
  border: 1px solid var(--o-color-major);
  background-color: var(--o-color-major-secondary);
  padding: 12px 15px;
  margin-right: 24px;
  color: var(--o-text-color-primary);
  display: flex;
  .aLink {
    cursor: pointer;
    color: var(--o-color-primary);
  }

  .alarm-icon {
    margin-right: 8px;
  }
}
.no-locked {
  height: 16px;
  flex: 0 0 auto;
}
</style>
