<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import useStore from '@/stores';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { traduction } from '@/utils/language';
import HelpIcon from '@/components/HelpIcon/HelpIcon.vue';
import KerberosBase from './components/KerberosBase.vue';
import kerberosGroup from './components/KerberosGroup.vue';
import { getKerberos, switchKerberos } from './services/kerberos.services';
import { IKerberos, IGroup } from '@/pages/User/models/type';
import { loading } from '@/utils/composition';
import { showElMessage } from '@/utils/utils';

const store = useStore();
// 系统锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const isPrivileges = checkPrivil(UserPrivil.userConfig);
// 开关状态
const switchState = ref(false);
let userPassword = '';
let kerberosInfo: IGroup;
const userGroups: object[] = reactive([]);
let baseData: { realm?: string; server?: string; port?: string } = reactive({});
// 初始化
function init() {
  loading(true);
  userGroups.length = 0;
  getKerberos()
    .then((response: [IKerberos, IGroup]) => {
      loading(false);
      switchState.value = response[0].KerberosEnabled;
      userPassword = '';
      const member: IGroup = response[1];
      kerberosInfo = response[1];
      baseData.realm = member.realm;
      baseData.server = member.kerberosServerAddress;
      baseData.port = member.kerberosPort;
      // 设置表格数据,去掉sid为空的
      kerberosInfo.kerberosGroups.forEach(item => {
        userGroups.push(item);
      });
    })
    .catch(error => {
      loading(false);
    });
}

// 开启关闭kerberos使能
function switchChange(val: boolean) {
  loading(true);
  switchKerberos(val)
    .then(res => {
      loading(false);
      showElMessage('success', traduction('COMMON_SUCCESS'));
    })
    .catch(error => {
      loading(false);
      showElMessage('error', traduction('COMMON_FAILED'));
    });
}

onMounted(() => {
  init();
});
</script>
<template>
  <div id="kerberos" class="kerberos-container">
    <h3>{{ $t('KERBEROS_FEATURE') }}</h3>
    <div class="ker-header">
      <span>{{ $t('KERBEROS_ENABLE') }}</span>
      <HelpIcon id="krbIconHelp" placement="top" :tips="$t('KERBEROS_HEADER_TIPS')"></HelpIcon>
      <el-switch
        id="kerberosSwitch"
        v-model="switchState"
        :disabled="!isPrivileges || isSystemLock"
        class="ker-switch"
        @change="switchChange"
      />
    </div>
  </div>
  <div class="kerberos-container">
    <KerberosBase :data="baseData"></KerberosBase>
  </div>
  <div class="kerberos-container">
    <kerberosGroup :data="userGroups" @change="init"></kerberosGroup>
  </div>
</template>
<style lang="scss" scoped>
.kerberos-container {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 24px;
  height: auto !important;
  margin-right: 24px;
  margin-bottom: 8px;
}
.ker-header {
  margin-top: 16px;
}
.ker-switch {
  margin-left: 24px;
}
:deep(.icon-help-container) {
  margin-left: 9px;
}
</style>
