<script lang="ts" setup>
import { traduction, getErrorTranslate } from '@/utils/language';
import { ElMessage as elMessage } from 'element-plus';
import { ref, reactive, computed, nextTick, h } from 'vue';
import useStore from '@/stores';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import Adv from './AdvancedSettings.vue';
import { IconCaretRight, IconCaretDown } from '@computing/opendesign-icons';
import BasicSettings from './BasicSettings.vue';
import SpUpgradeSettings from './SpUpgradeSettings.vue';
import SpDiagnoseSettings from './SpDiagnoseSettings.vue';
import { getTemplate, createJob, updateJob, getSpData, deleteJobs } from '../sp.server';
import { templateAllData, cleanObject } from './validator';
import Date from '@/utils/date';
import { showElMessage } from '@/utils/utils';
import { showFailedMessage } from '@/utils/composition';
let timeArea = new Date().getTimezoneOffset() / 60;
const SPECIALS_STR = '******';
const props = defineProps({
  taskStatus: {
    type: String,
    default: () => '',
  },
  taskType: {
    type: String,
    required: true,
    default: '',
  },
  jobParams: {
    type: Object,
    default: () => ({}),
  },
  allTask: {
    type: Array,
    default: () => [],
  },
});
let msgInstance: any = null;
const customMsg = (type = '', msg = '') => {
  if (msgInstance) {
    msgInstance.close();
    msgInstance = null;
  }
  msgInstance = elMessage({
    type: type,
    message: h('span', { id: 'customAlert' }, msg),
    duration: type === 'success' ? 5000 : 10000,
    showClose: true,
  });
};

const emits = defineEmits(['task-created', 'delete-jobs']);
const store = useStore();
const activeName = ref('basic');
let isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const hasBaseConfigPrivil = checkPrivil(UserPrivil.baseConfig);
const disabled = computed(() => {
  return ['Running'].includes(props.taskStatus) || isSystemLock.value || !hasBaseConfigPrivil;
});
let basicStatus = ref<any>({});
let advStatus = ref<any>({});
let advancedParameters = {};
let basicParameters = ref({}) as any;
const dataChange = (data: any) => {
  advancedParameters = data;
};
const basicChange = (data: any) => {
  basicParameters.value = data;
};
function otherTypeCanCreate(empty: boolean) {
  let c1 = basicStatus.value.status && timeStatus.value;
  let c2 = !basicStatus.value.validRes || firstStep.value.aliveModel === '' || empty;
  return c1 || c2;
}
const canCreate = computed(() => {
  let emptyDateStatus =
    firstStep.value.aliveModel === 'later' && (!firstStep.value.date || !firstStep.value.time);
  if (props.taskType === 'OS') {
    if (basicStatus.value.status && advStatus.value.status && timeStatus.value) {
      return true;
    }
    let condition = !basicStatus.value.validRes || 
      !advStatus.value.validRes || 
      firstStep.value.aliveModel === '' || 
      emptyDateStatus;
    if (condition) {
      return true;
    }
  } else {
    if (otherTypeCanCreate(emptyDateStatus)) {
      return true;
    }
  }
  return false;
});
// 区分是上次任务数据回填还是选择模板数据回填
let isLastParams = ref(false);
const selectTitle = ref('basic');
const firstStep = ref({
  model: '',
  aliveModel: '',
  date: '',
  time: '',
});
const oldTime = ref('');
const oldFristStep = ref(JSON.parse(JSON.stringify(firstStep.value)));

const timeStatus = computed(() => {
  let aliveTime = `${firstStep.value.date} ${firstStep.value.time}`;
  let status = new Date(aliveTime).getTime() === new Date(oldTime.value).getTime();
  if (firstStep.value.aliveModel === 'immediately') {
    if (Number(oldTime.value) === 0) {
      status = true;
    }
  }
  let modelStatus = firstStep.value.aliveModel === oldFristStep.value.aliveModel;
  return status && modelStatus;
});
function changeDateTime(date: string, time: string) {
  firstStep.value.date = date;
  firstStep.value.time = time;
}
function changeAliveModel(aliveModel: string) {
  firstStep.value.aliveModel = aliveModel;
}

let options = ref<any[]>([]);
function geTem() {
  getTemplate().then((res: any) => {
    options.value = res.Templates[0].Contents.map((v: any) => ({
      ...v,
      label: v.TemplateName,
      value: v.TemplateName,
    }));
  });
}
let templateSupported = ref(false);
function getInfo() {
  getSpData().then((data: any) => {
    if (
      data.SPTemplateSupported?.[0]?.Type === 'SPOSInstall' &&
      data.SPTemplateSupported?.[0].Supported
    ) {
      templateSupported.value = true;
      geTem();
    } else {
      templateSupported.value = false;
    }
  });
}
if (props.taskType === 'OS') {
  getInfo();
}
const modelOptions = reactive([
  {
    label: traduction('SP_TASK_IMMEDIATELY'),
    value: 'immediately',
    disable: false,
    id: 1,
  },
  {
    label: traduction('SP_TASK_LATER'),
    value: 'later',
    disable: false,
    id: 2,
  },
]);
function transformOStask2(tmpData: any): void {
  tmpData.UploadFiles.FirmwareList =
    tmpData.UploadFiles?.FirmwareList?.map((v: { name: string }) => ({ name: v })) || [];
  tmpData.UploadFiles.AnswerFile = tmpData.UploadFiles?.AnswerFile
    ? [{ name: tmpData.UploadFiles.AnswerFile }]
    : [];
  tmpData.NetCfg = tmpData.NetCfg ? tmpData.NetCfg : [{}];
  tmpData.IPv4Addresses = {
    Address: tmpData.NetCfg[0]?.IPv4Addresses?.[0]?.Address || '',
    SubnetMask: tmpData.NetCfg[0]?.IPv4Addresses?.[0]?.SubnetMask || '',
    Gateway: tmpData.NetCfg[0]?.IPv4Addresses?.[0]?.Gateway || '',
    AddressOrigin: tmpData.NetCfg[0]?.IPv4Addresses?.[0]?.AddressOrigin || '',
  };
  tmpData.IPv6Addresses = {
    Address: tmpData.NetCfg[0]?.IPv6Addresses?.[0]?.Address || '',
    PrefixLength: tmpData.NetCfg[0]?.IPv6Addresses?.[0]?.PrefixLength || '',
    Gateway: tmpData.NetCfg[0]?.IPv6Addresses?.[0]?.Gateway || '',
    AddressOrigin: tmpData.NetCfg[0]?.IPv6Addresses?.[0]?.AddressOrigin || '',
  };
  tmpData.DNS = tmpData.NetCfg[0].NameServers?.[0]?.DNS || '';
  transfromOsTask3(tmpData);
}
function transfromOsTask3(tmpData: any) {
  tmpData.Partition = {
    Name: tmpData.Partition?.[0]?.Name || '',
    FileSystem: tmpData.Partition?.[0]?.FileSystem || '',
    Size: tmpData.Partition?.[0]?.Size || '',
  };
  tmpData.PackageName = tmpData.Packages[0]?.PackageName?.join(',') ?? '';
  tmpData.PatternName = tmpData.Packages[0]?.PatternName?.join(',') ?? '';
  tmpData.RemovePackageName = tmpData.Packages[0]?.RemovePackageName?.join(',') ?? '';
  tmpData.RemovePatternName = tmpData.Packages[0]?.RemovePatternName?.join(',') ?? '';
  tmpData.CustomizedEnabled = tmpData.Packages[0]?.CustomizedEnabled ?? false;
  tmpData.EnvironmentName = tmpData.Packages[0]?.EnvironmentName || '';
  if (['Cancelled', 'Completed', 'Exception'].includes(props.taskStatus)) {
    if (tmpData.RootPwd === SPECIALS_STR) {
      tmpData.RootPwd = '';
    }
    if (tmpData.CDKey === SPECIALS_STR) {
      tmpData.CDKey = '';
    }
  }
}
function transformOStask(tmpData: any): void {
  tmpData.UploadFiles = tmpData.UploadFiles ? tmpData.UploadFiles : {};
  let time = tmpData.UploadFiles?.TimeoutSeconds;
  if (time || time === 0 || time === '0') {
    tmpData.UploadFiles.TimeoutSeconds = time;
  } else {
    tmpData.UploadFiles.TimeoutSeconds = '';
  }
  tmpData.Software = tmpData.Software?.[0].FileName ? [tmpData.Software?.[0].FileName] : [];
  tmpData.Device =  {
    MAC :tmpData.NetCfg?.[0]?.Device?.MAC || '',
    Name :tmpData.NetCfg?.[0]?.Device?.Name || '',
    Silkprint :{
      Port: tmpData.NetCfg?.[0]?.Device?.Silkprint?.Port || '',
      Location: tmpData.NetCfg?.[0]?.Device?.Silkprint?.Location || '',
      DeviceName:tmpData.NetCfg?.[0]?.Device?.Silkprint?.DeviceName || '',
    },
  };
  tmpData.BootType = Boolean(tmpData.BootType);
  
  tmpData.UploadFiles.DriverList =
    tmpData.UploadFiles?.DriverList?.map((v: { name: string }) => ({
      name: v,
    })) || [];
  transformOStask2(tmpData);
}
function transformParams(data: any) {
  let tmpData = JSON.parse(JSON.stringify(data));
  if (props.taskType === 'OS') {
    transformOStask(tmpData);
  } else if (props.taskType === 'Update') {
    tmpData.Parameter = tmpData?.Parameter ? [tmpData.Parameter] : [];
    if (['Cancelled', 'Completed', 'Exception'].includes(props.taskStatus)) {
      if (tmpData.SignalURI === SPECIALS_STR) {
        tmpData.SignalURI = '';
      }
      if (tmpData.ImageURI === SPECIALS_STR) {
        tmpData.ImageURI = '';
      }
    }
  } else if (props.taskType === 'Diagnose') {
  } else {
  }
  return tmpData;
}
let isClickBtn = ref('');
let typeMap = {
  OS: 'SPOSInstall',
  Diagnose: 'SPDiagnose',
  Update: 'SPFWUpdate',
};
function deleteJob(id: string[], params: any) {
  deleteJobs(id).then(() => {
    emits('delete-jobs');
    createJobs(params);
  }).catch(error => {
    const errorCode = error?.data?.error?.[0].code;
    if (errorCode) {
      showFailedMessage(getErrorTranslate(errorCode));
    } else {
      showFailedMessage(traduction('COMMON_FAILED'));
    }
  });
}
function createJobs(params: any) {
  createJob(params).then(() => {
    showElMessage('success', traduction('SP_TASK_SUCCESS_TIP'));
    emits('task-created');
  }).catch(error => {
    const errorCode = error?.data?.error?.[0].code;
    if (errorCode && errorCode === 'ResourceInUse') {
      showFailedMessage(getErrorTranslate(errorCode));
    } else {
      showFailedMessage(traduction('COMMON_FAILED'));
    }
  });
}
function getZeroAreaTime() {
  let date = firstStep.value.date.replaceAll('/', '-').slice(0, 10);
  let time = `${firstStep.value.time}:00`;
  let selectTime = new Date(`${date} ${time}`).getTime();
  let timeA = Math.abs(timeArea) * 3600000;
  let zero = timeArea >= 0 ? selectTime + timeA : selectTime - timeA;
  return `${new Date(zero).pattern('yyyy-MM-dd')}T${new Date(zero).pattern('HH:mm')}:00+0:00`;
}

function createJobFun() {
  let totalParameters = JSON.parse(JSON.stringify({ ...basicParameters.value, ...advancedParameters }));
  if (props.taskType === 'OS') {
    totalParameters.NetCfg[0].Device = totalParameters.Device;
    delete totalParameters.Device;
    if (!totalParameters.InstallMode) {
      totalParameters.InstallMode = 'Template';
    }
  }
  let p = cleanObject(totalParameters);
  let params = {
    JobType: typeMap[props.taskType],
    InitialStartTime:
      firstStep.value.aliveModel === 'immediately'
        ? ''
        : getZeroAreaTime(),
    Payload: {
      JsonBody: JSON.stringify(p),
    },
  };
  let ids = props.allTask.map((v: any) => v.Id);
  if (!ids.length) {
    createJobs(params);
  } else {
    deleteJob(ids, params);
  }
}
function startTask() {
  isClickBtn.value = 'start';
  nextTick(() => {
    tipRef.value.show();
  });
  createJobFun();
}
function resetZeroAreaTime(timeStrap: number, type = 'date') {
  let date = sessionStorage.getItem('DateTime') || '';
  let area = date?.indexOf('UTC') > 0 ? 'UTC' : 'GMT';
  let ms = `${timeStrap} ${area}+0000`;
  return type === 'date' ? `${new Date(ms).pattern('yyyy/MM/dd')}` :  `${new Date(ms).pattern('HH:mm')}:00`;
}
const templateData = ref({});
function queryConfig(flag: boolean, jobParams: any) {
  let condition = basicStatus.value.status && timeStatus.value;
  if (props.taskType === 'OS') {
    condition = condition && advStatus.value.status;
  }
  if (jobParams === '{}') {
    if (condition) {
      templateData.value = {};
      firstStep.value.model = '';
      firstStep.value.aliveModel = '';
      firstStep.value.time = '';
      firstStep.value.date = '';
      oldTime.value = '';
    }
    return;
  }
  isLastParams.value = true;
  if (jobParams.InitialStartTime) {
    let time = new Date().pattern('HH:mm');
    let date = new Date().pattern('yyyy/MM/dd');
    if (jobParams.InitialStartTime) {
      time = resetZeroAreaTime(jobParams.InitialStartTime, 'time');
      date = resetZeroAreaTime(jobParams.InitialStartTime, 'date');
    }
    firstStep.value.time = time;
    firstStep.value.date = date;
    oldTime.value = `${date} ${time}`;
    firstStep.value.aliveModel = 'later';
  } else if (jobParams.InitialStartTime === '') {
    firstStep.value.aliveModel = 'immediately';
  }
  oldFristStep.value = JSON.parse(JSON.stringify(firstStep.value));
  if (jobParams.JsonBody) {
    templateData.value = flag ? transformParams(JSON.parse(jobParams.JsonBody)) : {};
  } else {
    templateData.value = {};
  }
}
function fromTemplate(value: string) {
  isLastParams.value = false;
  let obj = options.value.find((v: { TemplateName: string }) => v.TemplateName === value) || {};
  if (JSON.stringify(obj) === '{}') {
    templateData.value = {};
    return;
  }
  let tmpData = JSON.parse(JSON.stringify(templateAllData));
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(tmpData, key)) {
      if (Array.isArray(obj[key]) && obj[key].length === 0) {
        continue;
      }
      tmpData[key] = obj[key];
    }
  }
  const initData = transformParams(tmpData);
  templateData.value = initData;
}

function handleChange(title: string) {
  selectTitle.value = title;
}

// 下发任务弹窗设置
const tipRef = ref();
const dialogConfig = computed(() => {
  return {
    title:
      isClickBtn.value === 'update' ? traduction('UPDATE_TASK_T') : traduction('SP_TASK_SUBMMIT'),
    content:
      `${props.allTask.length && isClickBtn.value === 'update' ? `${traduction('SP_DELIVERED_TASK_TIP')}<br>` : ''}
        ${props.allTask.length && isClickBtn.value === 'start' ? `${traduction('SP_ONLY_ONE')}<br>` : ''}
        ${traduction('SP_RESTART_TIP')}`,
  };
});
const canUpdate = computed(() => {
  if (canCreate.value) {
    return true;
  }
  return !props.taskStatus || props.taskStatus !== 'Pending';
});
function updateJobFun() {
  let totalParameters = JSON.parse(
    JSON.stringify({ ...basicParameters.value, ...advancedParameters }),
  );
  let p = totalParameters;
  if (props.taskType === 'OS') {
    totalParameters.NetCfg[0].Device = totalParameters.Device;
    delete totalParameters.Device;
    if (!totalParameters.InstallMode) {
      totalParameters.InstallMode = 'Template';
    }
    p = cleanObject(totalParameters);
    if (!p.Software) {
      p.Software = [{
        FileName: '',
      }];
    }
    if (!p.BootType) {
      p.BootType = '';
    }
  }
  let params = {
    JobId: props.jobParams.Id,
    InitialStartTime:
      firstStep.value.aliveModel === 'immediately'
        ? ''
        : getZeroAreaTime(),
    Payload: {
      JsonBody: JSON.stringify(p),
    },
  };
  updateJob(params).then(() => {
    emits('task-created');
    showElMessage('success', traduction('COMMON_SUCCESS'));
  }).catch(error => {
    const errorCode = error?.data?.error?.[0].code;
    if (errorCode) {
      showFailedMessage(getErrorTranslate(errorCode));
    } else {
      showFailedMessage(traduction('COMMON_FAILED'));
    }
  });
}
const updateTask = () => {
  isClickBtn.value = 'update';
  if (['Pending'].includes(props.taskStatus)) {
    nextTick(() => {
      tipRef.value.show();
    });
    return;
  }
  updateJobFun();
};
const closeHandle = (val: boolean) => {
  tipRef.value.hide();
  if (val) {
    if (isClickBtn.value === 'update') {
      updateJobFun();
    } else {
      createJobFun();
    }
  }
};
defineExpose({ queryConfig });
</script>
<template>
  <div :id="`create${taskType}Task`" class="task-params">
    <el-form
      ref="ruleFormRef"
      label-width="auto"
      label-position="left"
      :model="firstStep"
      :validate-on-rule-change="false"
    >
      <el-form-item label="">
        <el-button 
          :id="`${taskType}Submit`" 
          type="primary" 
          :disabled="canCreate || taskStatus === 'Pending'" 
          @click="startTask"
        >
          {{ $t('SP_TASK_SUBMMIT') }}
        </el-button>
        <el-button :id="`${taskType}Update`" :disabled="canUpdate" @click="updateTask">
          {{ traduction('UPDATE_TASK') }}
        </el-button>
      </el-form-item>
      <el-form-item v-if="props.taskType === 'OS' && templateSupported" :label="$t('SP_TASK_TEMPLATE')" for="''">
        <el-select
          v-model="firstStep.model"
          v-addId.select="'taskTemplate'"
          class="default-select"
          filterable
          :teleported="false"
          :disabled="disabled"
          :suffix-icon="IconCaretDown"
          @change="fromTemplate"
        >
          <template v-for="item in options" :key="item.value">
            <el-option :label="item.label" :value="item.value">
              <el-tooltip placement="right" :content="item.label" popper-class="domain-tip">
                <div class="domain-item">{{ item.label }}</div>
              </el-tooltip>
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item v-if="props.taskType === 'OS'" :label="$t('IBMC_MANUAL_EFFECTIVE')" required>
        <el-radio-group id="aliveModelItem" v-model="firstStep.aliveModel">
          <el-radio
            v-for="(item, index) in modelOptions"
            :key="item.id"
            v-addId.radio="'model' + index"
            :label="item.value"
            :disabled="disabled"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="firstStep.aliveModel === 'later' && props.taskType === 'OS'"
        :label="$t('SP_TASK_VALIDATE_TIME')"
        required
        class="time-area"
      >
        <el-date-picker
          id="datePicker"
          v-model="firstStep.date"
          type="date"
          :disabled="disabled"
          :clearable="false"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
        <el-time-picker
          id="timePicker"
          v-model="firstStep.time"
          :disabled="disabled"
          :clearable="false"
          format="HH:mm"
          value-format="HH:mm"
        />
        <span class="timearea-tip">{{ $t('SP_TIMEAREA_TIP') }}</span>  
      </el-form-item>
    </el-form>
    <div v-if="props.taskType === 'OS'" class="sp-collapse">
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item id="collapseItem0" name="basic">
          <template #title>
            <div id="title-box" class="title-box">
              <div id="icon-box" class="icon-box">
                <el-icon v-if="selectTitle !== 'basic'" id="titleRightIcon" class="title-icon">
                  <IconCaretRight />
                </el-icon>
                <el-icon v-else class="titleIcon"><IconCaretDown /></el-icon>
                <div class="title-content">{{ $t('SP_TASK_BASIC_SETTING') }}</div>
              </div>
            </div>
          </template>
          <div :id="`settingBox0`" class="setting-box">
            <BasicSettings
              :is-last-params="isLastParams"
              :template-data="templateData"
              :task-status="disabled"
              @btn-status="basicStatus = $event"
              @data-change="basicChange"
            />
          </div>
        </el-collapse-item>
        <el-collapse-item id="collapseItem1" name="advanced">
          <template #title>
            <div id="title-box" class="title-box">
              <div id="icon-box" class="icon-box">
                <el-icon v-if="selectTitle !== 'advanced'" id="titleRightIcon" class="title-icon">
                  <IconCaretRight />
                </el-icon>
                <el-icon v-else class="titleIcon"><IconCaretDown /></el-icon>
                <div class="title-content">{{ $t('SP_TASK_ADVANCED_SETTING') }}</div>
              </div>
            </div>
          </template>
          <div :id="`settingBox1`" class="setting-box">
            <div>
              <Adv
                :is-last-params="isLastParams"
                :template-data="templateData"
                :task-status="disabled"
                :os-type="basicParameters.OSType"
                @btn-status="advStatus = $event"
                @data-change="dataChange"
              ></Adv>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <SpUpgradeSettings
      v-if="props.taskType === 'Update'"
      :template-data="templateData"
      :task-status="disabled"
      :alive-date-time="oldTime"
      :alive-model="firstStep.aliveModel"
      @datetime-change="changeDateTime"
      @alive-model-change="changeAliveModel"
      @btn-status="basicStatus = $event"
      @data-change="basicChange"
    />
    <SpDiagnoseSettings
      v-if="props.taskType === 'Diagnose'"
      :template-data="templateData"
      :task-status="disabled"
      :alive-date-time="oldTime"
      :alive-model="firstStep.aliveModel"
      @datetime-change="changeDateTime"
      @alive-model-change="changeAliveModel"
      @btn-status="basicStatus = $event"
      @data-change="basicChange"
    />
  </div>
  <Dialog ref="tipRef" class="tip" :config="dialogConfig" @close="closeHandle">
    <template #default>
      <el-icon :size="24">
        <IconAlarm />
      </el-icon>
      <div class="content-item" v-html="dialogConfig.content"></div>
    </template>
  </Dialog>
</template>

<style lang="scss" scoped>
.step-filed {
  display: flex;
  width: 100%;
  margin-bottom: 12px;
  .step {
    display: -webkit-box;
    flex: none;
    float: left;
    &:last-child {
      float: right;
    }
  }

  .step-icon {
    margin-right: 8px;
  }

  .check-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: var(--o-text-color-primary);
  }

  .uncheck-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: var(--o-text-color-secondary);
    &:hover {
      color: var(--o-color-primary-secondary);
    }
  }

  .complete {
    color: var(--o-color-primary);
  }

  .el-divider--horizontal {
    margin: 11px 8px !important;
    border-top-color: var(--o-border-color-lighter);
  }
  .next {
    border-top-color: var(--o-color-primary);
  }
}
.sp-collapse {
  .btnBox {
    margin-bottom: 16px;
  }
  :deep(.el-collapse) {
    border-top: none;
    border-bottom: none;
    .el-collapse-item {
      margin-bottom: 8px;
      .el-collapse-item__wrap {
        background: var(--o-bg-color-light);
        border-bottom: none;
      }
      .el-collapse-item__content {
        padding-bottom: 0px;
        margin: 0;
        background: var(--o-bg-color-light);
        .el-scrollbar__wrap {
          background: var(--o-bg-color-light);
        }
      }
    }
    .tableHeight {
      min-height: 0px;
      .el-table__inner-wrapper {
        min-height: 0px;
      }
      .el-table__body-wrapper {
        min-height: 0px;

        .el-scrollbar {
          min-height: 0px;

          .el-scrollbar__wrap {
            min-height: 0px;
          }
        }
      }
    }

    :last-child {
      margin-bottom: 0px;
    }
    .el-collapse-item__header {
      border-bottom: none;
      border-radius: 4px;
      background: var(--o-bg-color-light);
      padding: 0;
    }
    .el-collapse-item__arrow {
      display: none;
    }
    .el-table__row > td {
      border: none;
      background: var(--o-bg-color-light);
    }
    .el-table__cell {
      border: none;
      background: var(--o-bg-color-light);
    }
    .setting-box {
      margin: 8px 16px;
      background: var(--o-bg-color-light);
      .settingBtnBox {
        margin-bottom: 16px;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
      .edit-table {
        .table-input {
          .el-input__wrapper {
            width: 200px;
          }
        }
        .el-table--fit {
          min-height: 0px;
        }
        .el-table__inner-wrapper {
          min-height: 0px;
        }
        .el-table__body-wrapper {
          min-height: 0px;
        }
        .el-scrollbar {
          min-height: 0px;
        }
        .el-scrollbar__wrap {
          min-height: 0px;
          overflow: visible;
        }
        .table-header {
          :first-child {
            border-radius: 4px 0px 0px 4px;
          }
          :last-child {
            border-radius: 0px 4px 4px 0px;
            border-right: none;
          }
          th {
            background: var(--o-border-color-base);
            border-right: 2px solid var(--o-color-white);
          }
        }
        .el-scrollbar__bar {
          display: none;
        }
        .el-input-number {
          width: 122px;
          .el-input__wrapper .el-input__inner {
            padding-right: 42px !important;
          }
        }
        .el-form {
          display: flex;

          .el-form-item {
            margin-bottom: 0;

            .el-form-item__content {
              width: 200px;

              .el-form-item__error {
                position: relative;
                top: 0;
                left: 0;
                word-wrap: break-word;
              }
            }
          }
          .number-item {
            .el-form-item__content {
              display: block;
            }
          }
        }
      }
      .read-only-box {
        display: flex;
        flex-wrap: wrap;

        .read-only-item {
          display: flex;
          margin-left: 8px;
          width: calc(50% - 8px);
          margin-top: 8px;
          .title {
            width: 50%;
            font-size: 12px;
            color: #4e5865;
            font-family: HarmonyOS Sans SC;
            font-weight: regular;
            line-height: 16px;
          }
          .content {
            width: 60%;
            font-size: 12px;
            color: #4e5865;
            font-family: HarmonyOS Sans SC;
            font-weight: regular;
            line-height: 16px;
          }
        }
        :first-child {
          margin-top: 0px;
        }
        :nth-child(2) {
          margin-top: 0px;
        }
      }
    }
  }
  .selectBox {
    width: 200px;
  }
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #000000;
    font-family: HarmonyOS Sans SC;
    font-weight: medium;
    line-height: 24px;
    width: 100%;
    padding-right: 16px;

    .icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 16px;
      .title-icon {
        font-size: 16px;
      }
      .title-content {
        font-size: 16px;
        color: #000000;
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        line-height: 24px;
        padding-left: 8px;
      }
    }
    .help-btn-text {
      font-size: 12px;
      color: var(--o-button-color_label);
      font-family: HarmonyOS Sans SC;
      font-weight: medium;
      line-height: 16px;
      &:hover {
        color: var(--o-color-primary-secondary);
      }
    }
    .no-margin {
      padding-left: 0px;
    }
  }
}
.default-select {
  min-width: 240px;
}
.task-params {
  .model-btn {
    margin-left: 8px;
  }
}
:deep(.el-date-editor--time) {
  margin-left: 8px;
  width: 128px;
}
.timearea-tip {
  font-size: 12px;
  color: var(--o-text-color-tertiary);
}
.content-item {
  margin-left: 16px;
  padding-top: 4px;
}
</style>

<style>
#customAlert {
  word-break: break-all;
  padding-right: 24px;
}
.el-date-picker {
  max-width: inherit !important;
  width: 322px !important;
}
.time-area {
  .el-date-editor--time{
    margin-right: 8px;
  }
}
</style>
