<template>

  <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item class="form-item-title">基本配置</a-form-model-item>
    <a-form-model-item ref="targetName" label="系统名称:" prop="targetName">
      <a-input v-model="form.targetName" />
    </a-form-model-item>
    <a-form-model-item ref="targetCode" label="系统代码:" prop="targetCode">
      <a-input v-model="form.targetCode" />
    </a-form-model-item>

    <a-form-model-item class="form-item-title">传输加密配置</a-form-model-item>
    <a-form-model-item class="form-item-bar" ref="aseKey" label="AES-128加解密密钥:" prop="aseKey">
      <a-input v-model="form.aseKey" readOnly />
      <a-button class="copyBtn" shape="circle" icon="copy" @click="onCopy(form.aseKey)" />
      <a-button class="generateBtn" type="primary" size="small" @click="getAESKey">
        随机生成
      </a-button>
    </a-form-model-item>
    <a-form-model-item class="form-item-bar" ref="rsapublicKey" label="RSA-1024加密公钥:" prop="rsapublicKey">
      <a-textarea v-model="form.rsapublicKey" readOnly :auto-size="{ minRows: 3, maxRows: 5 }" />
      <a-button class="copyBtn" shape="circle" icon="copy" @click="onCopy(form.rsapublicKey)" />
      <a-button class="generateBtn" type="primary" size="small" @click="getCreateKeys">
        随机生成
      </a-button>
    </a-form-model-item>
    <a-form-model-item class="form-item-bar" ref="rsaprivateKey" label="RSA-1024加密私钥:" prop="rsaprivateKey">
      <a-textarea readOnly v-model="form.rsaprivateKey" :auto-size="{ minRows: 3, maxRows: 5 }" />
      <a-button class="copyBtn" shape="circle" icon="copy" @click="onCopy(form.rsaprivateKey)" />
      <!-- <a-button class="generateBtn" type="primary" size="small" @click="getCreateKeys(1)">
        随机生成
      </a-button> -->
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>

      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script type="text/ecmascript-6">
import { addFile, updateFile, getAESKey, createKeys } from '@/api/serviceMasterData/systemManger'

export default {
  props: {},
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      other: '',
      form: {
        targetName: '',
        targetCode: '',
        aseKey: '',
        rsapublicKey: '', //	rsa公钥
        rsaprivateKey: '' // rsa私钥
      },
      aesFirst: true,
      rsaPublicKeyFirst: true,
      rsaprivateKeyFirst: true,
      rules: {
        targetName: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
          { min: 3, max: 40, message: '输入字符不能超过40个', trigger: 'blur' }
        ],
        targetCode: [{ required: true, message: '请输入系统代码', trigger: 'blur' }],
        aseKey: [{ required: true, message: '请输入AES-128加解密密钥', trigger: 'change' }],
        rsapublicKey: [{ required: true, message: '请输入RSA-1024加密公钥', trigger: 'change' }],
        rsaprivateKey: [{ required: true, message: '请输入RSA-1024加密私钥', trigger: 'change' }]
      },
      submitType: null,
      modalVisible: true
    }
  },

  methods: {
    onCopy(certB64) {
      const oInput = document.createElement('input')
      oInput.value = certB64
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message.success('复制成功')
      oInput.remove()
    },
    getAESKey() {
      if (this.aesFirst) {
        getAESKey().then((res) => {
          this.form.aseKey = res.aesKey
          this.aesFirst = false
        })
      } else if (!this.aesFirst) {
        var that = this
        this.$confirm({
          title: '生成新的秘钥会覆盖当前秘钥使当前秘钥失效，确认重新随机生成吗?',
          onOk() {
            return getAESKey().then((res) => {
              that.form.aseKey = res.aesKey
            })
          },
          onCancel() {}
        })
      }
    },
    getCreateKeys(v) {
      if (this.rsaPublicKeyFirst) {
        createKeys().then((res) => {
          this.rsaPublicKeyFirst = false
          this.form.rsapublicKey = res.publicKey //	rsa公钥
          this.form.rsaprivateKey = res.privateKey //	rsa私钥
        })
      } else if (!this.rsaPublicKeyFirst) {
        var that = this
        this.$confirm({
          title: '生成新的秘钥会覆盖当前秘钥使当前秘钥失效，确认重新随机生成吗?',
          onOk() {
            return createKeys().then((res) => {
              that.rsaPublicKeyFirst = false
              that.form.rsapublicKey = res.publicKey //	rsa公钥
              this.form.rsaprivateKey = res.privateKey //	rsa私钥
            })
          },
          onCancel() {}
        })
      }
    },

    onSubmit() {
      // console.log(`this.submitType: `, this.submitType)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.submitType === 'add') {
            console.log(`res--add--this.form`, this.form)

            addFile(this.form).then((res) => {
              console.log(`res--add`, res)
              this.handleOk()
            })
          } else if (this.submitType === 'edit') {
            updateFile(this.form).then((res) => {
              console.log(`res--edit`, res)
              this.handleOk()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    handleOk() {
      this.$emit('handleOk')
    }
  }
}
</script>

<style lang='less' scoped>
/deep/.ant-form-item-children {
  position: relative;
  display: block;
}
.form-item-title {
  color: #000;
  font-weight: bold;
  text-indent: 2em;
}
.form-item-bar {
  position: relative;
  input {
    padding-right: 40px;
  }
  .copyBtn {
    position: absolute;
    right: -38px;
    top: 4px;
    border: none;
    background: none;
    /deep/.anticon-copy{
      font-size: 20px;
    }
  }
  .generateBtn {
    position: absolute;
    right: -115px;
    height: 32px;
    top: 4px;
  }
}

textarea {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
/*滚动条样式*/
textarea::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
}
textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
