<script setup lang="ts">
import { reactive } from 'vue';
// 硬分区单双系统
const hardPartity = reactive({
  value: 'SingleSystem',
  options: [
    { value: 'SingleSystem', label: 'HARD_PARTING_SINGLE_SYSTEM' },
    { value: 'DualSystem', label: 'HARD_PARTING_DOUBLE_SYSTEM' },
  ],
});

// VGA/USB/DVD
const vgaConfig = reactive({
  value: true,
});
</script>

<template>
  <div class="root-container">
    <div class="right-container">
      <div class="title">{{ $t('COMMON_SYSTEM_PARTITY') }}</div>
      <el-form label-width="110px" label-position="left">
        <!-- 硬分区 -->
        <el-form-item :label="$t('HARD_PARTING')" class="switch-item">
          <el-radio-group v-model="hardPartity.value">
            <el-radio v-for="item in hardPartity.options" :key="item.value" :label="item.value">
              {{ $t(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 远程节点认证 -->
        <el-form-item :label="$t('HARD_PARTING_SITE')">
          <table class="bc-table-partity">
            <tr>
              <td>{{ $t('COMMON_USERNAME') }}</td>
              <td>
                <el-input class="input-item"></el-input>
              </td>
            </tr>
            <tr>
              <td>{{ $t('COMMON_PASSWORD') }}</td>
              <td>
                <el-input class="input-item" type="password" autocomplete="new-password"></el-input>
              </td>
            </tr>
          </table>
        </el-form-item>

        <!-- VGA/USB/DVD -->
        <el-form-item :label="'VGA/USB/DVD'" class="vga-container switch-item">
          <el-switch v-model="vgaConfig.value" />
        </el-form-item>

        <!-- 保存 -->
        <el-form-item :label="''" class="save-btn">
          <el-button type="primary">{{ $t('COMMON_SAVE') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--o-text-color-primary);
}
.bc-table-partity {
  td {
    padding-right: 24px;
  }
  tr:first-child {
    td {
      padding-bottom: 24px;
    }
  }
  :deep(.el-input) {
    width: 240px;
  }
}

.root-container {
  :deep(.el-form) {
    .el-form-item {
      margin-bottom: 24px;
      .el-form-item__label {
        padding-right: 24px;
        color: var(--o-text-color-secondary);
      }
    }

    .switch-item {
      height: 16px;
      .el-form-item__label {
        padding: 0 24px 0 0;
        font-size: 12px;
      }

      .el-form-item__content {
        .el-radio {
          height: auto;
        }
      }
    }

    .save-btn {
      margin-bottom: 0;
    }
  }
}
</style>
