<script lang="ts" setup>
import useStore from '@/stores';
import { reactive, ref, computed, nextTick } from 'vue';
import { traduction } from '@/utils/language';
import { showElMessage } from '@/utils/utils';
import {
  getSpData,
  editSpData,
  getResult,
  deleteSPRestore,
  getSPRestore,
  SPRestore,
} from '../sp.server';
import { showSuccessMessage } from '@/utils/composition';
import { IconRemind, IconAlarm, IconCheckBold } from '@computing/opendesign-icons';
import { UserPrivil } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';

import HelpIcon from '@/components/HelpIcon/HelpIcon.vue';
import GlobalStoreService from '@/services/gloabal-store-service';
import SecondPassword from '@/components/SecondPassword/SecondPassword.vue';

const globalStoreService = new GlobalStoreService();
const successMsg = traduction('COMMON_SUCCESS');
const errorMsg = traduction('COMMON_FAILED');

// 权限
const permission = checkPrivil(UserPrivil.baseConfig);
const store = useStore();
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

let dialogVisible = ref(false);
let restoreDialogVisible = ref(false);
let secondVisible = ref(false);
const secPwd = ref();
let editKey = '';
let tipList = reactive([] as any[]);
const tipShow = ref(false);
const deleteMask = ref(false);
const tipText = ref('');
const btn = ref(true);
const preState = ref('');
const currentState = ref('');
const canSave = ref(false);
let editData = reactive({
  spEnable: false,
  spStartEnable: false,
});
const showData = reactive({
  APPVersion: '',
  DataVersion: '',
  OSVersion: '',
  SPStatus: '',
});
const statusList = reactive({
  SPIsWorking: {
    value: traduction('IBMC_SP_STATE1'),
    label: '',
    valueClass: 'blurColor',
    labelClass: 'none',
  },
  SPIsOperable: {
    value: traduction('IBMC_SP_STATE2'),
    label: traduction('IBMC_SP_TIP1'),
    valueClass: 'none',
    labelClass: 'none',
  },
  BIOSNeedsUpdate: {
    value: traduction('IBMC_SP_STATE2'),
    label: traduction('IBMC_SP_TIP2'),
    valueClass: 'none',
    labelClass: 'orangeColor',
  },
  OSIsPoweredOff: {
    value: traduction('IBMC_SP_STATE3'),
    label: traduction(''),
    valueClass: 'none',
    labelClass: 'none',
  },
  iBMCNeedsUpdate: {
    value: traduction('IBMC_SP_STATE2'),
    label: traduction('IBMC_SP_TIP3', { softwareName: store.state.loct.sn }),
    valueClass: 'none',
    labelClass: 'orangeColor',
  },
  SPNeedsUpdate: {
    value: traduction('IBMC_SP_STATE2'),
    label: traduction('IBMC_SP_TIP4'),
    valueClass: 'none',
    labelClass: 'orangeColor',
  },
  SPPartitionTableNotExist: {
    value: traduction('IBMC_SP_STATE2'),
    label: traduction('IBMC_SP_TIP5', { softwareName: store.state.loct.sn }),
    valueClass: 'none',
    labelClass: 'orangeColor',
  },
});
const selectItems = reactive([
  {
    label: 'SP',
    text: traduction('IBMA_SP_TEXT'),
    isSelect: false,
    tip: traduction('IBMA_SP_TIP'),
    value: 'SP',
  },
  {
    label: traduction('IBMA_SP_LABEL'),
    text: traduction('IBMA_SP_TEXT1'),
    isSelect: false,
    tip: traduction('IBMA_SP_TIP1'),
    value: 'Disks',
  },
  {
    label: 'BIOS',
    text: traduction('IBMA_SP_TEXT2'),
    isSelect: false,
    tip: traduction('IBMA_SP_TIP2'),
    value: 'BIOS',
  },
  {
    label: 'iBMC',
    text: traduction('IBMA_SP_TEXT3', { softwareName: store.state.loct.sn }),
    isSelect: false,
    tip: traduction('IBMA_SP_TIP3', { softwareName: store.state.loct.sn }),
    value: 'iBMC',
  },
]);
function restore() {
  restoreDialogVisible.value = true;
}

// 设备信息收集使能switch开关改变前
function beforeChangeSpEnable() {
  editKey = 'spEnable';
  dialogVisible.value = true;
  return false;
}

// OS从SP启动switch开关改变前
function beforeChangeSpStartEnable() {
  editKey = 'spStartEnable';
  dialogVisible.value = true;
  return false;
}

// 确认修改
function sureSetting() {
  const queryParams: any = {};
  if (editKey === 'spEnable') {
    queryParams.SPDeviceInfoCollectEnabled = !editData.spEnable;
  } else {
    queryParams.SPStartEnabled = !editData.spStartEnable;
  }
  globalStoreService.setValue('isLoading', true);
  editSpData(queryParams)
    .then((data: any) => {
      globalStoreService.setValue('isLoading', false);
      editData.spEnable = data.SPDeviceInfoCollectEnabled;
      editData.spStartEnable = data.SPStartEnabled;
      showElMessage('success', successMsg);
      dialogVisible.value = false;
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
      dialogVisible.value = false;
      showElMessage('error', errorMsg);
    });
}

// 获取数据
function getData() {
  globalStoreService.setValue('isLoading', true);
  getInfo();
  initRefresh();
}

function getInfo() {
  getSpData()
    .then((data: any) => {
      editData.spEnable = data.SPDeviceInfoCollectEnabled;
      editData.spStartEnable = data.SPStartEnabled;
      showData.APPVersion = data.APPVersion;
      showData.DataVersion = data.DataVersion;
      showData.OSVersion = data.OSVersion;
      showData.SPStatus = data.SPStatus;
      globalStoreService.setValue('isLoading', false);
    })
    .catch(err => {
      globalStoreService.setValue('isLoading', false);
    });
}

function select(item: any) {
  item.isSelect = !item.isSelect;
  let result = false;
  for (let i of selectItems) {
    if (i.isSelect) {
      result = true;
      break;
    }
  }
  canSave.value = result;
}

function secondSure() {
  tipList = [];
  for (let item of selectItems) {
    if (item.isSelect) {
      tipList.push(item.tip || '');
    }
  }
  secondVisible.value = true;
  restoreDialogVisible.value = false;
}

function secondPassword() {
  secPwd.value.show();
  secondVisible.value = false;
}

function closeModal(param: { reason: boolean; password: string }) {
  secPwd.value.hide();
  let params = {};
  if (param.reason) {
    params['ReauthKey'] = window.btoa(param.password);
    let Components = [];
    for (let item of selectItems) {
      if (item.isSelect) {
        Components.push({
          Name: item.value,
        });
      }
    }
    params['Components'] = Components;
    globalStoreService.setValue('isLoading', true);
    SPRestore(params)
      .then(res => {
        globalStoreService.setValue('isLoading', false);
        showElMessage('success', successMsg);
        refresh();
      })
      .catch(err => {
        globalStoreService.setValue('isLoading', false);
        showElMessage('error', errorMsg);
        refresh();
      });
  }
  selectToFalse();
}

function selectToFalse() {
  for (let item of selectItems) {
    item.isSelect = false;
  }
}

function closeAll() {
  secondVisible.value = false;
  restoreDialogVisible.value = false;
  canSave.value = false;
  const elem: HTMLElement = document.getElementById('restore') as HTMLElement;
  elem.blur();
  selectToFalse();
}

function deleteTask() {
  globalStoreService.setValue('isLoading', true);
  deleteSPRestore()
    .then(res => {
      globalStoreService.setValue('isLoading', false);
      showElMessage('success', successMsg);
    })
    .catch(err => {
      globalStoreService.setValue('isLoading', false);
      showElMessage('error', errorMsg);
    })
    .finally(() => {
      refresh();
    });
}
function initRefresh() {
  globalStoreService.setValue('isLoading', true);
  getResult()
    .then((res: any) => {
      if (res?.Status) {
        preState.value = res.Status;
        currentState.value = res.Status;
        switch (res.Status) {
          case 'Idle':
            tipShow.value = false;
            deleteMask.value = false;
            btn.value = false;
            break;
          case 'Init':
            if (res?.SystemErase?.ConfigFileExist) {
              tipShow.value = true;
              deleteMask.value = true;
              tipText.value = traduction('IBMA_SP_TIP4');
              btn.value = true;
            } else {
              tipShow.value = false;
              deleteMask.value = false;
              btn.value = false;
            }
            break;
          case 'Deploying':
            tipShow.value = true;
            deleteMask.value = false;
            tipText.value = traduction('IBMA_SP_TIP5');
            btn.value = true;
            break;
          case 'Finished':
            if (res?.SystemErase?.ConfigFileExist) {
              tipShow.value = true;
              deleteMask.value = true;
              tipText.value = traduction('IBMA_SP_TIP4');
              btn.value = true;
            } else {
              tipShow.value = false;
              deleteMask.value = false;
              btn.value = false;
            }
            break;
          case 'Timeout':
            if (res?.SystemErase?.ConfigFileExist) {
              tipShow.value = true;
              deleteMask.value = true;
              tipText.value = traduction('IBMA_SP_TIP4');
              btn.value = true;
            } else {
              tipShow.value = false;
              deleteMask.value = false;
              btn.value = false;
            }
            break;
          default: 
            break;
        }
      }
      globalStoreService.setValue('isLoading', false);
    })
    .catch(err => {
      globalStoreService.setValue('isLoading', false);
    });
}
function refresh() {
  globalStoreService.setValue('isLoading', true);
  getResult()
    .then((res: any) => {
      if (res?.Status) {
        switch (res.Status) {
          case 'Idle':
            tipShow.value = false;
            deleteMask.value = false;
            btn.value = false;
            break;
          case 'Init':
            if (res?.SystemErase?.ConfigFileExist) {
              tipShow.value = true;
              deleteMask.value = true;
              tipText.value = traduction('IBMA_SP_TIP4');
              btn.value = true;
            } else {
              tipShow.value = false;
              deleteMask.value = false;
              btn.value = false;
            }
            break;
          case 'Deploying':
            tipShow.value = true;
            deleteMask.value = false;
            tipText.value = traduction('IBMA_SP_TIP5');
            btn.value = true;
            getInfo();
            break;
          case 'Finished':
            maskFinish(res);
            break;
          case 'Timeout':
            timeOut(res);
            break;
          default: 
            break;
        }
        currentState.value = res.Status;
      }
      globalStoreService.setValue('isLoading', false);
    })
    .catch(err => {
      globalStoreService.setValue('isLoading', false);
      showElMessage('error', errorMsg);
    });
}

function maskFinish(res: any) {
  if (preState.value !== 'Finished') {
    if (res?.SystemErase?.Detail) {
      let errorStr = '';
      let successStr = '';
      res.SystemErase.Detail.forEach((item: any) => {
        if (item.Status !== 'Successful') {
          errorStr += `${
            item.SystemEraseTask === 'Disks' ? traduction('IBMA_SP_LABEL') : item.SystemEraseTask
          }、`;
        } else {
          successStr += `${item.SystemEraseTask}、`;
        }
      });
      if (successStr.length > 0) {
        showSuccessMessage(
          successStr.substring(0, successStr.length - 1) + traduction('IBMA_SP_TIP6'),
        );
      }
      setTimeout(() => {
        if (errorStr.length > 0) {
          errorStr = errorStr.substring(0, errorStr.length - 1);
          showElMessage('error', errorStr + traduction('IBMA_SP_TIP7'));
        }
      }, 1000);
    } else {
      showElMessage('success', traduction('IBMA_SP_TIP6'));
    }
    getInfo();
    preState.value = 'Finished';
    tipShow.value = false;
    deleteMask.value = false;
    btn.value = false;
    showData.SPStatus = 'SPIsOperable';
  } else {
    if (res.SystemErase.ConfigFileExist) {
      tipShow.value = true;
      deleteMask.value = true;
      tipText.value = traduction('IBMA_SP_TIP4');
      btn.value = true;
    } else {
      tipShow.value = false;
      deleteMask.value = false;
      btn.value = false;
    }
  }
}

function timeOut(res: any) {
  if (preState.value !== 'Timeout') {
    if (res?.SystemErase?.Detail) {
      let errorStr = '';
      let successStr = '';
      res.SystemErase.Detail.forEach((item: any) => {
        if (item.Status !== 'Successful') {
          errorStr += `${
            item.SystemEraseTask === 'Disks' ? traduction('IBMA_SP_LABEL') : item.SystemEraseTask
          }、`;
        } else {
          successStr += `${item.SystemEraseTask}、`;
        }
      });
      if (successStr.length > 0) {
        showSuccessMessage(
          successStr.substring(0, successStr.length - 1) + traduction('IBMA_SP_TIP6'),
        );
      }
      setTimeout(() => {
        if (errorStr.length > 0) {
          errorStr = errorStr.substring(0, errorStr.length - 1);
          showElMessage('error', errorStr + traduction('IBMA_SP_TIP7'));
        }
      }, 1000);
    } else {
      showElMessage('error', traduction('IBMA_SP_TIP7'));
    }
    getInfo();
    preState.value = 'Timeout';
    tipShow.value = false;
    deleteMask.value = false;
    btn.value = false;
  } else {
    if (res.SystemErase.ConfigFileExist) {
      tipShow.value = true;
      deleteMask.value = true;
      tipText.value = traduction('IBMA_SP_TIP4');
      btn.value = true;
    } else {
      tipShow.value = false;
      deleteMask.value = false;
      btn.value = false;
    }
  }
}

// 获取数据
getData();
</script>

<template>
  <div id="spPage" class="sp-box">
    <div id="spStart" class="start-setting">
      <div class="sp-title">{{ $t('IBMC_SP_START_SETTING') }}</div>

      <div class="setting-box">
        <div class="key-box">
          <div class="key">{{ $t('IBMC_SP_SEVICE') }}</div>
          <div class="key second second-key">
            <span class="text">{{ $t('IBMC_SP_START') }}</span>
          </div>
        </div>

        <div class="value-box">
          <div class="value">
            <el-switch
              id="spEnable"
              v-model="editData.spEnable"
              :disabled="!permission || isSystemLock"
              :before-change="beforeChangeSpEnable"
            />
            <div class="tip">
              {{ $t('IBMC_SP_TIP6') }}
            </div>
          </div>
          <div class="value second">
            <el-switch
              id="spStartEnable"
              v-model="editData.spStartEnable"
              :disabled="!permission || isSystemLock"
              :before-change="beforeChangeSpStartEnable"
            />
            <div class="tip">
              {{ $t('IBMC_SP_TIP7') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="spInfo" class="sp-info">
      <div id="spInfoTitle" class="sp-title">{{ $t('IBMC_SP_INFO') }}</div>
      <div id="spInfoStatus" class="sp-status">
        <div class="status-text">{{ $t('IBMA_SP_RUN_STATUS') }}</div>
        <div
          v-if="showData.SPStatus"
          class="status-box"
          :class="statusList[showData.SPStatus].valueClass"
        >
          <span class="box-text">
            {{ statusList[showData.SPStatus].value }}
          </span>
        </div>
        <div
          v-if="showData.SPStatus"
          class="status-tip"
          :class="statusList[showData.SPStatus].labelClass"
        >
          {{ statusList[showData.SPStatus].label }}
        </div>
        <div v-else class="default">--</div>
      </div>
      <div id="spSettingBox" class="setting-box">
        <div id="spSettingTitle" class="version-title">{{ $t('IBMC_UPGRADE_VERSION') }}</div>
        <div id="spSettingContent" class="content-box">
          <div id="spSettingKey" class="key-box">
            <div class="key">OS{{ $t('IBMC_UPGRADE_VERSION') }}</div>
            <div class="key second second-key">
              <span class="text">APP{{ $t('IBMC_UPGRADE_VERSION') }}</span>
            </div>
            <div class="key second second-key">
              <span class="text">DATA{{ $t('IBMC_UPGRADE_VERSION') }}</span>
            </div>
          </div>

          <div id="spSettingValue" class="value-box">
            <div class="value">{{ showData.OSVersion ? showData.OSVersion : '--' }}</div>
            <div class="value second">{{ showData.APPVersion ? showData.APPVersion : '--' }}</div>
            <div class="value second">{{ showData.DataVersion ? showData.DataVersion : '--' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="spRestore" class="restore-setting">
      <div class="sp-title">{{ $t('HOME_RESTORE_CONFIGURATION') }}</div>
      <div v-if="tipShow" class="blue-alert">
        <el-icon>
          <IconRemind />
        </el-icon>
        <span class="text">{{ tipText }}</span>
        <a id="refreshBtn" class="tip-btn" @click="refresh">{{ $t('VIDEO_REFRESH') }}</a>
        <a v-if="deleteMask" id="deleteBtn" class="tip-btn" @click="deleteTask">
          {{ $t('IBMA_SP_CANCEL') }}
        </a>
      </div>
      <div class="setting-box">
        <div class="key-box">
          <el-button
            id="restore"
            :disabled="btn || showData.SPStatus === 'SPIsWorking' || isSystemLock"
            @click="restore()"
          >
            {{ $t('HOME_RESTORE_CONFIGURATION') }}
          </el-button>
          <div v-if="showData.SPStatus === 'SPIsWorking'" class="orangeColor key-text">
            {{ $t('IBMA_SP_DONE') }}
          </div>
        </div>
      </div>
    </div>

    <!-- 修改确认的弹窗 -->
    <div v-if="dialogVisible" v-reqKeepAlive.dialog>
      <el-dialog v-model="dialogVisible" :title="$t('ALARM_OK')" :close-on-click-modal="false">
        <div class="content">
          <el-icon>
            <IconAlarm />
          </el-icon>
          <span>{{ $t('COMMON_ASK_OK') }}</span>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button id="spSave" type="primary" size="small" @click="sureSetting">
              {{ $t('COMMON_OK') }}
            </el-button>
            <el-button id="spCancel" size="small" @click="dialogVisible = false">
              {{ $t('COMMON_CANCEL') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 恢复出厂设置弹窗 -->
    <div v-if="restoreDialogVisible" v-reqKeepAlive.dialog>
      <el-dialog
        v-model="restoreDialogVisible"
        :title="$t('HOME_RESTORE_CONFIGURATION')"
        :close-on-click-modal="false"
        class="restore"
        @close="closeAll"
      >
        <div class="content">
          <div class="blue-alert">
            <el-icon>
              <IconRemind />
            </el-icon>
            <span class="text">
              {{ $t('IBMA_SP_IDEA', { softwareName: store.state.loct.sn }) }}
            </span>
          </div>
          <div v-for="item in selectItems" :id="item.value" :key="item.label" class="select-box">
            <div
              class="select-item"
              :class="{ 'selected-item': item.isSelect }"
              @click="select(item)"
            >
              <div class="select-title">
                {{ item.label }}
              </div>
              <div class="select-content">
                {{ item.text }}
              </div>
              <div class="imgState" :class="{ selectedImg: item.isSelect }">
                <el-icon :size="8">
                  <IconCheckBold v-if="item.isSelect" />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button
              id="spSecondSave"
              type="primary"
              size="small"
              :disabled="!canSave"
              @click="secondSure"
            >
              {{ $t('IBMC_SP_START_BTN') }}
            </el-button>
            <el-button id="spSecondCancel" size="small" @click="closeAll">
              {{ $t('COMMON_CANCEL') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 二次提醒弹窗 -->
    <div v-if="secondVisible" v-reqKeepAlive.dialog>
      <el-dialog
        v-model="secondVisible"
        :title="$t('ALARM_OK')"
        :close-on-click-modal="false"
        @close="closeAll"
      >
        <div class="dialog-content">
          <el-icon>
            <IconAlarm />
          </el-icon>
          <div class="dialog-tip">
            <div v-for="item in tipList" :key="item">{{ item }}</div>
            <div class="dialog-bottom">{{ $t('IBMA_SP_SURE') }}</div>
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button id="spSave" type="primary" size="small" @click="secondPassword">
              {{ $t('COMMON_OK') }}
            </el-button>
            <el-button id="spCancel" size="small" @click="closeAll">
              {{ $t('COMMON_CANCEL') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <SecondPassword ref="secPwd" @close="closeModal" />
  </div>
</template>

<style lang="scss" scoped>
.sp-box {
  font-size: 12px;
  margin-right: 24px;
  padding: 24px;
  border-radius: 4px;
  background-color: var(--o-bg-color-base);
  .restore-setting {
    margin-top: 24px;
    .blue-alert {
      margin-top: 8px;
      .tip-btn {
        cursor: pointer;
        color: var(--o-color-primary);
        margin-left: 8px;
        text-decoration: none;
        &:hover {
          color: var(--o-color-primary-secondary);
        }
      }
    }
    .key-box {
      flex-direction: inherit !important;
      align-items: center;
      .key-text {
        font-size: 12px;
        color: #f97611;
        text-align: center;
        line-height: 16px;
        padding-left: 8px;
      }
    }
  }
  .sp-info {
    margin-top: 24px;
    .sp-status {
      height: 24px;
      margin: 16px 0px;
      .default {
        margin-left: 57px;
      }
      .orangeColor {
        color: var(--o-color-major) !important;
      }
      .blurColor {
        background: var(--o-color-state-primary) !important;
      }
      .status-text {
        font-size: 12px;
        color: var(--o-text-color-secondary);
        letter-spacing: 0;
        line-height: 16px;
      }
      .status-box {
        background: var(--o-text-color-tertiary);
        border-radius: 2px;
        min-height: 24px;
        padding: 4px 8px;
        margin-left: 57px;
        margin-right: 8px;
        min-width: 64px;
        text-align: center;
        .box-text {
          font-size: 12px;
          color: var(--el-color-white);
          letter-spacing: 0;
          text-align: center;
          line-height: 16px;
        }
      }
      .status-tip {
        font-size: 12px;
        color: var(--o-text-color-tertiary);
        letter-spacing: 0;
        line-height: 16px;
      }

      display: flex;
      align-items: center;
    }
    .setting-box {
      padding: 24px;
      width: 100%;
      height: 160px;
      background: var(--o-bg-color-light);
      border-radius: 4px;
      display: block;
      .version-title {
        font-size: 12px;
        color: var(--el-color-black);
        letter-spacing: 0;
        line-height: 16px;
        font-family: 'HarmonyOS Sans SC Medium';
        font-weight: 600;
      }
      .content-box {
        height: 96px;
        display: flex;
        margin-top: 16px;
        .second {
          margin-top: 16px;
        }
        .key {
          line-height: 16px;
        }
        .value {
          line-height: 16px;
          height: 16px;
          font-size: 12px;
          color: var(--el-color-black);
          letter-spacing: 0;
        }
      }
    }
  }
  .dialog-content {
    display: flex;
    .el-icon {
      margin-right: 16px;
      font-size: 28px;
    }
    .dialog-bottom {
      margin-top: 16px;
    }
  }
  .sp-title {
    font-size: 16px;
    color: var(--o-text-color-primary);
    line-height: 24px;
    font-weight: bold;
  }
  .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);
    }
  }

  .setting-box {
    margin-top: 16px;
    color: var(--o-text-color-secondary);
    display: flex;
    align-items: center;

    .key-box {
      margin-right: 24px;
    }

    .key-box,
    .value-box {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .key {
        line-height: 18px;
      }
      .value {
        display: flex;
      }
      .tip {
        margin-left: 8px;
        font-size: 12px;
        color: var(--o-text-color-tertiary);
        letter-spacing: 0;
        line-height: 16px;
      }
      .second-key {
        display: flex;
        align-items: center;

        .text {
          margin-right: 4px;
        }
      }

      .second {
        margin-top: 24px;
      }
    }
  }

  :deep(.el-overlay) {
    .el-dialog {
      width: 432px;
      .el-dialog__body {
        padding: 28px 24px 24px 24px;
      }
      .content {
        display: flex;
        align-items: center;

        .el-icon {
          margin-right: 16px;
          font-size: 28px;
        }
      }
    }
    .restore {
      width: 544px;
      height: 440px;
      .el-dialog__body {
        padding: 16px 24px 0px 24px;
      }
      .content {
        display: block;
        .select-box {
          margin-top: 8px;
        }
        .select-item {
          padding: 16px;
          background: var(--o-bg-color-light);
          border-radius: 4px;
          width: 100%;
          border: 2px solid var(--o-bg-color-light);
          &:first-child {
            margin-top: 0px;
          }
          &:hover {
            border: 2px solid var(--o-color-primary-secondary);
          }
          display: flex;
          .select-title {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            width: 64px;
            margin-right: 24px;
          }
          .select-content {
            font-size: 12px;
            color: #8d98aa;
            letter-spacing: 0;
            line-height: 16px;
            width: calc(100% - 100px);
          }
          .imgState {
            position: relative;
            right: -12px;
            margin-top: -12px;
            height: 12px;
            width: 12px;
          }
          .selectedImg {
            background: var(--o-color-primary);
            text-align: center;
            .el-icon {
              color: var(--el-color-white);
              top: -3px;
              left: 2px;
            }
          }
        }

        .selected-item {
          border: 2px solid var(--o-color-primary);
          &:hover {
            border: 2px solid var(--o-color-primary);
          }
        }

        .el-icon {
          margin-right: 16px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
