<script setup lang="ts">
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 passTpcm from '@/assets/common/image/tpcm/pass-tpcm.svg';
import notPassTpcm from '@/assets/common/image/tpcm/not-pass-tpcm.svg';
import serviceClosedTpcm from '@/assets/common/image/tpcm/service-closed-tpcm.svg';
import { IconRemind } from '@computing/opendesign-icons';

import {
  updateService,
  getTpcmService,
  getTPCMDetailedInfo,
  getTPCMBasicInfo,
  setTpcmService
} from './tpcm.service';
import { UserPrivil, SecondAuthorityFail } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { VALID_BASELINE, IP_REGEX_V4, IPV6, DOMAIN_NAME } from '@/utils/regular';
const noPwd = getStoreData('loct', 'nopwd');
const store = useStore();
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: ''
  }
]);
// 基本信息右侧图片
const trustContent = reactive({
  trustedUrl: serviceClosedTpcm,
  isPass: false
});

const basicResInfoData = ref({});
const ipAddressPreData = ref('');
const tsbEnableStatus = ref(0);

const tpcmConfigData = reactive({
  initMeasureState: false,
  initControlState: false,
  initAlertMeasureState: false,
  initAlertControlState: false
});
const isStart = ref(false);
const isTrusted = ref(false);
const updateSave = ref(true);
const trustText = ref('TPCM_TRUST_STATE');
const trustResultText = ref('TPCM_TRUST_LEVEL_HIGH');
const tpcmParams = reactive({});
const srcData = reactive({
  data: [],
  state: {
    searched: false,
    sorted: false,
    paginated: false
  }
});
const updateBoxVisible = ref(false);
const updateBoxBasicVisible = ref(false);
const pswVisible = ref(false);
const dialogVisible = ref(false);
const configVisible = ref(false);
const dialogConfig = reactive({
  title: 'TPCM_CONFIG',
  content: '',
  id: 'configBox'
});
const updateBox = reactive({
  title: 'TPCM_UPDATE',
  content: '',
  id: 'updateBox'
});
const privil = getStoreData('loct', 'privil');
const hasConfigUsers = privil.includes('UserConfigEnabled');
let updateTip: string = '';
const baselinePreValue = ref('');
let updateItem = reactive({
  MeasuredObject: '',
  ActualDigest: ''
});
const passwordDialog = ref();
const configDialog = ref();
let param = reactive({});
const updateBasicRef = ref();
const ipAddressControl = ref('');
const basicForm = reactive({
  baselinePreValue: ''
});
const basicRules = reactive({
  baselinePreValue: [
    { validator: baseVaild, message: traduction('COMMON_FORMAT_ERROR'), trigger: 'blur' }
  ]
});
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;
    }
  }
}
function baseVaild(rule: any, value: any, callback: any) {
  if (value === '') {
    return null;
  }
  const result = VALID_BASELINE.test(value);
  return result;
}

// tpcm获取基本信息
function getTpcmbasicData() {
  loading(true);
  getTPCMBasicInfo()
    .then((res: any) => {
      basicResInfoData.value = res.data;
      tpcmBasicInfo.forEach(item => {
        if (item.id === 'ProductName') {
          item.content = traduction('TPCM_PRODUCT_NAME_VALUE');
        } else if (item.id === 'TCMManufacturer') {
          item.content = traduction('TPCM_TCM_VENDOR_VALUE');
        } else {
          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;
    })
    .catch((error: any) => {
      loading(false);
    });
}
// 获取tpcm详细信息
function getTPCMDetailedInfoData() {
  loading(true);
  getTPCMDetailedInfo()
    .then((res: any) => {
      loading(false);
      const response = res.data.Members;
      srcData.data = response;
      getTrustedStatus(srcData.data);
    })
    .catch((error: any) => {
      loading(false);
    });
}
function getTrustContent(enableStatus: number): void {
  // 未开启
  if (!enableStatus) {
    trustText.value = 'TPCM_TRUST_SERVICE_NOSTART';
    trustContent.trustedUrl = serviceClosedTpcm;
    isStart.value = false;
  } else if (enableStatus && !tpcmConfigData.initMeasureState) {
    trustText.value = 'TPCM_TRUST_MESURE_OFF';
    trustContent.trustedUrl = serviceClosedTpcm;
    isStart.value = false;
  } else {
    // 开启
    trustText.value = 'TPCM_TRUST_STATE';
    isStart.value = true;
  }
}

// 获取可信状态
function getTrustedStatus(arr: any[]) {
  if (arr.length > 0) {
    isTrusted.value = !Boolean(arr.find(item => !item.IsMatch));
    if (tsbEnableStatus.value && isTrusted.value && tpcmConfigData.initMeasureState) {
      trustContent.trustedUrl = passTpcm;
      trustContent.isPass = true;
      trustResultText.value = 'TPCM_TRUST_LEVEL_HIGH';
    } else if (tsbEnableStatus.value && !isTrusted.value && tpcmConfigData.initMeasureState) {
      trustContent.trustedUrl = notPassTpcm;
      trustContent.isPass = false;
      trustResultText.value = 'TPCM_TRUST_LEVEL_LOW';
    } else if (tsbEnableStatus.value && !tpcmConfigData.initMeasureState) {
      trustContent.trustedUrl = serviceClosedTpcm;
    } else {}
  }
}

function generateBaselineData(): void {
  if (
    !baseVaild([], basicForm.baselinePreValue, '') ||
    !basicForm.baselinePreValue ||
    !updateItem.ActualDigest
  ) {
    updateSave.value = false;
  } else {
    updateSave.value = true;
  }
}

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 showUpdateBox(item: any) {
  if (!item.ActualDigest) {
    updateSave.value = false;
  }
  // 系统锁定和非管理员用户不可刷新
  if (isSystemLock.value || !hasConfigUsers) {
    return;
  }
  if (item.MeasuredObject === 'Bios') {
    updateTip = 'TPCM_UPDATE_BIOS_TIP';
  } else {
    updateTip = 'TPCM_UPDATE_OTHER_TIP';
  }
  updateItem = item;
  basicForm.baselinePreValue = item.ActualDigest;
  updateBoxVisible.value = true;
  updateBoxBasicVisible.value = true;
}

// 基准值
function updateClose(type: string) {
  if (noPwd) {
    saveTpcmUpdate({ measuredObject: updateItem.MeasuredObject });
  } else if (type === 'save') {
    passwordDialog.value.show();
  } else {
    baselinePreValue.value = updateItem.ActualDigest;
    updateSave.value = true;
  }
  updateBoxBasicVisible.value = false;
}

// 二次认证
function pswSave(res: { reason: boolean; password: string }) {
  if (res.reason) {
    saveTpcmUpdate({ measuredObject: updateItem.MeasuredObject, password: res.password });
  } else {
    passwordDialog.value.hide();
  }
}

function saveTpcmUpdate(params: { [key: string]: any }) {
  param = {};
  if (!noPwd) {
    param['ReauthKey'] = window.btoa(params.password);
  }
  
  const successText =
    params.measuredObject === 'Bios' ? 'TPCM_UPDATE_BIOS_SUCCESS' : 'TPCM_UPDATE_OTHER_SUCCESS';
  getFirmwareParameter(params.measuredObject);
  // 调用刷新的方法
  updateService(param)
    .then((res: any) => {
      showElMessage('success', traduction(successText));
      getTpcmServiceData(true);
    })
    .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);
      }
    });
  passwordDialog.value.hide();
}
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;
          }
        }
      });
  });
}
function getFirmwareParameter(item: string) {
  const resultArr = [
    {
      name: 'Bios',
      paramKey: 'BiosStandardDigest'
    },
    {
      name: 'Shim',
      paramKey: 'ShimStandardDigest'
    },
    {
      name: 'Grub',
      paramKey: 'GrubStandardDigest'
    },
    {
      name: 'Grub.Cfg',
      paramKey: 'GrubCfgStandardDigest'
    },
    {
      name: 'Kernel',
      paramKey: 'KernelStandardDigest'
    },
    {
      name: 'Initrd',
      paramKey: 'InitrdStandardDigest'
    }
  ];
  resultArr.forEach((ele, i) => {
    if (ele.name === item) {
      param[ele.paramKey] = basicForm.baselinePreValue;
    }
  });
}

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 class="trust-state-show">
          <div class="trust-status">
            <img :src="trustContent.trustedUrl" alt="" />
            <span class="trust-text">
              <div class="trust-title">{{ traduction(trustText) }}</div>
              <div
                v-if="isStart"
                class="iconContent"
                :class="{ 'tpcm-pass': trustContent.isPass, 'tpcm-no-pass': !trustContent.isPass }"
              >
                {{ traduction(trustResultText) }}
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="tpcmTableBox">
      <div class="contentTitle">{{ $t('TPCM_DETAILS') }}</div>
      <el-alert
        :title="$t('TPCM_BASELINE_TIP')"
        type="info"
        show-icon
        v-if="
          tsbEnableStatus !== 0 &&
          srcData.data &&
          srcData.data.length &&
          tpcmConfigData.initMeasureState
        "
        :closable="false"
      />
      <div id="sensorTableComponent">
        <el-table
          :data="srcData.data"
          v-addId.table="'tableComponent'"
          border
          resizable
          v-if="tsbEnableStatus !== 0 && tpcmConfigData.initMeasureState"
        >
          <el-table-column min-width="15%" :label="$t('TPCM_MEASURED_TARGET')">
            <template #default="scope">
              <span class="id">
                {{ scope.row.MeasuredObject === '' ? '- -' : scope.row.MeasuredObject }}
              </span>
            </template>
          </el-table-column>
          <el-table-column min-width="15%" show-overflow-tooltip :label="$t('TPCM_VERSION')">
            <template #default="scope">
              <span class="id">{{ scope.row.Version === '' ? '- -' : scope.row.Version }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="15%" :label="$t('TPCM_PLATFORM_STATUS_REGISTER')">
            <template #default="scope">
              <span class="id">{{ scope.row.PCR === '' ? '- -' : scope.row.PCR }}</span>
            </template>
          </el-table-column>
          <el-table-column
            min-width="25%"
            :label="$t('TPCM_ACTUAL_MEASUREMENT_VALUE')"
          >
            <template #default="scope">
              <span class="overFlow" v-addTooltip.td>
                {{ scope.row.ActualDigest === '' ? '- -' : scope.row.ActualDigest }}
              </span>
            </template>
          </el-table-column>
          <el-table-column min-width="15%" :label="$t('TPCM_BASE_VALUE')">
            <template #default="scope">
              <span class="overFlow" v-addTooltip.td>
                {{ scope.row.StandardDigest === '' ? '- -' : scope.row.StandardDigest }}
              </span>
            </template>
          </el-table-column>
          <el-table-column min-width="10%" :label="$t('TPCM_CONSISTENCY')">
            <template #default="scope">
              <span
                class="match-text"
                :class="{ 'item-pass': scope.row.IsMatch, 'item-no-pass': !scope.row.IsMatch }"
              >
                {{ scope.row.IsMatch ? $t('TPCM_TRUST_YES') : $t('TPCM_TRUST_NO') }}
              </span>
            </template>
          </el-table-column>
          <el-table-column min-width="15%" :label="$t('TPCM_BASE_VALUE_UPDATE')">
            <template #default="scope">
              <span
                v-if="
                  scope.row.MeasuredObject !== 'TPCM_FW' &&
                  scope.row.MeasuredObject !== 'UBoot' &&
                  scope.row.MeasuredObject !== 'Rootfs'
                "
                class="update"
                :class="{ disabled: isSystemLock || !isPrivileges }"
                :id="'update' + scope.row.id"
                @click="showUpdateBox(scope.row)"
              >
                {{ $t('TPCM_UPDATE') }}
              </span>
            </template>
          </el-table-column>
          <template #empty>
            <TableNoData />
          </template>
        </el-table>
      </div>
      <div v-if="tsbEnableStatus === 0" class="noStartService">
        <img class="monitorChartNoData" src="@/assets/common/image/no-data.svg" />
        <div class="noDataText">{{ $t('TPCM_TRUST_NO_DATA_TEXT') }}</div>
      </div>
      <div v-if="!tpcmConfigData.initMeasureState && tsbEnableStatus !== 0" class="noStartService">
        <img class="monitorChartNoData" src="@/assets/common/image/no-data.svg" />
        <div class="noDataText">{{ $t('TPCM_TRUST_MESURE_OFF_TEXT') }}</div>
      </div>
    </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 v-model="configForm.measureState" @change="getBtnState" id="measureEnable"></el-switch>
              <div id="measureStateShowFalse" class="tip-text" v-if="!configForm.measureState && tpcmConfigData.initAlertMeasureState">{{ $t('TPCM_TRUST_TPCM_MEASURE_TIP') }}</div>
              <div id="measureStateShowTrue" class="tip-text" v-if="configForm.measureState && !tpcmConfigData.initAlertMeasureState">{{ $t('TPCM_MEASURED_WILLOPEN_TEXT') }}</div>
            </el-form-item>
            <el-form-item
              :label="$t('TPCM_TRUST_CONTROL_SWITCH')"
              v-show="configForm.measureState"
              class="small-item"
            >
              <el-switch
                id="controlEnable"
                v-model="configForm.controlState"
                @change="getBtnState"
                :disabled="!configForm.measureState"
              ></el-switch>
              <div id="controlStateShowFalse" class="tip-text" v-if="!configForm.controlState && configForm.measureState && tpcmConfigData.initAlertControlState">{{ $t('TPCM_TRUST_TPCM_CONTROL_TIP') }}</div>
              <div id="controlStateShowTrue" class="tip-text" v-if="configForm.controlState && configForm.measureState && !tpcmConfigData.initAlertControlState">{{ $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 v-if="updateBoxVisible" v-reqKeepAlive.dialog>
      <el-dialog
        :id="updateBox.id"
        v-model="updateBoxBasicVisible"
        :title="$t(updateBox.title)"
        width="30%"
      >
        <div>
          <el-alert
            :title="$t(updateTip)"
            type="info"
            show-icon
            :closable="false"
            class="alertDiv"
          />
          <el-form label-width="auto" ref="updateBasicRef" :rules="basicRules" :model="basicForm">
            <el-form-item :label="$t('TPCM_BASE_VALUE_LABEL')" prop="baselinePreValue">
              <el-input
                id="baselineVal"
                v-model="basicForm.baselinePreValue"
                clearable
                @change="generateBaselineData"
                maxlength="64"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span>
            <el-button
              id="webOkBut"
              type="primary"
              :disabled="!updateSave"
              @click="updateClose('save')"
            >
              {{ $t('COMMON_SAVE') }}
            </el-button>
            <el-button id="webCancelBut" @click="updateClose('cancel')">
              {{ $t('ALARM_CANCEL') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
      <SecondPassword ref="passwordDialog" @close="pswSave" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
#tpcmPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 174px);
  padding-right: 24px;
  .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;
    }
  }
  .alertDiv {
    margin-bottom: 16px;
  }
  .pageTitle {
    margin-bottom: 20px;
    font-weight: bold;
  }

  #trustedCompute {
    background-color: #fefefe;
    padding: 32px;
    border-radius: 4px;
    margin-bottom: 16px;
    .contentTitle {
      display: block;
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 16px;
      color: #282b33;
      line-height: 16px;
    }
    .trust-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .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__label) {
        font-size: 14px;
        color: #9ea4b3;
      }
      .content {
        font-size: 14px;
        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;
    }
    .trust-status {
      margin: 0 148px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .trust-text {
        display: flex;
        color: #000;
        font-size: 14px;
        .trust-title {
          font-size: 12px;
          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;
      }
    }
  }

  .tpcmTableBox {
    padding: 32px;
    background-color: #fefefe;
    border-radius: 4px;
    flex: 1;
    #tpcmTable {
      margin-top: 18px;
    }
    .contentTitle {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .noDataBox {
      padding-top: 48px;
      text-align: center;
      font-size: 14px;
      color: #727885;
      .noData {
        text-align: center;
        background: url('@/assets/common/image/no-data.svg') no-repeat center center;
        width: 100%;
        height: 100px;
        margin-bottom: 12px;
      }
    }
    .noStartService {
      margin-top: 50px;
      text-align: center;
      .monitorChartNoData {
        opacity: 0.7;
      }
    }
    .noDataText {
      color: #9ea4b3;
      font-size: 14px;
      margin-top: 17px;
    }
    .update {
      margin-right: 14px;
      color: var(--o-color-primary);
      cursor: pointer;
      &:hover {
        color: var(--o-color-primary-secondary);
      }
      &.disabled {
        color: #999;
        cursor: not-allowed;
        text-decoration: none;
      }
    }
    #baselineTip {
      width: 100%;
    }
  }

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

  .item-no-pass {
    background: #f45c5e;
  }

  .icon-pass {
    color: #24ab36;
    font-weight: bold;
  }
  .icon-close {
    color: #8d98aa;
    font-weight: bold;
  }
  .configAlert {
    margin-left: 36px;
  }
}
.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%;
    }
  }
}

.selct {
  :deep(.el-tag) {
    align-items: center;
    .el-tag__content {
      font-family: HarmonyOS_Sans_SC_Medium;
      font-size: 12px;
      color: #000000;
      .el-select__tags-text {
        line-height: 24px;
      }
    }
    .el-icon {
      line-height: 16px;
    }

    height: 24px;
  }
}
</style>
