<script setup lang="ts">

import { VTPCM_PAGE_ENABLED } from '@/model/configure';
import useStore from '@/stores';
import { reactive, ref, computed, onMounted } from 'vue';
import { showElMessage, getMessageId } from '@/utils/utils';
import { traduction, getErrorTranslate } from '@/utils/language';
import { getStoreData, loading, showFailedMessage } from '@/utils/composition';
import serviceClosedTpcm from '@/assets/common/image/tpcm/service-closed-tpcm.svg';
import pass from '@/assets/common/image/tpcm/pass-tpcm.svg';
import fail from '@/assets/common/image/tpcm/not-pass-tpcm.svg';

import { getHardwareIdentity, getSecureBoot, getTPCMBasicInfo, getTPCMDetailedInfo,
  getTpcmService, getVM, setTpcmService } from './tpcm.service';
import { UserPrivil, SecondAuthorityFail } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { DOMAIN_NAME, IP_REGEX_V4, IPV6 } from '@/utils/regular';
import { IdentityEntry, SecureBootEntry, TpcmTabName, VmDataEntry } from './tpcm.datatype';
import BootMetrics from './components/BootMetrics.vue';
import SecureBoot from './components/SecureBoot.vue';
import HardwareIdent from './components/HardwareIdent.vue';
import VmMetrics from './components/VmMetrics.vue';

const noPwd = getStoreData('loct', 'nopwd');
const store = useStore();
const secureBootSupported = getStoreData('loct', 'sbootspt');
const isPrivileges = checkPrivil(UserPrivil.userConfig);
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

// 基本信息form表单
const tpcmBasicInfo = reactive([
  {
    label: 'TPCM_PRODUCT_NAME',
    id: 'ProductName',
    content: '',
  },
  {
    label: 'TPCM_PRODUCT_MODEL',
    id: 'ProductModel',
    content: '',
  },
  {
    label: 'TPCM_PRODUCT_VERSION',
    id: 'ProductVersion',
    content: '',
  },
  {
    label: 'TPCM_MANUFACTURER',
    id: 'ProductManufacturer',
    content: '',
  },
  {
    label: 'TPCM_TCM_VENDOR',
    id: 'TCMManufacturer',
    content: '',
  },
  {
    label: 'TPCM_TCM_VERSION',
    id: 'TCMVersion',
    content: '',
  },
  {
    label: 'TPCM_LICENSE_TYPE',
    id: 'LicenseType',
    content: '',
  },
  {
    label: 'TPCM_EXPIRED_TIME',
    id: 'ExpiredTime',
    content:'',
  },
]);
// 基本信息右侧图片
const trustContent = reactive({
  trustedUrl: serviceClosedTpcm,
});

const basicResInfoData = ref<any>({});
const ipAddressPreData = ref('');
const tsbEnableStatus = ref(0);
const activeName = ref<TpcmTabName>(TpcmTabName.BOOT_METRICS);

const tpcmConfigData = reactive({
  initMeasureState: false,
  initControlState: false,
  initAlertMeasureState: false,
  initAlertControlState: false,
});
const isStart = ref(false);
const isTrusted = ref<boolean | null>(null);
const tpcmParams = reactive<any>({});
const srcData = reactive({
  data: [] as any[],
  state: {
    searched: false,
    sorted: false,
    paginated: false,
  },
});

const secureSrc = reactive({
  data: [],
  state: {
    searched: false,
    sorted: false,
    paginated: false,
  },
});

const hardwareSrc = reactive({
  data: [],
  state: {
    searched: false,
    sorted: false,
    paginated: false,
  },
});

const vmSrc = reactive({
  data: [] as VmDataEntry[],
  state: {
    searched: false,
    sorted: false,
    paginated: false,
  },
});

const detailTrusted = ref<boolean | null>(null);
const secureTrusted = ref<boolean | null>(null);
const hardwareTrusted = ref<boolean | null>(null);
const vTpcmTrusted = ref<boolean | null>(null);
const detailTrustedResultText = ref('TPCM_TRUST_LEVEL_LOW');
const secureTrustedResultText = ref('TPCM_TRUST_LEVEL_LOW');
const hardwareTrustedResultText = ref('TPCM_TRUST_LEVEL_LOW');
const vTpcmTrustedResultText = ref('TPCM_TRUST_LEVEL_LOW');

const dialogVisible = ref(false);
const configVisible = ref(false);
const dialogConfig = reactive({
  title: 'TPCM_CONFIG',
  content: '',
  id: 'configBox',
});

const configDialog = ref();
let param = reactive<any>({});

const configForm = reactive({
  controlState: true,
  measureState: true,
  ipAddressControl: '',
});
const configRules = reactive({
  ipAddressControl: [
    { validator: validateIp46AndDomin, message: traduction('COMMON_FORMAT_ERROR'), trigger: 'blur' },
  ],
});
const configSave = ref(false);
function validateIp46AndDomin(rule: any, value: any, callback: any) {
  if (value === '') {
    return false;
  }
  if (/^[0-9.]+$/.test(value)) {
    if (!IP_REGEX_V4.test(value)) {
      return false;
    } else {
      return true;
    }
  } else if (value.indexOf(':') > -1) {
    if (!IPV6.test(value)) {
      return false;
    } else {
      return true;
    }
  } else {
    if (!DOMAIN_NAME.test(value)) {
      return false;
    } else {
      return true;
    }
  }
}

// tpcm获取基本信息
function getTpcmbasicData() {
  loading(true);
  getTPCMBasicInfo()
    .then((res: any) => {
      basicResInfoData.value = res.data;
      tpcmBasicInfo.forEach(item => {
        if (!['LicenseType', 'ExpiredTime'].includes(item.id)) {
          item.content = basicResInfoData.value[item.id];
        }
      });
      loading(false);
    })
    .catch((error: any) => {
      loading(false);
    });
}
// 获取TPCM服务信息
function getTpcmServiceData(firstInter?: boolean) {
  loading(true);
  getTpcmService()
    .then((res: any) => {
      loading(false);
      tsbEnableStatus.value = res.data.TsbEnableStatus;
      tpcmConfigData.initMeasureState = Boolean(res.data.MeasureEnable);
      tpcmConfigData.initControlState = Boolean(res.data.MeasureControlPolicy);
      tpcmConfigData.initAlertMeasureState = Boolean(res.data.MeasureEnable);
      tpcmConfigData.initAlertControlState = Boolean(res.data.MeasureControlPolicy);
      configForm.measureState = Boolean(res.data.MeasureEnable);
      configForm.controlState = Boolean(res.data.MeasureControlPolicy);
      const response = res?.data?.TrustedCenterServerAddr;
      ipAddressPreData.value = response;
      configForm.ipAddressControl = res.data.TrustedCenterServerAddr;
      getTPCMDetailedInfoData();
      getTrustContent(tsbEnableStatus.value);
      tpcmParams['MeasureEnable'] = Boolean(res.data.MeasureEnable);
      tpcmParams['MeasureControlPolicy'] = Boolean(res.data.MeasureControlPolicy);
      tpcmParams['TrustedCenterServerAddr'] = res?.data?.TrustedCenterServerAddr;
      processExtraBsisc(res);
    })
    .catch((error: any) => {
      loading(false);
    });
}

// 获取tpcm详细信息
function getTPCMDetailedInfoData() {
  loading(true);
  Promise.all([
    getTPCMDetailedInfo().catch(() => Promise.resolve([])),
    VTPCM_PAGE_ENABLED ?
      getVM().then((res) => res.virtualMachines || []).catch(() => Promise.resolve([])) : Promise.resolve([]),
    secureBootSupported ? getSecureBoot().catch(() => Promise.resolve([])) : Promise.resolve([]),
    getHardwareIdentity().catch(() => Promise.resolve([])),
  ])
    .then(([detail, vms, secure, hardware]: any) => {
      loading(false);
      const coprocessor = 'Coprocessor';
      const sortedDetail = [
        ...detail.filter((item: any) => (item.MeasuredObject as string).includes(coprocessor)),
        ...detail.filter((item: any) => !(item.MeasuredObject as string).includes(coprocessor)),
      ];
      srcData.data = sortedDetail;
      vms.forEach(vm => vm.isMatch = vm.components?.length ? vm.components.every(item => item.isMatch) : null);
      vmSrc.data = vms;
      secureSrc.data = secure;
      hardwareSrc.data = hardware;
      getTrustedStatus(detail, vms, secure, hardware);
    })
    .catch((error: any) => {
      loading(false);
    });
}

function processExtraBsisc(res: any): void {
  tpcmBasicInfo.forEach((item)=> {
    if (item.id === 'LicenseType') {
      if (res.data.LicenseType === 1) {
        item.content = traduction('LICENSE_TYPE_TEST');
      } else if (res.data.LicenseType === 3) {
        item.content = traduction('LICENSE_TYPE_TPCM_AND_TSB');
      } else {
        item.content = '';
      }
    }

    if (item.id === 'ExpiredTime') {
      item.content = res.data.ExpiredTime ? res.data.ExpiredTime : '';
    }
  });
}

function getTrustContent(enableStatus: number): void {
  // 未开启
  if (!enableStatus) {
    trustContent.trustedUrl = serviceClosedTpcm;
    isStart.value = false;
  } else if (enableStatus && !tpcmConfigData.initMeasureState) {
    trustContent.trustedUrl = serviceClosedTpcm;
    isStart.value = false;
  } else {
    // 开启
    isStart.value = true;
  }
}

// 获取可信状态
function getTrustedStatus(detail: any, vm: VmDataEntry[], secure: SecureBootEntry[], hardware: IdentityEntry[]) {
  if (detail.length > 0 && tpcmConfigData.initMeasureState) {
    detailTrusted.value = !Boolean(detail.find((item: any) => !item.IsMatch));
    detailTrustedResultText.value = detailTrusted.value ? 'TPCM_TRUST_LEVEL_HIGH' : 'TPCM_TRUST_LEVEL_LOW';
  }
  if (vm.length > 0) {
    vTpcmTrusted.value = vm.every(item => item.isMatch != false);
    vTpcmTrustedResultText.value = vTpcmTrusted.value ? 'TPCM_TRUST_LEVEL_HIGH' : 'TPCM_TRUST_LEVEL_LOW';
  }
  if (secure.length > 0) {
    secureTrusted.value = secure.every(item => item.verificationResult === 0);
    secureTrustedResultText.value = secureTrusted.value ? 'TPCM_TRUST_LEVEL_HIGH' : 'TPCM_TRUST_LEVEL_LOW';
  }
  if (hardware.length > 0) {
    hardwareTrusted.value = hardware.every(item => item.comparedResult === 0);
    hardwareTrustedResultText.value = hardwareTrusted.value ? 'TPCM_TRUST_LEVEL_HIGH' : 'TPCM_TRUST_LEVEL_LOW';
  }
  
  isTrusted.value = [detailTrusted, secureTrusted, hardwareTrusted].every(item => !(item.value === false));
  if (isTrusted.value) {
    trustContent.trustedUrl = pass;
  } else {
    trustContent.trustedUrl = fail;
  }
}

function showHalfModal() {
  dialogVisible.value = true;
  configVisible.value = true;
}
function getBtnState() {
  const currentIpAddress = configForm.ipAddressControl;
  // 初始值跟当前设置的值不一样是才打开弹窗
  if (
    tpcmConfigData.initControlState === configForm.controlState &&
    tpcmConfigData.initMeasureState === configForm.measureState &&
    ipAddressPreData.value === currentIpAddress
  ) {
    configSave.value = false;
    return;
  }
  if (!validateIp46AndDomin([], currentIpAddress, '') || !currentIpAddress) {
    configSave.value = false;
    return;
  } else {
    configSave.value = true;
  }
}
function configFn(type: string = 'cancel') {
  if (type === 'cancel') {
    dialogVisible.value = false;
    configVisible.value = false;
    configSave.value = false;
    configForm.ipAddressControl = ipAddressPreData.value;
    configForm.measureState = tpcmConfigData.initMeasureState;
    configForm.controlState = tpcmConfigData.initControlState;
    tpcmConfigData.initAlertMeasureState = configForm.measureState;
    tpcmConfigData.initAlertControlState = configForm.controlState;
    return;
  }
  if (!noPwd) {
    configDialog.value.show();
  } else {
    saveTpcmConfig().then(() => {
      dialogVisible.value = false;
      configVisible.value = false;
    });
  }
}
function configSaveFn(res: { reason: boolean; password: string }) {
  if (!res.reason) {
    configDialog.value.hide();
    return;
  }
  saveTpcmConfig(res.password);
}

function saveTpcmConfig(secPwd?: string) {
  // 若是非免密登录，需要添加二次认证参数
  param = {};
  if (!noPwd) {
    param['ReauthKey'] = window.btoa(secPwd as string);
  }

  if (tpcmParams['MeasureEnable'] !== configForm.measureState) {
    param['MeasureEnable'] = configForm.measureState;
  }
  if (tpcmParams['MeasureControlPolicy'] !== configForm.controlState) {
    param['MeasureControlPolicy'] = configForm.controlState;
  }
  if (tpcmParams['TrustedCenterServerAddr'] !== configForm.ipAddressControl) {
    param['TrustedCenterServerAddr'] = configForm.ipAddressControl;
  }
  // 调用方法
  return new Promise(res => {
    setTpcmService(param)
      .then((response: any) => {
        showElMessage('success', traduction('COMMON_SUCCESS'));
        getTpcmServiceData();
        configDialog.value.hide();
        configSave.value = false;
        dialogVisible.value = false;
      })
      .catch((error: any) => {
        const errors = getMessageId(error.data);
        if (error && errors?.length > 0) {
          const errorId = errors[0].code;
          const errorMsg = getErrorTranslate(errorId as string);
          showFailedMessage(errorMsg);
          if (errorId === SecondAuthorityFail.AUTHORIZATIONFAILED) {
            configDialog.value.setErrorId('ReauthFailed');
            configDialog.value.clearPassword();
          } else {
            dialogVisible.value = false;
          }
        }
      });
  });
}

onMounted(() => {
  getTpcmServiceData();
  getTpcmbasicData();
});
</script>

<template>
  <div id="tpcmPage">
    <div id="trustedCompute">
      <div class="contentTitle">{{ traduction('TPCM_BASIC_INFO') }}</div>
      <el-button
        type="primary"
        class="eidtBtn"
        :disabled="!tsbEnableStatus || isSystemLock || !isPrivileges"
        @click="showHalfModal"
      >
        <span>{{ traduction('TPCM_CONFIG') }}</span>
      </el-button>
      <div class="trust-content">
        <div class="textInfo">
          <el-form>
            <el-form-item :label="traduction('TPCM_IP_ADDRESS')" :colspan="2">
              <div class="content">
                <span id="IpAddress" :title="ipAddressPreData">{{ ipAddressPreData }}</span>
              </div>
            </el-form-item>
          </el-form>
          <el-form id="tpcmInfo" class="field textForm" :inline="true">
            <el-form-item
              v-for="item of tpcmBasicInfo"
              :key="item.id"
              :label="traduction(item.label)"
              :colspan="12"
            >
              <div class="content">
                <span :id="item.id" :title="item.content">{{ item.content }}</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="isTrusted !== null" class="trust-state-show">
          <div class="trust-status">
            <img :src="trustContent.trustedUrl" alt="" />
            <div class="trust-status-text">
              <span class="trust-text">
                <el-tooltip :content="$t('TPCM_TRUST_STATE') ">
                  <div class="trust-title">{{ $t('TPCM_TRUST_STATE') }}</div>
                </el-tooltip>
                <el-tag :type="detailTrusted ? 'success' : 'danger'">{{ $t(detailTrustedResultText) }}</el-tag>
              </span>
              <span v-if="VTPCM_PAGE_ENABLED" class="trust-text">
                <el-tooltip :content="$t('TPCM_VM_TRUST_STATE')">
                  <div class="trust-title">{{ $t('TPCM_VM_TRUST_STATE') }}</div>
                </el-tooltip>
                <el-tag :type="vTpcmTrusted ? 'success' : 'danger'">{{ $t(vTpcmTrustedResultText) }}</el-tag>
              </span>
              <span v-if="secureBootSupported" class="trust-text">
                <el-tooltip :content="$t('TPCM_SECURE_STATE')">
                  <div class="trust-title">{{ $t('TPCM_SECURE_STATE') }}</div>
                </el-tooltip>
                <el-tag :type="secureTrusted ? 'success' : 'danger'">{{ $t(secureTrustedResultText) }}</el-tag>
              </span>
              <span class="trust-text">
                <el-tooltip :content="$t('TPCM_HARDWARE_STATE')">
                  <div class="trust-title">{{ $t('TPCM_HARDWARE_STATE') }}</div>
                </el-tooltip>
                <el-tag :type="hardwareTrusted ? 'success' : 'danger'">{{ $t(hardwareTrustedResultText) }}</el-tag>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpcmTableBox">
      <div class="contentTitle">{{ $t('FDM_INFO') }}</div>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('TPCM_DETAILS')" :name="TpcmTabName.BOOT_METRICS">
          <BootMetrics
            :tsb-enable-status="tsbEnableStatus"
            :is-privileges="isPrivileges"
            :src-data="srcData"
            :is-system-lock="isSystemLock"
            :tpcm-config-data="tpcmConfigData"
          ></BootMetrics>
        </el-tab-pane>
        <el-tab-pane v-if="VTPCM_PAGE_ENABLED" :label="$t('TPCM_VDETAILS')" :name="TpcmTabName.VM_BOOT_METRICS">
          <VmMetrics :src-data="vmSrc" @refresh="getTPCMDetailedInfoData"></VmMetrics>
        </el-tab-pane>
        <el-tab-pane 
          v-if="secureBootSupported"
          :label="$t('TPCM_SECURE_BOOT')" :name="TpcmTabName.SECURE_BOOT"
        >
          <SecureBoot
            :src-data="secureSrc"
          ></SecureBoot>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('TPCM_HARDWARE_IDENT')" :name="TpcmTabName.HARDWARE_ID"
        >
          <HardwareIdent
            :src-data="hardwareSrc"
          ></HardwareIdent>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 配置界面 -->
    <div v-if="dialogVisible" v-reqKeepAlive.dialog>
      <el-dialog
        :id="dialogConfig.id"
        v-model="configVisible"
        :title="$t(dialogConfig.title)"
        width="544"
        @close="configFn('cancel')"
      >
        <div>
          <el-form label-width="auto" :rules="configRules" :model="configForm">
            <el-form-item :label="$t('TPCM_TRUST_MEASURE_SWITCH')" class="small-item">
              <el-switch id="measureEnable" v-model="configForm.measureState" @change="getBtnState"></el-switch>
              <div
                v-if="!configForm.measureState && tpcmConfigData.initAlertMeasureState"
                id="measureStateShowFalse"
                class="tip-text"
              >
                {{ $t('TPCM_TRUST_TPCM_MEASURE_TIP') }}
              </div>
              <div
                v-if="configForm.measureState && !tpcmConfigData.initAlertMeasureState"
                id="measureStateShowTrue"
                class="tip-text"
              >
                {{ $t('TPCM_MEASURED_WILLOPEN_TEXT') }}
              </div>
            </el-form-item>
            <el-form-item
              v-show="configForm.measureState"
              :label="$t('TPCM_TRUST_CONTROL_SWITCH')"
              class="small-item"
            >
              <el-switch
                id="controlEnable"
                v-model="configForm.controlState"
                :disabled="!configForm.measureState"
                @change="getBtnState"
              ></el-switch>
              <div
                v-if="!configForm.controlState && configForm.measureState && tpcmConfigData.initAlertControlState"
                id="controlStateShowFalse"
                class="tip-text"
              >
                {{ $t('TPCM_TRUST_TPCM_CONTROL_TIP') }}
              </div>
              <div
                v-if="configForm.controlState && configForm.measureState && !tpcmConfigData.initAlertControlState"
                id="controlStateShowTrue"
                class="tip-text" 
              >
                {{ $t('TPCM_CONTROL_WILLOPEN_TEXT') }}
              </div>
            </el-form-item>
            <el-form-item :label="$t('TPCM_IP_ADDRESS')" prop="ipAddressControl">
              <el-input
                id="ipAddress"
                v-model="configForm.ipAddressControl"
                clearable
                @input="getBtnState"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span>
            <el-button
              id="webOkBut"
              type="primary"
              :disabled="!configSave"
              @click="configFn('save')"
            >
              {{ $t('ALARM_OK') }}
            </el-button>
            <el-button id="webCancelBut" @click="configFn('cancel')">
              {{ $t('ALARM_CANCEL') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
      <SecondPassword ref="configDialog" @close="configSaveFn" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
#tpcmPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 174px);
  padding-right: 24px;

  .contentTitle {
    display: block;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 16px;
    color: #282b33;
    line-height: 16px;
  }
  
  .blue-alert {
    margin-bottom: 16px;
    display: flex;
    padding: 8px 16px;
    background-color: var(--o-color-state-primary-secondary);
    border-radius: 4px;

    .el-icon {
      font-size: 16px;
      margin-right: 8px;
    }

    .text {
      color: var(--o-text-color-primary);
    }
  }
  .small-item {
    :deep(.el-form-item__label-wrap) {
      margin-left: 0px !important;
      height: 16px;
    }
    :deep(.el-form-item__content) {
      align-items: start;
      line-height: 16px;
      .tip-text {
        margin-left: 8px;
        width: 355px;
      }
    }
    :deep(.el-form-item__label) {
      padding: 0px 24px 0px 0px;
    }
  }

  #trustedCompute {
    background-color: #fefefe;
    padding: 32px;
    border-radius: 4px;
    margin-bottom: 16px;

    .trust-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      :deep(.el-tag) {
        min-width: 40px !important;
      }
    }
    .textInfo {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      border-right: 1px solid #dfe5ef;
      padding-top: 16px;
      #tpcmInfo {
        width: 100%;
        min-width: 700px;
        :nth-child(2n) {
          margin-right: 0px !important;
        }
        :deep(.el-form-item) {
          width: calc(50% - 16px);
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 0 !important;
      }

      :deep(.el-form-item__label) {
        font-size: 12px;
        min-width: 120px;
        color: #9ea4b3;
      }
      .content {
        font-size: 12px;
        color: var(--o-text-color-primary);
      }
    }
    :deep(.eidtBtn) {
      border-radius: 1px;
      min-width: 98px !important;
      height: 32px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 14px;
    }

    @media screen and (min-width: 1600px) {
      .trust-status {
        min-width: 472px;
      }
    }

    .trust-status {
      padding: 0 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .trust-status-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .trust-text {
        display: flex;
        color: #000;
        justify-content: space-between;
        gap: 8px;
        font-size: 14px;
        .trust-title {
          font-size: 12px;
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          letter-spacing: 0;
          line-height: 16px;
        }
      }
      img {
        margin-bottom: 8px;
      }
      .iconContent {
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #ffffff;
        line-height: 8px;
        margin-left: 8px;
        border-radius: 2px;
        padding: 4px 10px;
        height: 16px;
      }
      .tpcm-pass {
        background: #7adfa0;
      }
      .tpcm-no-pass {
        background: #f45c5e;
      }
    }
  }

  .match-text {
    font-size: 12px;
    color: var(--el-color-white);
    letter-spacing: 0;
    line-height: 12px;
    padding: 4px 8px;
    border-radius: 2px;
  }

  .icon-pass {
    color: #24ab36;
    font-weight: bold;
  }
  .icon-close {
    color: #8d98aa;
    font-weight: bold;
  }
  .configAlert {
    margin-left: 36px;
  }
}
.tpcmTableBox {
  padding: 32px;
  background-color: #fefefe;
  border-radius: 4px;
  flex: 1;
  :deep(.el-tabs__content) {
    margin-top: 16px;
  }
}
.overFlow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#generateId {
  overflow-x: hidden;
  .inputClass {
    width: 360px;
    height: 32px;
    border-radius: 1px;
    font-size: 14px;
  }
  #ipAddress {
    width: 270px !important;
  }

  :deep {
    .ti3-alert-container .ti3-icon:nth-of-type(1) {
      margin-right: 0px;
    }
    .alertStyle {
      background: #e2f1fc;
      border: 0 solid #6cbfff;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      font-size: 12px;
      color: #282b33;
      width: 100%;
    }
  }
  :deep {
    #alertMeasureType,
    #alertControlType {
      .ti3-alert-container .ti3-icon:nth-of-type(1) {
        margin-right: 8px;
      }
    }
  }
}
#baselineValId {
  :deep {
    .alertStyle {
      width: 100%;
    }
  }
}
</style>
