<template>
  <el-form ref="formRef" :model="groupData" :rules="rules">
    <el-form-item :label-width="props.label ? LABEL_WIDTH : ''" prop="modelValue" :label="props.label ? '身份证号' : ''"
      style="    margin-bottom: 14px;">
      <el-input v-bind="$attrs" v-model="groupData.modelValue" @input="onInput()" @blur="validate()"
        style="width: 100%;"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { LABEL_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, defineExpose } from "vue";
import { validateIdentity } from "./rules";
const props = defineProps({
  isRequired: {
    type: Boolean,
    default: false
  },
  label: {
    type: Boolean,
    default: true
  }
});
const groupData = ref({
  modelValue: ""
});
const formRef = ref(null);
const emits = defineEmits(["videoListShowFn"]);
const onInput = (e) => {
  emits("update:modelValue", groupData.value.modelValue);
};
// 验证规则
const rules = ref({
  modelValue: [
    {
      required: props.isRequired,
      message: "请输入身份证",
      trigger: "blur"
    },
    {
      trigger: "change",
      validator: validateIdentity()
    }
  ]
});

// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
const validate = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emits("validateStatus", { IdentityCard: true });
    } else {
      emits("validateStatus", { IdentityCard: false });
    }
  });
  if (!props.isRequired && groupData.value.modelValue.length === 0) {
    emits("validateStatus", { IdentityCard: true });
  }
};

const childMethod = () => {
  groupData.value.modelValue = "";
};
// 主动暴露childMethod方法
defineExpose({ childMethod });
</script>

<style lang="scss" scoped></style>
