<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="modelValue.sdkkeyid" placeholder="" style="width: 300px" :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="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 300px" :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="modelValue.hsmfiledir" placeholder="" style="width: 300px" :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-else-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="modelValue.sdkkeyid" placeholder="" style="width: 300px" :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="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 300px" :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="modelValue.hsmfiledir" placeholder="" style="width: 300px" :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="modelValue.keystoredir" placeholder="" style="width: 300px" :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="modelValue.truststoredir" placeholder="" style="width: 300px" :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="modelValue.cphpwd" placeholder="" style="width: 300px" :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="modelValue.ecccipherbits" placeholder="" style="width: 300px" :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="modelValue.ecccipherx" placeholder="" style="width: 300px" :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="modelValue.eccciphery" placeholder="" style="width: 300px" :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="modelValue.ecccipherm" placeholder="" style="width: 300px" :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="modelValue.ecccipherc" placeholder="" style="width: 300px" :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="modelValue.ecccipherl" placeholder="" style="width: 300px" :disabled="!editable" />
            <div class="tip-text">* ECCCipher.L</div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="generateParams">参数生成</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="modelValue.credtid" placeholder="" style="width: 300px" :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="modelValue.credaccesskey" type="password" placeholder="" show-password style="width: 300px" :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="modelValue.credsecretkey" type="password" placeholder="" show-password style="width: 300px" :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="modelValue.crediv" placeholder="" style="width: 300px" :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="modelValue.credprotocol" placeholder="" style="width: 300px" :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="modelValue.credhost" placeholder="" style="width: 300px" :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="modelValue.credport" placeholder="" style="width: 300px" :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="modelValue.keyid" placeholder="" style="width: 300px" :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="modelValue.keyspec" placeholder="" style="width: 300px" :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="modelValue.keyusage" placeholder="" style="width: 300px" :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="modelValue.origin" placeholder="" style="width: 300px" :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="modelValue.protectionlevel" placeholder="" style="width: 300px" :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="modelValue.protocol" placeholder="" style="width: 300px" :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="modelValue.thhost" placeholder="" style="width: 300px" :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="modelValue.thport" placeholder="" style="width: 300px" :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="modelValue.appid" placeholder="" style="width: 300px" :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="modelValue.keyid" placeholder="" style="width: 300px" :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="modelValue.keystoredir" placeholder="" style="width: 300px" :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="modelValue.truststoredir" placeholder="" style="width: 300px" :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="modelValue.ip" placeholder="" style="width: 300px" :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="modelValue.port" placeholder="" style="width: 300px" :disabled="!editable" />
            <div class="tip-text">* 端口</div>
          </div>
        </el-form-item>

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

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

        <el-form-item label="密钥号" required>
          <div class="input-group">
            <el-input v-model="modelValue.keynum" placeholder="" style="width: 300px" :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="modelValue.zdxlzjcedir" style="width: 300px" :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="modelValue.certspem" style="width: 300px" :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="modelValue.sigkeypem" style="width: 300px" :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="modelValue.cacrtpem" style="width: 300px" :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 setup>
import { reactive, watch, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  modelValue: {
    type: Object,
    default: () => ({})
  },
  editable: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'generate-params', 'download-template', 'upload-config', 'upload-cert']);


const generateParams = () => {
  emit('generate-params');
};

const downloadTemplate = () => {
  emit('download-template');
};

const uploadConfig = () => {
  emit('upload-config');
};

const uploadCert = (type) => {
  emit('upload-cert', type);
};

const handleMaskClick = () => {
  ElMessageBox.alert('不可编辑，请点击“编辑”按钮', '提示', {
    confirmButtonText: '确定',
    type: 'info'
  });
};
</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;
          white-space: normal;      // 自动换行
          word-break: break-all;    // 长单词也能换行
          line-height: 1.5;
          max-width: 320px;         // 可根据实际布局调整宽度
          margin-top: 4px;
          margin-left: 0;           // 保证与输入框对齐
          display: block;      
      }
    }

    .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>
