<template>
  <div class="key-management">
    <!-- 标题 -->
    <div class="title">
      <i class="el-icon-lock"></i>
      密钥管理
    </div>

    <!-- 密管选择区域 -->
    <div class="section-card">
      <div class="section-title">密管选择区域:</div>
      <div class="section-content">
        <div class="form-item">
          <span class="label">密管方式</span>
          <el-select v-model="keyManageType" placeholder="请选择" style="width: 200px;padding-right: 10px;">
            <el-option label="三末加密机" value="threeTerm"></el-option>
          </el-select>
          <el-checkbox v-model="isEnabled">是否启用</el-checkbox>
          <span class="tip">
            * 平台只能选择一种密管方式，切换加密规则，平台可切换密管方式。
          </span>
        </div>
      </div>
    </div>

    <!-- 参数配置区域 -->
    <div class="section-card">
      <div class="section-title">参数配置区域:</div>
      <div class="section-content">
        <div class="button-group">
          <el-button type="primary">下载配置模板</el-button>
          <el-button type="primary">上传配置文件</el-button>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer">
      <el-button type="primary">编辑</el-button>
    </div>
  </div>
</template>

<script>
/**
 * 规则管理-密钥管理
 */
export default {
  name: 'KeyManagement',
  data() {
    return {
      keyManageType: '三末加密机',
      isEnabled: false
    }
  }
}
</script>

<style lang="scss" scoped>
.key-management {
  padding: 20px;
  .title {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    
    i {
      color: #409EFF;
      margin-right: 8px;
    }
  }

  .section-card {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .section-title {
      color: #409EFF;
      font-size: 14px;
      margin-bottom: 20px;
      position: relative;
      padding-left: 12px;

      &:before {
        content: '';
        width: 4px;
        height: 14px;
        background: #409EFF;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .section-content {
      .form-item {
        display: flex;
        align-items: center;
        
        .label {
          width: 100px;
          margin-right: 10px;
        }

        .tip {
          color: #f56c6c;
          margin-left: 10px;
          font-size: 12px;
        }
      }

      .button-group {
        button {
          margin-right: 10px;
        }
      }
    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
  }
}
</style>