<template>
  <div class="params-config">
    <div v-if="!editable" class="mask" @click.stop="handleMaskClick"></div>
    <div v-if="type === 'local'" style="display: flex; justify-content: center; align-items: center; height: 300px;">
      <span style="font-size: 40px; color: #909399;">无需参数配置</span>
    </div>
    <!-- 加密机配置 -->
    <div v-if="type === 'machine'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="密钥索引" required>
          <div class="input-group">
            <el-input v-model="params.sdkkeyid" placeholder="110" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* sdkkeyid: SM2加密的密钥索引</div>
          </div>
        </el-form-item>

        <el-form-item label="私钥授权码" required>
          <div class="input-group">
            <el-input v-model="params.sdkpassword" type="password" placeholder="pass" show-password style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* SDKPassword: SM2加密私钥授权码</div>
          </div>
        </el-form-item>

        <el-form-item label="配置文件" required>
          <div class="input-group">
            <el-input v-model="params.hsmfiledir" placeholder="/home/ghca/data/" style="width: 500px" :disabled="!editable" />
            <div class="button-group">
              <el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
              <el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
            </div>
            <div class="tip-text">* SDKPath: 点击下载HsmConfig模板，修改配置信息，然后上传HsmConfig文件</div>
          </div>
        </el-form-item>
      </el-form>
      
    </div>
    <!-- 云加密机配置 -->
    <div v-if="type === 'cloud'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="密钥索引" required>
         <div class="input-group">
          <el-input v-model="params.sdkkeyid" placeholder="110" style="width: 500px;" :disabled="!editable" />
           <div class="tip-text">SDKKeyid: SM2加密的密钥索引</div>
         </div>
        </el-form-item>

        <el-form-item label="私钥授权码" required>
         <div class="input-group">
          <el-input v-model="params.sdkpassword" type="password" placeholder="****" show-password style="width: 500px;" :disabled="!editable" />
          <div class="tip-text">SDKPassword: SM2加密私钥授权码</div>
         </div>
        </el-form-item>

        <el-form-item label="配置文件" required>
          <div class="input-group">
            <el-input v-model="params.hsmfiledir" placeholder="/home/ghca/data/" style="width: 500px" :disabled="!editable" />
            <div class="button-group">
              <el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
              <el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
            </div>
            <div class="tip-text">* SDKPath: 点击下载HsmConfig模板，修改配置信息，然后上传HsmConfig文件</div> 
          </div>
        </el-form-item>

        <el-form-item label="客户端证书" required>
          <div class="input-group">
            <el-input v-model="params.keystoredir" placeholder="/home/ghca/data/" style="width: 500px" :disabled="!editable" />
            <div class="button-group">
              <el-button type="primary" @click="uploadCert('client')">上传证书</el-button>
            </div>
            <div class="tip-text">* KeyStore: 类似client.p12客户端证书上传，此处上传路径应和配置文件中客户端证书路径保持一致</div>
          </div>
        </el-form-item>

        <el-form-item label="CA证书" required>
          <div class="input-group">
            <el-input v-model="params.truststoredir" placeholder="/home/ghca/data/" style="width: 500px" :disabled="!editable" />
            <div class="button-group">
              <el-button type="primary" @click="uploadCert('ca')">上传证书</el-button>
            </div>
           <div class="tip-text">* TrustStore: 类似ca.cer CA证书上传，此处上传路径应和配置文件里的证书路径保持一致</div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 国芯加密卡配置 -->
    <div v-else-if="type === 'card'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="权限密码" required>
          <div class="input-group">
            <el-input v-model="params.password" placeholder="110" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* Ccore.PhKeyHandle.password</div>
          </div>
        </el-form-item>

        <el-form-item label="比特值" required>
          <div class="input-group">
            <el-input v-model="params.bits" placeholder="pass" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.bits</div>
          </div>
        </el-form-item>

        <el-form-item label="X向量" required>
          <div class="input-group">
            <el-input v-model="params.x" placeholder="/home/ghca/data/" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.X</div>
          </div>
        </el-form-item>

        <el-form-item label="Y向量" required>
          <div class="input-group">
            <el-input v-model="params.y" placeholder="0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.Y</div>
          </div>
        </el-form-item>

        <el-form-item label="哈希值" required>
          <div class="input-group">
            <el-input v-model="params.m" placeholder="0, 27, 28, 35, 90, -3, -128, 76, -117, -31, 86" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.M</div>
          </div>
        </el-form-item>

        <el-form-item label="密钥密文" required>
          <div class="input-group">
            <el-input v-model="params.c" placeholder="-18, 92, 111, -108, 103, -78, 28, 59, 67, -5" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.C</div>
          </div>
        </el-form-item>

        <el-form-item label="向量长度" required>
          <div class="input-group">
            <el-input v-model="params.l" placeholder="16" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.L</div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary">参数生成</el-button>
          <span class="tip-text" style="margin-left: 16px;">* 点击自动带入加密卡的相关参数</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- KMS配置 -->
    <div v-else-if="type === 'kms'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="主键" required>
          <div class="input-group">
            <el-input v-model="params.tid" placeholder="110" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.tid: 加密机设备ID</div>
          </div>
        </el-form-item>

        <el-form-item label="访问密钥" required>
          <div class="input-group">
            <el-input v-model="params.credaccesskey" type="password" placeholder="****" show-password style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.credaccesskey: 加密机设备密码</div>
          </div>
        </el-form-item>

        <el-form-item label="私钥" required>
          <div class="input-group">
            <el-input v-model="params.secretkey" type="password" placeholder="************" show-password style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.secretkey: 私钥</div>
          </div>
        </el-form-item>

        <el-form-item label="序列" required>
          <div class="input-group">
            <el-input v-model="params.iv" placeholder="1,2,3,4,5,6,7,8,9,8,7,6," style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.iv: 序列</div>
          </div>
        </el-form-item>

        <el-form-item label="协议" required>
          <div class="input-group">
            <el-input v-model="params.protocol" placeholder="http" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.protocol: 协议</div>
          </div>
        </el-form-item>

        <el-form-item label="地址" required>
          <div class="input-group">
            <el-input v-model="params.host" placeholder="kotest.gh--truststoredir.com" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.host: 地址</div>
          </div>
        </el-form-item>

        <el-form-item label="端口" required>
          <div class="input-group">
            <el-input v-model="params.credport" placeholder="18180" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.credential.credport: 端口</div>
          </div>
        </el-form-item>

        <el-form-item label="主密钥" required>
          <div class="input-group">
            <el-input v-model="params.keyid" placeholder="5984eba--2884--4ef7--a0c" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.keyid.keyid</div>
          </div>
        </el-form-item>

        <el-form-item label="密钥的类型" required>
          <div class="input-group">
            <el-input v-model="params.keyspec" placeholder="SM4" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.keyid.keyspec</div>
          </div>
        </el-form-item>

        <el-form-item label="密钥用途" required>
          <div class="input-group">
            <el-input v-model="params.keyusage" placeholder="ENCRYPT_DECRYPT" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.keyid.keyusage</div>
          </div>
        </el-form-item>

        <el-form-item label="密钥来源" required>
          <div class="input-group">
            <el-input v-model="params.origin" placeholder="KMS" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.keyid.origin</div>
          </div>
        </el-form-item>

        <el-form-item label="保护级别" required>
          <div class="input-group">
            <el-input v-model="params.protectionlevel" placeholder="HSM" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* kms.keyid.protectionlevel</div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- THKMS配置 -->
    <div v-else-if="type === 'thkms'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="协议" required>
          <div class="input-group">
            <el-input v-model="params.protocol" placeholder="110" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* thkms.protocol</div>
          </div>
        </el-form-item>

        <el-form-item label="主机" required>
          <div class="input-group">
            <el-input v-model="params.host" placeholder="pass" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* thkms.host</div>
          </div>
        </el-form-item>

        <el-form-item label="端口" required>
          <div class="input-group">
            <el-input v-model="params.credport" placeholder="/home/ghca/data/" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* thkms.credport</div>
          </div>
        </el-form-item>

        <el-form-item label="应用ID" required>
          <div class="input-group">
            <el-input v-model="params.appId" placeholder="0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* thkms.appId</div>
          </div>
        </el-form-item>

        <el-form-item label="主密钥" required>
          <div class="input-group">
            <el-input v-model="params.keyid" placeholder="0, 27, 28, 35, 90, -3, -128, 76, -117, -31, 86" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* thkms.keyid</div>
          </div>
        </el-form-item>

        <el-form-item label="私钥证书" required>
          <div class="input-group">
            <el-input v-model="params.sm2pri" placeholder="-18, 92, 111, -108, 103, -78, 28, 59, 67, -5" style="width: 500px" :disabled="!editable" />
            <el-button type="primary" @click="uploadCert('sm2')">上传证书</el-button>
            <div class="tip-text">* 类似sm2pri.pkcs8.der 证书上传</div>
          </div>
        </el-form-item>

        <el-form-item label="公钥证书" required>
          <div class="input-group">
            <el-input v-model="params.sm2pub" placeholder="16" style="width: 500px" :disabled="!editable" />
            <el-button type="primary" @click="uploadCert('sm2pub')">上传证书</el-button>
            <div class="tip-text">* 类似sm2pub.cer 证书上传</div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 得安加密机配置 -->
    <div v-else-if="type === 'dean'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="IP" required>
          <div class="input-group">
            <el-input v-model="params.ip" placeholder="110" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* IP</div>
          </div>
        </el-form-item>

        <el-form-item label="端口" required>
          <div class="input-group">
            <el-input v-model="params.port" placeholder="pass" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* 端口</div>
          </div>
        </el-form-item>

        <el-form-item label="密码" required>
          <div class="input-group">
            <el-input v-model="params.password" type="password" placeholder="********" show-password style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* 密码</div>
          </div>
        </el-form-item>

        <el-form-item label="算法类型" required>
          <div class="input-group">
            <el-input v-model="params.algorithm" placeholder="SM4" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* 算法类型</div>
          </div>
        </el-form-item>

        <el-form-item label="密钥号" required>
          <div class="input-group">
            <el-input v-model="params.keyNo" placeholder="0, 27, 28, 35, 90, -3, -128, 76, -117, -31, 83, 84, 46, 61, -97, -92, 120, -19, 46, -121, -27, -107, -58, 90, 118, 0, 6, 105, 68, -41, 96, 30" style="width: 500px" :disabled="!editable" />
            <div class="tip-text">* 密钥号</div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 量子加密机配置 -->
    <div v-else-if="type === 'star'" class="params-form">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="配置文件" required>
          <div class="input-group">
            <el-input v-model="params.configPath" style="width: 500px" :disabled="!editable" />
            <el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
            <el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
          </div>
        </el-form-item>

        <el-form-item label="用户证书路径">
          <div class="input-group">
            <el-input v-model="params.certsPath" style="width: 500px" :disabled="!editable" />
            <el-button type="primary" @click="uploadCert('certs')">上传证书</el-button>
            <div class="tip-text">* certs.pem</div>
          </div>
        </el-form-item>

        <el-form-item label="用户密钥路径">
          <div class="input-group">
            <el-input v-model="params.keyPath" style="width: 500px" :disabled="!editable" />
            <el-button type="primary" @click="uploadCert('sigkey')">上传证书</el-button>
            <div class="tip-text">* sig.key.pem</div>
          </div>
        </el-form-item>

        <el-form-item label="服务端CA证书路径">
          <div class="input-group">
            <el-input v-model="params.caPath" style="width: 500px" :disabled="!editable" />
            <el-button type="primary" @click="uploadCert('ca')">上传证书</el-button>
            <div class="tip-text">* ca.crt.pem</div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 三末加密机配置 -->
    <div v-else-if="type === 'threeTerm'" class="params-form">
        <el-form label-width="100px">
          <div class="config-buttons" style="text-align: left;">
            <el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
            <el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
          </div>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParamsConfig',
  props: {
    // 密管类型
    type: {
      type: String,
      required: true
    },
    // 参数值
    modelValue: {
      type: Object,
      default: () => ({})
    },
    // 是否可编辑
    editable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      params: this.modelValue
    }
  },
  watch: {
    params: {
      deep: true,
      handler(val) {
        this.$emit('update:modelValue', val)
      }
    },
    modelValue: {
      deep: true,
      handler(val) {
        this.params = val
      }
    }
  },
  methods: {
    // 下载配置模板
    downloadTemplate() {
      this.$emit('download-template')
    },
    // 上传配置文件
    uploadConfig() {
      this.$emit('upload-config')
    },
    // 上传证书
    uploadCert(type) {
      this.$emit('upload-cert', type)
    },
    handleMaskClick() {
      this.$modal && this.$modal.msgWarning ? this.$modal.msgWarning('不可编辑，请点击“编辑”按钮') : alert('不可编辑，请点击“编辑”按钮')
    },
  }
}
</script>

<style lang="scss" scoped>
.params-config {
  position: relative;

  .params-form {
    padding: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 10px 0;

    .tip {
      font-size: 12px;
      color: #909399;
      line-height: 1.2;
      padding: 4px 0;
      margin-top: 4px;
    }
    
    .input-group {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .button-group {
        display: flex;
        gap: 8px;
      }
      
      .tip-text {
        color: #F56C6C;
        font-size: 14px;
        white-space: nowrap;
      }
    }

    .input-with-buttons {
      display: flex;
      align-items: center;
      gap: 10px;

      .button-group {
        display: flex;
        gap: 8px;
      }
    }

    :deep(.el-form-item__label) {
      font-weight: normal;
    }

    .required-star {
      color: #f56c6c;
      margin-left: 4px;
      font-size: 14px;
      cursor: help;
    }

    .config-buttons {
      text-align: center;
      button {
        margin: 0 10px;
      }
    }
  }

  &.disabled-mask {
    pointer-events: auto;
  }

  &.disabled-mask {
    // 禁用所有交互
    pointer-events: auto;
  }

  :disabled,
  .disabled-mask button,
  .disabled-mask .el-button {
    pointer-events: none !important;
    opacity: 0.6;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    z-index: 10;
    cursor: not-allowed;
  }
}
</style>
