<template>
  <el-form :label-position="'left'" :label-width="labelWidth">
    <el-form-item
      v-if="modeShow && !isARIESrCard"
      :label="$t('COMMON_WORKING_MODE')"
      class="select-item"
      :class="{
        displayNone: !modeShow,
        displayTable: modeShow
      }"
    >
      <el-tooltip placement="right" :content="tipInfo" trigger-keys>
        <el-select
          id="workMode"
          v-model="modelRef"
          :placeholder="modelRef"
          class="tiSelect"
          :class="{ displayNone: !modeShow, displayTable: modeShow }"
          :style="{ 'min-width': getSelectWidth() }"
          @change="checkChange"
        >
          <el-option
            v-for="item in raid?.supportedModes.options"
            :key="item.id"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-tooltip>
    </el-form-item>
    <el-form-item :label="$t('STORE_BOOT_DISK1')" v-if="isPMCCard || isARIESrCard">
      <el-select
        id="bootPriority1"
        v-model="bootDevice1"
        :empty-values="[null, undefined]"
        :placeholder="bootDevice1"
        class="tiSelect"
        :style="{ 'min-width': getSelectWidth() }"
        @change="checkChange"
      >
        <el-option
          v-for="item in isPMCCard ? bootDevice1Options : bootDiskList"
          :key="item.id"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('STORE_BOOT_DISK2')" v-if="isPMCCard">
      <el-select
        id="bootPriority2"
        v-model="bootDevice2"
        :placeholder="bootDevice2"
        class="tiSelect"
        :style="{ 'min-width': getSelectWidth() }"
        @change="checkChange"
      >
        <el-option
          v-for="item in bootList"
          :key="item.id"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- 硬盘写缓存策略 -->
    <el-form-item :label="$t('STORE_WRITE_CACHE_POLICY')" v-if="isPMCCard">
      <template #default>
        <div class="halfSelect">
          <!-- 写缓存类型 -->
          <el-select
            id="writeCacheType"
            v-model="writeCacheType"
            class="tiSelect"
            :style="{ 'min-width': getSelectWidth() }"
            @change="checkChange"
          >
            <el-option
              v-for="item in writeCacheTypeOptions"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
          <!-- 写缓存策略 -->
          <el-select
            id="writeCachePolicy"
            v-model="writeCachePolicy"
            class="tiSelect"
            :style="{ 'min-width': getSelectWidth() }"
            @change="checkChange"
          >
            <el-option
              v-for="item in writeCachePolicyOptions"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </div>
      </template>
    </el-form-item>
    <el-form-item :label="$t('STORE_NO_BBU_WRITE')" v-if="isPMCCard && noBbuWriteState !== null">
      <el-switch
        id="noBbuWriteState"
        v-model="noBbuWriteState"
        class="displayTable"
        @change="checkChange"
      ></el-switch>
    </el-form-item>
    <el-form-item
      id="storeReadCacheValueSliderItem"
      :label="$t('STORE_READ_CACHE')"
      v-if="isPMCCard && readCachePercent !== null"
    >
      <el-slider
        id="storeReadCacheValue"
        v-model="readCachePercent"
        :max="100"
        :min="0"
        :step="5"
        :disabled="readCachePercentDisabled"
        @change="checkChange"
      ></el-slider>
    </el-form-item>
    <el-form-item :label="$t('STORE_COPYBACK')" v-if="!isPMCCard">
      <el-switch
        id="copyBackState"
        v-model="copyBackState"
        class="displayTable"
        @change="checkChange"
      ></el-switch>
    </el-form-item>
    <el-form-item :label="$t('STORE_SMART_ERRORS')" v-if="!isPMCCard">
      <el-switch
        id="smartState"
        v-model="smarterCopyBackState"
        class="displayTable"
        :disabled="!copyBackState"
        @change="checkChange"
      ></el-switch>
    </el-form-item>
    <el-form-item v-if="!isPMCCard && jBODShow" :label="$t('STORE_JBOD_MODE')">
      <el-switch id="jBODState" v-model="jBODState" @change="checkChange"></el-switch>
    </el-form-item>
    <el-form-item v-if="isARIESrCard" :label="$t('STORE_CONSIS_CHECK')">
      <el-switch id="consistencyCheck" v-model="enabled" @change="checkChange"></el-switch>
    </el-form-item>
  </el-form>
  <el-form
    v-show="enabled"
    :label-position="'left'"
    :label-width="labelWidth - 16"
    class="midContent"
  >
    <el-form-item
      v-if="enabled"
      :label="$t('SYSTEM_BATTERY_STATUS')"
      :class="{
        displayNone: !enabled,
        displayTable: enabled
      }"
    >
      <div class="textClose">{{ runningStatus ? $t('FDM_ENABLED') : $t('FDM_DISABLED') }}</div>
    </el-form-item>
    <el-form-item :label="$t('STORE_CONSIS_AUTO_REPAIR')">
      <el-switch
        id="autoRepair"
        v-model="autoRepairEnable"
        class="displayTable"
        @change="checkChange"
      ></el-switch>
    </el-form-item>
    <el-form-item :label="$t('STORE_CONSIS_VERIFIED_RATE')">
      <el-select
        id="checkRate"
        v-model="rate.label"
        v-addId.select="'checkRate'"
        :placeholder="rate.label"
        :teleported="false"
        class="tiSelect"
        @change="checkChange"
      >
        <el-option
          v-for="item in checkRateOptions"
          :key="item.id"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item id="periodSliderItem" :label="$t('STORE_CONSIS_PERIOD_INTEVAL')">
      <el-slider
        id="periodSlider"
        v-model="period"
        :max="1440"
        :min="24"
        :marks="marks"
        :step="24"
        @change="checkChange"
      ></el-slider>
    </el-form-item>
    <el-form-item :label="$t('STORE_CONSIS_DELAY_TIME')">
      <el-input
        id="taskWaitTime"
        v-model="delayForStart"
        type="number"
        :disabled="thisEnabled"
        @change="checkChange"
      ></el-input>
    </el-form-item>
  </el-form>

  <el-form :label-position="'left'" :label-width="labelWidth" class="underBtn">
    <el-form-item :label="$t('IBMC_STORAGE_SET_LABEL')" v-if="!isPMCCard">
      <el-button
        :id="'restoreDefault'"
        type="text"
        size="small"
        class="volumnCreateBtn"
        @click="resetFun"
      >
        {{ $t('STORE_RECOVERY') }}
      </el-button>
      <el-button
        :id="'foreignConfig'"
        type="text"
        size="small"
        class="volumnCreateBtn"
        :class="{
          notAllow: foreignConfigStatus,
          'is-disabled': foreignConfigStatus
        }"
        :disabled="foreignConfigStatus"
        @click="foreignConfigFn"
      >
        {{ $t('STORE_IMPORT_FOREIGN_CONFIG') }}
      </el-button>
      <el-button
        :id="'foreignConfig'"
        type="text"
        size="small"
        class="volumnCreateBtn"
        :class="{
          notAllow: foreignConfigStatus,
          'is-disabled': foreignConfigStatus
        }"
        :disabled="foreignConfigStatus"
        @click="clearForeignConfigFn"
      >
        {{ $t('STORE_CLEAR_FOREIGN_CONFIG') }}
      </el-button>
    </el-form-item>
  </el-form>
  <Dialog ref="dialogRef" :config="dialogInfo" @close="dialogClose"></Dialog>
  <Dialog ref="dialogRefMessage" :config="dialogInfoMessage" @close="dialogCloseMessage"></Dialog>
  <Dialog ref="dialogRefImport" :config="dialogInfoImport" @close="dialogCloseImport"></Dialog>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { ElMessage as elMessage } from 'element-plus';
import {
  Raid,
  RaidEditModel,
  StorageStaticData,
  RaidType,
  IOptions,
  IWriteCachePolicy
} from '../../../models';
import Dialog from '@/components/Dialog/Dialog.vue';
import { traduction } from '@/utils/language';
import { reset, foreignConfig, clearForeignConfig } from '../raid.service';
import { loading, showFailedMessage, showSuccessMessage, getStoreData } from '@/utils/composition';
const emits = defineEmits(['editChange']);
const dialogRef = ref();
const dialogRefMessage = ref();
const dialogRefImport = ref();
const dialogInfo = reactive({
  id: 'raidResetFunDialog',
  content: traduction('COMMON_ASK_OK'),
  title: traduction('COMMON_CONFIRM')
});
const dialogInfoMessage = reactive({
  id: 'foreignConfigMessage',
  content: traduction('STORE_CLEAR_FOREIGN_CONFIG_CONFIRM'),
  title: traduction('COMMON_CONFIRM')
});
const dialogInfoImport = reactive({
  id: 'foreignConfigImport',
  content: traduction('STORE_IMPORT_FOREIGN_CONFIG_CONFIRM'),
  title: traduction('COMMON_CONFIRM')
});

const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    }
  },
  raidNode: {
    require: true,
    type: Object,
    default: () => {
      return {};
    }
  }
});

const marks = reactive({
  24: {
    style: {
      marginTop: '8px'
    },
    label: '24'
  },
  288: {
    style: {
      marginTop: '8px'
    },
    label: '288'
  },
  576: {
    style: {
      marginTop: '8px'
    },
    label: '576'
  },
  864: {
    style: {
      marginTop: '8px'
    },
    label: '864'
  },
  1152: {
    style: {
      marginTop: '8px'
    },
    label: '1152'
  },
  1440: {
    style: {
      marginTop: '8px'
    },
    label: '1440'
  }
});

let raidEditModel;
let raid = props.data as Raid;
const raidNode = computed(() => {
  return props.raidNode;
});

let modeShow = ref(false);
modeShow.value = raid?.supportedModes && raid?.supportedModes?.options?.length > 0;

const language: string = getStoreData('loct', 'locale');
const labelWidth = ref(0);
const getSelectWidth = (): string => {
  if (language === 'zh') {
    return '200px';
  } else if (language === 'ja') {
    if (enabled.value) {
      return '200px';
    } else {
      return '180px';
    }
  } else if (language === 'en') {
    if (enabled.value) {
      return '200px';
    } else {
      return '200px';
    }
  } else {
    if (enabled.value) {
      return '240px';
    } else {
      return '260px';
    }
  }
};

const setLabelWidth = (): void => {
  const gap = enabled.value ? 40 : 24;
  let width = 160;
  if (language === 'ru') {
    width = 280;
  } else if (language === 'fr') {
    width = 210;
  } else if (language === 'ja') {
    width = 180;
  } else {
    width = 160;
  }
  labelWidth.value = width + gap;
}

let thisModel: string;
let thisBootPriority1: string;
let thisBootPriority2: string;
let thisWriteCacheType: string;
let thisWriteCachePolicy: string;
let thisNoBatteryWriteCacheEnable = false;
let thisReadCachePercent = 0;
const thisCopyBackState = raid?.getCoyBack?.id;
const thisSmarterCopyBackState = raid?.getSmartErrors?.id;
const thisjBODState = raid?.getJBODState?.id;
const jBODShow = ref(raid?.getJBODShow);
const isARIESrCard = ref(raid?.getIsARIESrCard);
const isPMCCard = ref(raid?.raidCardType === RaidType.PMC || raid?.raidCardType === RaidType.HBA);
const thisForeignConfigStatus = raid?.foreignConfigStatus;
const thisEnabled = raid?.getEnabled;
const thisRunningStatus = raid?.getRunningStatus;
const thisAutoRepairEnabled = raid?.getAutoRepairEnabled;
const thisRate = raid?.getRate || '';
const thisPeriod = raid?.getPeriod;
const thisDelayForStart = raid?.getDelayForStart;
const checkRateOptions = StorageStaticData.checkRateOptions;
const bootDevice1Options = ref(<any>[]);
const bootList = ref(<any>[]);
const bootDiskList = ref(<any>[]);
const writeCacheTypeOptions = StorageStaticData.writeCacheType;
const writeCachePolicyOptions = StorageStaticData.writeCachePolicy;
const readCachePercent = ref(0 as number | null);
const readCachePercentDisabled = ref(false);
const maxCacheList = ref(<any>[]);

const modelRef = ref();
const tipInfo = ref('');
const bootDevice1 = ref();
const bootDevice2 = ref();
const copyBackState = ref(thisCopyBackState);
const smarterCopyBackState = ref(thisSmarterCopyBackState);
const jBODState = ref(thisjBODState);
const foreignConfigStatus = ref(thisForeignConfigStatus);
const enabled = ref(thisEnabled);
const runningStatus = ref(thisRunningStatus);
const autoRepairEnable = ref(thisAutoRepairEnabled);
const rate = ref(JSON.parse(JSON.stringify(thisRate)));
const period = ref(thisPeriod);
const delayForStart = ref(thisDelayForStart);
const cardType = ref(raid?.raidCardType);
const baseNoBBUState = ref(false as any);
const writeCacheType = ref();
const writeCachePolicy = ref();
const noBbuWriteState = ref(thisNoBatteryWriteCacheEnable);
let params = {
  ConsisCheckInfo: {}
};
function checkChange() {
  setLabelWidth();
  if (modelRef.value !== thisModel) {
    params['Mode'] = modelRef.value;
  } else {
    delete params['Mode'];
  }
  if (bootDevice1.value !== thisBootPriority1) {
    params['BootDevice1'] = bootDevice1.value;
  } else {
    delete params['BootDevice1'];
  }
  if (bootDevice2.value !== thisBootPriority2) {
    params['BootDevice2'] = bootDevice2.value;
  } else {
    delete params['BootDevice2'];
  }
  if (writeCacheType.value !== thisWriteCacheType) {
    params['WriteCacheType'] = writeCacheType.value;
  } else {
    delete params['WriteCacheType'];
  }
  if (writeCachePolicy.value !== thisWriteCachePolicy) {
    params['WriteCachePolicy'] = writeCachePolicy.value;
  } else {
    delete params['WriteCachePolicy'];
  }
  if (noBbuWriteState.value !== thisNoBatteryWriteCacheEnable) {
    noBbuWriteChange(noBbuWriteState.value);
    params['NoBatteryWriteCacheEnabled'] = noBbuWriteState.value;
  } else {
    delete params['NoBatteryWriteCacheEnabled'];
  }
  if (copyBackState.value !== thisCopyBackState) {
    params['CopyBackState'] = copyBackState.value;
  } else {
    delete params['CopyBackState'];
  }
  if (smarterCopyBackState.value !== thisSmarterCopyBackState) {
    params['SmarterCopyBackState'] = smarterCopyBackState.value;
  } else {
    delete params['SmarterCopyBackState'];
  }
  if (jBODState.value !== thisjBODState) {
    params['JBODState'] = jBODState.value;
  } else {
    delete params['JBODState'];
  }
  if (enabled.value !== thisEnabled) {
    params.ConsisCheckInfo['Enabled'] = enabled.value;
  } else {
    delete params.ConsisCheckInfo['Enabled'];
  }
  if (autoRepairEnable.value !== thisAutoRepairEnabled) {
    params.ConsisCheckInfo['AutoRepairEnabled'] = autoRepairEnable.value;
  } else {
    delete params.ConsisCheckInfo['AutoRepairEnabled'];
  }
  if (rate.value.label !== thisRate['label']) {
    params.ConsisCheckInfo['Rate'] = rate.value.label;
  } else {
    delete params.ConsisCheckInfo['Rate'];
  }
  if (period.value !== thisPeriod) {
    params.ConsisCheckInfo['Period'] = period.value;
  } else {
    delete params.ConsisCheckInfo['Period'];
  }
  if (delayForStart.value !== thisDelayForStart) {
    params.ConsisCheckInfo['DelayForStart'] = Number(delayForStart.value);
  } else {
    delete params.ConsisCheckInfo['DelayForStart'];
  }
  if (readCachePercent.value !== thisReadCachePercent) {
    params['ReadCachePercent'] = Number(readCachePercent.value);
  } else {
    delete params['ReadCachePercent'];
  }
  if (cardType.value !== RaidType.ARIES) {
    const { ConsisCheckInfo, ...newobj } = params;
    emits('editChange', newobj);
  } else {
    emits('editChange', params);
  }
}

// 无电池写缓存模式由关闭到开启时，提示文字信息
function noBbuWriteChange(value: boolean) {
  if (thisNoBatteryWriteCacheEnable === false && value) {
    elMessage({
      message: traduction('STORE_TIP_NO_BBU'),
      type: 'warning'
    });
  }
}

function clearForeignConfigFn(): void {
  if (foreignConfigStatus.value) {
    return;
  }
  dialogRefMessage.value.show();
}

function dialogCloseImport(val: boolean) {
  dialogRefImport.value.hide();
  if (val) {
    loading(true);
    foreignConfig()
      .then(() => {
        loading(false);
        showSuccessMessage();
      })
      .catch(err => {
        loading(false);
        const errorCode = JSON.parse(err.message).error[0]?.code;
        showFailedMessage(errorCode);
      });
  }
}

function dialogCloseMessage(val: boolean) {
  dialogRefMessage.value.hide();
  if (val) {
    loading(true);
    clearForeignConfig()
      .then(() => {
        loading(false);
        showSuccessMessage();
      })
      .catch(err => {
        loading(false);
        const errorCode = JSON.parse(err.message).error[0]?.code;
        showFailedMessage(errorCode);
      });
  }
}

function dialogClose(val: boolean) {
  dialogRef.value.hide();
  if (val) {
    loading(true);
    reset()
      .then(() => {
        loading(false);
        showSuccessMessage();
      })
      .catch(err => {
        loading(false);
        const errCode = err.data.error[0].code;
        if (errCode === 'RAIDControllerSetSuccessfully') {
          showSuccessMessage(traduction('SYSTEM_LOG_PCIE_TIP'));
        } else {
          showFailedMessage();
        }
      });
  }
}

function resetFun() {
  dialogRef.value.show();
}
function foreignConfigFn() {
  if (foreignConfigStatus.value) {
    return;
  }
  dialogRefImport.value.show();
}
onMounted(() => {
  setLabelWidth();
  if (isARIESrCard.value) {
    const bootDevices = raid?.getBootDevice ? raid?.getBootDevice.split('/') : [''];
    bootDevices.forEach((b: any, index: number) => {
      if (b) {
        bootDevices[index] = b.replace('Volume', 'Logical Drive ');
      }
    });
    const driveArr = raidNode.value.getRaid.getDriveArr;
    raidNode.value?.children?.forEach(item => {
      // 屏蔽非online固件状态的物理盘
      const obj = driveArr.find(ele => {
        return (
          (ele.getDriveID === item.id && ele.getFirmware === 'Online') ||
          item.componentName === 'VolumeNode'
        );
      });
      if (obj) {
        bootDiskList.value.push({
          id: item.id,
          label: item.label,
          name: 'IOptions'
        });
      }
    });
    let checkedArray: IOptions[] = [];
    // 设置启动盘选中项
    checkedArray = bootDiskList.value?.filter(
      item => item.id === bootDevices[0] || item.label === bootDevices[0]
    );
    if (checkedArray.length === 0) {
      checkedArray.push({
        name: 'IOptions',
        id: 'None',
        label: 'None'
      });
    }
    let device1 = null;
    let device2 = null;
    device1 = bootDiskList.value.filter(item => {
      return item.label === bootDevices[0] || item.id === bootDevices[0];
    })[0];
    device2 = bootDiskList.value.filter(item => {
      return item.label === bootDevices[1] || item.id === bootDevices[1];
    })[0];
    RaidEditModel.initRaidEdit(
      raid?.getJBODState?.id as boolean,
      raid.getCoyBack?.id as boolean,
      raid.getSmartErrors?.id as boolean,
      raid?.getMode,
      null,
      null,
      device1,
      device2
    );
    raidEditModel = RaidEditModel.getInstance();
    bootDevice1.value = raidEditModel.getSelectData.bootDevice1?.label;
  } else if (cardType.value === RaidType.BRCM) {
    RaidEditModel.initRaidEdit(
      raid?.getJBODState?.id as boolean,
      raid.getCoyBack?.id as boolean,
      raid.getSmartErrors?.id as boolean,
      raid?.getMode
    );
  } else if (isPMCCard.value) {
    // 选择启动盘
    raidNode.value?.children?.forEach((item: any) => {
      if (raid.getMode?.id === 'RAID') {
        if (item.componentName === 'VolumeNode' && !item?.getSSDCachecadeVolume) {
          bootList.value.push({
            name: 'IOptions',
            id: item.id,
            label: item.label
          });
        }
      } else {
        if (!item?.getSSDCachecadeVolume) {
          bootList.value.push({
            name: 'IOptions',
            id: item.id,
            label: item.label
          });
        }
      }
    });
    // 启动盘设备也支持None
    bootList.value.push({
      name: 'IOptions',
      id: 'None',
      label: 'None'
    });
    tipInfo.value = traduction('STORE_TIP_WORKMODE');
    bootDevice1Options.value = bootList.value;

    let device1 = null;
    let device2 = null;
    if (raid.getBootDevice && raid.getBootDevice.length > 0) {
      const bootArr = raid.getBootDevice.split('/');
      bootArr.forEach((b: any, index: number) => {
        if (b) {
          bootArr[index] = b.replace('Volume', 'Logical Drive ');
        }
      });
      device1 = bootList.value.filter(item => {
        return item.label === bootArr[0] || item.id === bootArr[0];
      })[0];
      device2 = bootList.value.filter(item => {
        return item.label === bootArr[1] || item.id === bootArr[1];
      })[0];
    }
    const wCacheType: IOptions[] = StorageStaticData.writeCacheType;
    // 选择硬盘cache写策略，默认选中第一个功能项的值
    const writeCacheData: IWriteCachePolicy = raid.getWriteCacheData as IWriteCachePolicy;
    const type = wCacheType[0];
    let policy = null;
    let wCachePolicy: IOptions[] = StorageStaticData.writeCachePolicy;
    if (writeCacheData) {
      policy =
        wCachePolicy.filter(item => {
          return item.id === writeCacheData[type.id as string];
        })[0] || null;
    }
    RaidEditModel.initRaidEdit(
      raid?.getJBODState?.id as boolean,
      raid.getCoyBack?.id as boolean,
      raid.getSmartErrors?.id as boolean,
      raid?.getMode,
      raid?.getBbuWriteState,
      raid?.getReadCachePercent,
      device1,
      device2,
      type,
      policy
    );
    raidEditModel = RaidEditModel.getInstance();
    modeShow.value = (raid.getSupportedModes &&
      raid.getSupportedModes?.options?.length > 0 &&
      Boolean(raidEditModel.getSelectData) &&
      Boolean(raidEditModel.getSelectData.mode)) as boolean;
    modelRef.value = raidEditModel.getSelectData.mode?.id;
    thisModel = raidEditModel.getSelectData.mode?.id as string;
    bootDevice1.value = raidEditModel.getSelectData.bootDevice1?.label;
    thisBootPriority1 = raidEditModel.getSelectData.bootDevice1?.label as string;
    bootDevice2.value = raidEditModel.getSelectData.bootDevice2?.label;
    thisBootPriority2 = raidEditModel.getSelectData.bootDevice2?.label as string;
    writeCacheType.value = raidEditModel.getSelectData.writeCacheType?.id;
    thisWriteCacheType = raidEditModel.getSelectData.writeCacheType?.id as string;
    writeCachePolicy.value = raidEditModel.getSelectData.writeCachePolicy?.id;
    thisWriteCachePolicy = raidEditModel.getSelectData.writeCachePolicy?.id as string;
    baseNoBBUState.value = raid.getBbuWriteState;
    noBbuWriteState.value = raidEditModel.getSelectData.noBatteryWriteCacheEnabled as boolean;
    thisNoBatteryWriteCacheEnable = raidEditModel.getSelectData
      .noBatteryWriteCacheEnabled as boolean;
    readCachePercent.value = raid.getReadCachePercent;
    thisReadCachePercent = raid.getReadCachePercent as number;
  }
  // maxCache逻辑盘列表
  maxCacheList.value =
    raidNode.value?.children?.filter(
      (item: any) => item.componentName === 'VolumeNode' && item?.getSSDCachecadeVolume
    ) || [];
  // ReadCachePercent值为null时或存在maxCache逻辑盘时禁止设置
  if (maxCacheList.value.length > 0) {
    readCachePercentDisabled.value = true;
  }
});
</script>

<style lang="scss" scoped>
.textClose {
  line-height: initial;
}
.underBtn {
  margin-top: 24px;
  :deep(.el-form-item__content) {
    display: grid;
    .el-button {
      justify-content: start;
      margin-left: 0;
      + .el-button {
        padding-top: 8px;
      }
    }
  }

  :deep(.el-form-item) {
    height: 64px !important;
  }
}
.midContent {
  border-radius: 4px;
  background: #F4F6FA;
  display: block;
  padding: 16px;
  margin-top: 10px;
  margin-bottom: 16px;
}
.volumnCreateBtn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #6c92fa;
  line-height: 16px;
  max-width: 250px;
  white-space: normal;
  font-size: 12px;
}
.volumnCreateBtn:focus {
  outline: none;
}
.notAllow {
  cursor: not-allowed;
  color: #d0d0d0;
}

.displayNone {
  display: none;
  padding-bottom: 0;
}

.displayTable {
  max-width: 300px;
  white-space: normal;
}

.el-form {
  :deep(.select-item) {
    height: 32px !important;
  }

  :deep(.el-form-item) {
    height: 16px;
    .el-form-item__label {
      display: inline-block;
      min-width: 100px;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  :deep(.el-form-item:nth-last-child(1)) {
    margin-bottom: 0;
  }
}

#periodSliderItem {
  margin-bottom: 40px;
  :deep(.el-form-item__content) {
    .el-slider {
      .el-slider__marks {
        .el-slider__marks-text {
          margin-top: 8px !important;
          font-size: 12px !important;
          line-height: 16px !important;
        }
      }
    }
  }
}

.el-select.tiSelect {
  width: 100%;
  :deep(.el-select__icon) {
    font-size: 16px;
  }
}
.halfSelect {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-select.tiSelect {
    width: 48% !important;
  }
  :deep(.el-select__icon) {
    font-size: 16px;
  }
}
.select-item {
  :deep(.el-form-item__label) {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
</style>
