<template>
  <a-form
    ref="formRef"
    name="basic"
    :label-col="{ style: { width: '120px' } }"
    :wrapper-col="{ span: 8 }"
    :model="identitySetting"
    autocomplete="off"
    :rules="rulesForStep"
  >
    <a-form-item has-feedback label="身份提供商 id" name="entityID">
      <a-input
        v-model:value="identitySetting.entityID"
        placeholder="必填，请输入身份提供商 id"
      />
    </a-form-item>
    <a-form-item has-feedback label="SSO 地址" name="ssoUrl">
      <a-input
        v-model:value="identitySetting.ssoUrl"
        placeholder="必填，请输入 SSO 地址"
      />
    </a-form-item>
    <a-form-item has-feedback label="证书" name="certificate">
      <a-textarea
        v-model:value="identitySetting.certificate"
        :rows="4"
        placeholder="必填，请输入证书"
        @blur="certificateBlur"
      />
    </a-form-item>
    <a-form-item label="退出 URL" name="loginOutUrl" style="margin-top: 10px">
      <a-input
        v-model:value="identitySetting.loginOutUrl"
        placeholder="非必填，请输入退出 URL"
      />
    </a-form-item>
  </a-form>
  <div style="margin: 22px 0 -22px 0">
    <a-button @click="prev"> 上一步 </a-button>
    <a-button type="primary" style="margin-left: 8px" @click="next">
      下一步
    </a-button>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';

const emit = defineEmits(['getDatas']);
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref();
// 表单数据
const identitySetting = ref({});
const rulesForStep = {
  entityID: [
    {
      required: true,
      message: '请输入身份提供商 id！',
      trigger: 'change',
    },
  ],
  ssoUrl: [
    {
      required: true,
      message: '请输入 SSO 地址！',
      trigger: 'change',
    },
  ],
  certificate: [
    {
      required: true,
      message: '请输入证书！',
      trigger: 'change',
    },
  ],
};
onMounted(() => {
  identitySetting.value = props.formData;
});

// 证书base64格式失去焦点后清除空格换行、回车
const certificateBlur = e => {
  identitySetting.value.certificate = e.target.value.replace(/[\s\n\r]+/g, '');
};

const prev = () => {
  const datas = {
    current: 1,
    formData: identitySetting.value,
  };
  emit('getDatas', datas);
};
const next = () => {
  const datas = {
    current: 3,
    formData: identitySetting.value,
  };
  formRef.value.validate().then(success => {
    emit('getDatas', datas);
  });
};
</script>

<style scoped>
:deep(.ant-form-item-control-input-content) {
  display: flex;
  align-items: center;
}
:deep(.ant-form-item-label > label) {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.4);
}
.ant-form-item {
  margin-bottom: 4px;
}
</style>