<template>
  <div class="collect-form">
    <div class="tip">
      {{ mode === "change" ? "当前登录邮箱: " : "" }}
      <span v-if="mode === 'change'" class="highlight">{{ email }}</span>
      你正在{{ mode === "set" ? "绑定" : "修改" }}登录邮箱，请输入邮箱完成{{
        mode === "set" ? "绑定" : "修改"
      }}，完成{{ mode === "set" ? "绑定" : "修改" }}后，你可使用此邮箱进行登录
    </div>
    <ElForm :rules="rules" :model="formModel" ref="formRef">
      <CustomizeFormItem prop="email">
        <syDialogInput
          style="width: 100%"
          v-model:value="formModel.email"
          placeholder="请输入邮箱"
        ></syDialogInput>
      </CustomizeFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { syDialogInput } from "cqk-sy-ui";
import { ref, watch } from "vue";
import { ElForm } from "element-plus";
import CustomizeFormItem from "../CustomizeFormItem.vue";

import {} from "@/views/userCenter/PersonVerify/config";

const props = defineProps<{
  /**set设置，第一次设置密码。change修改，密码已设置。 */
  mode: "change" | "set";
  email?: string;
}>();
const formRef = ref<InstanceType<typeof ElForm>>();
const formModel = ref({
  email: "",
});

const emit = defineEmits(["collect"]);

watch(
  () => formModel.value.email,
  () => {
    formRef.value?.validate((isValid) => {
      emit("collect", {
        value: formModel.value.email,
        isValid,
      });
    });
  }
);

const rules = {
  email: [
    {
      required: true,
      message: "请输入邮箱号",
      trigger: "blur",
    },
    {
      // validator: ,
      trigger: "blur",
    },
  ],
};
</script>

<style></style>
