<template>
  <a-form
    ref="formRef"
    name="basic"
    :label-col="{ style: { width: '140px' } }"
    :wrapper-col="{ span: 8 }"
    :model="identitySetting"
    autocomplete="off"
    :rules="rulesForStep"
  >
    <a-form-item has-feedback label="CAS 认证URL" name="casUrl">
      <a-input
        v-model:value="identitySetting.casUrl"
        placeholder="必填，请输入CAS 认证URL"
      />
    </a-form-item>
    <a-form-item has-feedback label="CAS Ticket校验URL" name="casTicketUrl">
      <a-input
        v-model:value="identitySetting.casTicketUrl"
        placeholder="必填，请输入CAS Ticket校验URL"
      />
    </a-form-item>
    <a-form-item has-feedback label="CAS 退出登录URL" name="casLogoutUrl">
      <a-input
        v-model:value="identitySetting.casLogoutUrl"
        placeholder="选填，请输入CAS 退出登录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 = {
  casUrl: [
    {
      required: true,
      message: '请输入CAS 认证URL！',
      trigger: 'change',
    },
  ],
  casTicketUrl: [
    {
      required: true,
      message: '请输入CAS Ticket校验URL！',
      trigger: 'change',
    },
  ],
};
onMounted(() => {
  identitySetting.value = props.formData;
});

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>