<template>
  <div id="twoFactorView">
    <div class="two-factor-content">
      <div class="two-factor-switch">
        <p>{{ $t('COMMON_USER_TWO_FACTOR') }}</p>
        <el-form
          ref="refTwoFactor"
          :model="formTwoFactor"
          label-width="auto"
          :inline="false"
          size="default"
          label-position="left"
        >
          <el-form-item :label="$t('COMMON_USER_TWO_FACTOR')" class="small-item">
            <el-switch
              id="twoFactorId"
              v-model="formTwoFactor.twoFactor"
              :disabled="systemLock || !hasUserConfigPrivil"
              @change="onTwoFactorChange"
            ></el-switch>
          </el-form-item>
          <el-form-item :label="$t('TWO_FACTORS_REVOCATION_CHECK')" class="small-item">
            <el-switch
              id="ocspId"
              v-model="formTwoFactor.OCSP"
              :disabled="systemLock || !hasUserConfigPrivil"
              @change="onOCSPChange"
            ></el-switch>
          </el-form-item>
          <el-form-item :label="$t('TWO_FACTORS_CRL_CHECK')" class="small-item">
            <el-switch
              id="crlId"
              v-model="formTwoFactor.CRL"
              :disabled="systemLock || !hasUserConfigPrivil"
              @change="onCRLChange"
            ></el-switch>
          </el-form-item>
          <el-form-item :label="$t('TWO_FACTORS_ROOT_CERTIFICATE')" class="small-item">
            <CertificateRedirect
              ref="redirectComp"
              :need-save="false"
              message="CERTIFICATE_TO_CA"
              @callback="callback()"
              @redirect="redirect()"
            />
          </el-form-item>
        </el-form>
        <Dialog ref="dialogRef" :config="diaginfo" @close="dialogClose"></Dialog>
      </div>
      <div class="two-factor-tables">
        <RightTabs :check-tab-index="activeName" :tab-list="tabList" @handle-select="handleClick" />
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import {
  alertMessage,
  getTwoFactoryData,
  rootCertInfoAssemble,
  setTwoFactoryData
} from './twoFactor.service';
import { traduction } from '@/utils/language';
import Dialog from '@/components/Dialog/Dialog.vue';
import { useRoute, useRouter } from 'vue-router';
import GlobalStoreService from '@/services/gloabal-store-service';
import useStore from '@/stores';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import RightTabs from '@/components/RightTabs/RightTabs.vue';
import CertificateRedirect from '@/pages/User/Certificate/CertificateRedirect.vue';

const redirectComp = ref();

const globService = new GlobalStoreService();

// 获取locked锁定值
const store = useStore();
let systemLock = computed(() => {
  return store.state.glob.systemLocked;
});

const tabList: any[] = [
  {
    id: 'twoFactorViewTab1',
    index: '1',
    label: 'TWO_FACTORS_CLIENT_CERTIFICATE',
    router: '/navigate/user/two-factor/client'
  }
];

const hasUserConfigPrivil = checkPrivil(UserPrivil.userConfig);

const dialogVisible = ref(false);
const dialogRef = ref();
const diaginfo = reactive({
  id: '',
  content: '',
  title: ''
});
const formTwoFactor = reactive({
  twoFactor: false,
  OCSP: false,
  CRL: false
});
const activeName = ref();

const setParam = {};
let dialogId: string;

const $router = useRouter();
const $route = useRoute();
activeName.value = computed(() => {
  // 根证书页签隐藏
  return '1';
});
const handleClick = (tab: string, event: Event) => {
  switch (tab) {
    case '0':
      $router.push('/navigate/user/two-factor/root');
      break;
    case '1':
      $router.push('/navigate/user/two-factor/client');
      break;
    default:
      $router.push('/navigate/user/two-factor/client');
      break;
  }
  init();
};
function delParam(param: any) {
  for (const index in param) {
    if (param[index]) {
      delete param[index];
    }
  }
}

function saveSwitchData(param: any) {
  globService.loading(true);
  setTwoFactoryData(param)
    .then((response: any) => {
      pacthStatus(response.data);
      globService.loading(false);
      alertMessage('success', 'COMMON_SUCCESS');
    })
    .catch(err => {
      globService.loading(false);
      init();
    });
}
function onTwoFactorChange() {
  delParam(setParam);
  setParam['TwoFactorAuthenticationEnabled'] = formTwoFactor.twoFactor;
  if (formTwoFactor.twoFactor) {
    diaginfo.id = 'twoFactorDialog';
    diaginfo.title = traduction('COMMON_CONFIRM');
    diaginfo.content = traduction('TWO_FACTORS_FACTOR_AUTH_TIP');
    dialogVisible.value = true;
    dialogId = 'twoFactorDialog';
    dialogRef.value.show();
  } else {
    saveSwitchData(setParam);
  }
}
function dialogClose(val: boolean) {
  dialogVisible.value = false;
  dialogRef.value.hide();
  if (val) {
    saveSwitchData(setParam);
  } else {
    if (dialogId === 'twoFactorDialog') {
      formTwoFactor.twoFactor = !formTwoFactor.twoFactor;
    } else if (dialogId === 'ocspDialog') {
      formTwoFactor.OCSP = !formTwoFactor.OCSP;
    } else if (dialogId === 'crlDialog') {
      formTwoFactor.CRL = !formTwoFactor.CRL;
    }
  }
}
function onOCSPChange() {
  delParam(setParam);
  setParam['OCSPEnabled'] = formTwoFactor.OCSP;
  if (formTwoFactor.OCSP) {
    diaginfo.id = 'ocspDialog';
    diaginfo.title = traduction('COMMON_CONFIRM');
    diaginfo.content = traduction('TWO_FACTORS_OCSP_TIP');
    dialogId = 'ocspDialog';
    dialogVisible.value = true;
    dialogRef.value.show();
  } else {
    saveSwitchData(setParam);
  }
}
function onCRLChange() {
  delParam(setParam);
  setParam['CRLEnabled'] = formTwoFactor.CRL;
  if (formTwoFactor.CRL) {
    diaginfo.id = 'crlDialog';
    diaginfo.title = traduction('COMMON_CONFIRM');
    diaginfo.content = traduction('TWO_FACTORS_CRL_TIP');
    dialogVisible.value = true;
    dialogRef.value.show();
    dialogId = 'crlDialog';
  } else {
    saveSwitchData(setParam);
  }
}
function pacthStatus(resData: any) {
  formTwoFactor.twoFactor = resData.TwoFactorAuthenticationEnabled;
  formTwoFactor.OCSP = resData.OCSPEnabled;
  formTwoFactor.CRL = resData.CRLEnabled;
}
function init() {
  globService.loading(true);
  getTwoFactoryData()
    .then((response: any) => {
      const resData = response['data'];
      pacthStatus(resData);
      globService.loading(false);
    })
    .catch(error => {
      globService.loading(false);
    });
}

function redirect(): void {
  $router.push('/navigate/user/certificate/ca-certificate-list');
}

function callback(): void {
  redirect();
}

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
#twoFactorView {
  .two-factor-content {
    padding-right: 24px;
  }
  .two-factor-switch {
    background-color: var(--o-bg-color-base);
    border-radius: 4px;
    padding: 24px 24px 1px 24px;
    margin-bottom: 16px;
    > p {
      font-size: 16px;
      margin-bottom: 16px;
    }
  }
  .tables {
    background-color: var(--o-bg-color-base);
  }
}
:deep(.small-item) {
  height: 16px;
  .el-form-item__label {
    padding-top: 0;
    padding-bottom: 0;
  }
  .el-form-item__content {
    line-height: 16px;
  }
  .el-radio {
    height: 16px;
  }
  .el-radio__label {
    color: var(--o-text-color-secondary);
  }
  .el-checkbox-group {
    .el-checkbox {
      height: auto;
    }
  }
}
</style>