<script setup lang="ts">
import { computed, onMounted, Ref, ref } from 'vue';
import { getLdapControls, getLdapState, setLdapState } from './services/ldap.service';
import { ElTabPane } from 'element-plus';
import { ILdap, ILdapState } from '@/model/Users/ldap-interface';
import { UI_REST_LDAP_CERT, UI_REST_LDAP_CONTROLLER, UI_REST_LDAP_CRL_CERT } from '@/api/api';
import { traduction } from '@/utils/language';
import { getStoreData, loading, setStoreData } from '@/utils/composition';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import HelpIcon from '@/components/HelpIcon/HelpIcon.vue';
import LdapControl from './components/LdapControl.vue';
import LdapGroupList from './components/LdapGroupList.vue';
import RightTabs from '@/components/RightTabs/RightTabs.vue';
import { urlReplace } from '@/utils/utils';

// LDAP使能
const ldapSupport = ref(false);
const activeName = ref('1');
const ldapData: Ref<ILdap> = ref({
  Controller: {
    IPAddress: '',
    Port: 0,
    Domain: '',
    BindDN: '',
    Folder: '',
  },
  LdapGroup: [],
  Certificate: {
    VerificationEnabled: false,
    VerificationLevel: '',
    CrlVerification: false,
    ServerCert: {
      Issuer: '',
      SerialNumber: '',
      Subject: '',
      ValidNotAfter: '',
      ValidNotBefore: '',
    },
    RootCert: {
      Issuer: '',
      SerialNumber: '',
      Subject: '',
      ValidNotAfter: '',
      ValidNotBefore: '',
    },
    IntermediateCert: [],
  },
  Url: {
    control: '',
    cert: '',
    crlCert: '',
  },
});

const hasUserConfigPrivil = checkPrivil(UserPrivil.userConfig);
const isSystemLocked = computed(() => {
  return getStoreData('glob', 'systemLocked');
});

const tabList: any[] = [];
for (let i = 1; i <= 6; i++) {
  tabList.push({
    index: i.toString(),
    label: traduction('COMMON_CONTROLLER') + i,
    id: 'ldapTabs_' + i,
  });
}

// 页面初始化时，初始化第一个控制器数据
onMounted(() => {
  loading(true);
  initLdapState();
  requestControlData(activeName.value);
});

function initLdapState() {
  getLdapState().then((state: ILdapState) => {
    ldapSupport.value = state.Enabled;
  });
}

// 设置LDAP使能开关
function switchLdapState(state: boolean) {
  loading(true);
  setLdapState(state)
    .then(res => {
      setStoreData('event', 'alertMessage', {
        type: 'success',
        message: traduction('COMMON_SUCCESS'),
      });
    })
    .catch(error => {
      setStoreData('event', 'alertMessage', {
        type: 'error',
        message: traduction('COMMON_FAILED'),
      });
    })
    .finally(() => {
      loading(false);
    });
}

// 重新初始化控制器数据
function reInitControl(tabName: string) {
  activeName.value = tabName;
  loading(true);
  requestControlData(tabName);
}

// 加载控制器数据
function requestControlData(num: string) {
  getLdapControls(num)
    .then((res: ILdap) => {
      const controller = res.Controller;
      const certData: any = res.Certificate;
      const userGroups = res.LdapGroup;
      ldapData.value = {
        Controller: controller,
        Certificate: certData,
        LdapGroup: userGroups,
        Url: {
          control: urlReplace(UI_REST_LDAP_CONTROLLER, {id: activeName.value}),
          cert: urlReplace(UI_REST_LDAP_CERT, {id: activeName.value}),
          crlCert: urlReplace(UI_REST_LDAP_CRL_CERT, {id: activeName.value}),
        },
      };
    })
    .catch(error => {})
    .finally(() => {
      loading(false);
    });
}
</script>

<template>
  <div class="root-container">
    <!-- LDAP头部 -->
    <div class="right-container">
      <div class="ldap-title">{{ $t('LDAP_FEATURE') }}</div>
      <div class="ldap-header">
        <span>{{ $t('LDAP_ENABLE') }}</span>
        <HelpIcon
          :id="'ldapIconHelp'"
          :tips="$t('LDAP_HEADER_TIPS', { softwareName: getStoreData('loct', 'sn') })"
          :placement="'top'"
          :pop-class="'ldap-pop'"
          :append-to-body="true"
        />
        <el-switch
          id="ldapFuncSwitch"
          v-model="ldapSupport"
          class="ldap-switch"
          :disabled="isSystemLocked || !hasUserConfigPrivil"
          @change="switchLdapState(ldapSupport)"
        ></el-switch>
      </div>
    </div>
    <!-- LDAP Tabs -->
    <div id="ldapTabs" class="ldap-tabs">
      <RightTabs
        :id="'ldapTabsBox'"
        :check-tab-index="activeName"
        :tab-list="tabList"
        :need-traduction="false"
        @handle-select="reInitControl"
      />

      <!-- LDAP控制器 -->
      <LdapControl
        :active-name="activeName"
        :locked="isSystemLocked"
        :data="ldapData"
        @reInit="reInitControl(activeName)"
      />

      <!-- LDAP用户组 -->
      <LdapGroupList
        :locked="isSystemLocked"
        :data="ldapData"
        @change="reInitControl(activeName)"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ldap-header {
  margin-top: 16px;
  display: flex;
  align-items: center;
}

.ldap-tabs {
  margin-top: 16px;
}
.ldap-switch {
  margin-left: 25px;
}

:deep(.icon-help-container) {
  vertical-align: top;
  margin-left: 4px;
}

:deep(.el-tabs--card) {
  .el-tabs__header .el-tabs__item::after {
    background-color: var(--o-bg-color-base);
    opacity: 0.8;
  }
}
// tabs 样式修改
:deep(.el-tabs) {
  .el-tabs__header {
    margin-bottom: 0;
    .el-tabs__nav {
      border: none;
    }
  }
  .el-tabs__item {
    font-size: 14px;
    line-height: 20px;
  }
  .el-tabs__item.is-active {
    background-color: var(--o-bg-color-base);
  }
}

.ldap-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--o-text-color-primary);
}
</style>

<style>
.ldap-pop.el-popper {
  max-width: 250px;
}
</style>
