<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :disabled="isDetail"
  >
    <el-form-item label="名称duban" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="资费" prop="factor">
      <el-input-number v-model="ruleForm.factor" :step="0.1" :max="10" />
    </el-form-item>
    <el-form-item label="详情" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
  </el-form>
</template>
 
<script lang="ts" setup>
  import { reactive, ref, defineExpose, toRefs, defineProps } from 'vue';

  import type { FormInstance, FormRules } from 'element-plus';

  import { useCustomFormEvent } from '../useForm';
  const emit = defineEmits(['form']);
  const ruleFormRef = ref<FormInstance>();
  // 表单全部的数据
  const ruleForm = ref({
    name: '',
    desc: '',
    factor: 0,
  });
  // 表单存库的数据
  const warehouseData = ref({ name: '' });
  // 表单中带有label的数据
  const labelData = ref({ name: { label: '名称' } });
  const props = defineProps({
    formValue: {
      type: Object,
      required: false,
    },
    isDetail: {
      type: Boolean,
      required: false,
    },
  });
 
  const rules = reactive<FormRules>({
    name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
    factor: [{ required: true }],
  });
  console.log(props);
  console.log(props.formValue);
  const { formValue } = toRefs(props);
  console.log(formValue);
 
  // ruleFormRef dom上的ref  formValue用于表单回显  ruleForm用于表单初始化赋值
  const { submitForm } = useCustomFormEvent(
    ruleFormRef,
    formValue,
    ruleForm,
    warehouseData,
    labelData,
    emit,
  );
  defineExpose({
    submitForm,
  });
</script>