<script setup lang="ts">
import { ref, reactive } from 'vue';
import useStore from '@/stores';
import { IconX } from '@computing/opendesign-icons';

const store = useStore();
const showLoginInfor = ref(Boolean(store.state.loct.lip && store.state.loct.ltime));
function clickClose() {
  showLoginInfor.value = false;
  store.state.loct.setLoctState({ type: 'ltime', value: '' });
}

let lastLoginInfor: any = reactive([
  {
    label: 'COMMON_USERNAME',
    value: store.state.loct.un,
  },
  {
    label: 'COMMON_LOGIN_IP',
    value: store.state.loct.uip,
  },
  {
    label: 'COMMON_LOGIN_TIME',
    value: store.state.loct.ltime,
  },
]);

setTimeout(clickClose, 10000);
</script>

<template>
  <div v-if="showLoginInfor" id="homeLoginInfor" class="login-infor">
    <div class="login-infor-head">
      <span v-t="'HOME_LAST_LOGIN_INFORMATION'" class="login-last-infor"></span>
      <IconX id="homeLoginCloseIcon" class="icon-x" @click="clickClose()" />
    </div>
    <div class="login-content">
      <div class="label-container">
        <span
          v-for="item in lastLoginInfor"
          :key="item.label"
          v-t="item.label"
          class="login-infor-item"
        ></span>
      </div>
      <div class="content-container">
        <span v-for="item in lastLoginInfor" :key="item.label" class="login-infor-item">
          {{ item.value }}
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-infor {
  position: fixed;
  bottom: 48px;
  right: 46px;
  background: var(--o-bg-color-light);
  text-align: left;
  padding: 16px;
  min-width: 320px;
  border: 1px solid var(--o-border-color-light);
  box-shadow: var(--o-box-shadow-tip);
  z-index: 9999;
}
#homeLoginCloseIcon {
  cursor: pointer;
}
.icon-x {
  width: 12px;
  height: 12px;
  color: var(--o-text-color-tertiary);
}
.login-infor-head {
  font-size: 16px;
  color: var(--o-text-color-primary);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  line-height: 24px;
}
.login-content {
  display: flex;
}
.label-container {
  color: var(--o-text-color-tertiary);
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.content-container {
  color: var(--o-text-color-primary);
  margin-left: 16px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.login-infor-item {
  margin-top: 8px;
}
</style>
