<template>
  <div class="collect-form">
    <div class="tip">
      {{ mode === "change" ? "当前登录手机: " : "" }}
      <span v-if="mode === 'change'" class="highlight">{{ phone }}</span>
      你正在{{ mode === "set" ? "绑定" : "修改" }}手机号，请输入手机号完成{{
        mode === "set" ? "绑定" : "修改"
      }}，完成{{ mode === "set" ? "绑定" : "修改" }}后，你可使用此手机号进行登录
    </div>
    <ElForm :rules="rules" :model="formModel" ref="formRef">
      <CustomizeFormItem prop="phone">
        <syDialogInput
          style="width: 100%"
          :value="formModel.phone"
          @update:value="formModel.phone = $event.replace(/[^0-9]+/g, '')"
          maxLength="11"
          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 { checkPhone } from "@/views/userCenter/PersonVerify/config";

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

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

watch(
  () => formModel.value.phone,
  () => {
    if (formModel.value.phone.length === 11) {
      formRef.value?.validate((isValid) => {
        emit("collect", {
          value: formModel.value.phone,
          isValid,
        });
      });
    } else {
      emit("collect", {
        value: formModel.value.phone,
        isValid: false,
      });
    }
  }
);

const rules = {
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      validator: checkPhone,
      trigger: "blur",
    },
  ],
};
</script>

<style></style>
