<template>
  <el-form
    class="form-detail"
    :model="formData"
    :rules="formRules"
    label-width="auto"
    :label-position="labelPosition"
    ref="myForm"
    :disabled="isDisabled"
  >
    <el-form-item
      v-for="item in formData"
      :key="item.fieldName"
      :label="item.label"
      :prop="item.fieldName"
      :class="item.class || ''"
      :label-for="item.fieldName"
    >
      <!-- 根据类型动态渲染不同的输入控件 -->
      <el-input-number
        v-if="item.type === 'input_number'"
        v-model="item.value"
        :min="0"
        :max="99"
        :id="item.fieldName"
        controls-position="right"
      />

      <el-input
        v-if="item.type === 'input'"
        v-model="item.value"
        :placeholder="disabled || item.disabled ? '' : '请输入内容'"
        clearable
        :id="item.fieldName"
        :disabled="item.disabled || false"
      />

      <el-select
        v-if="item.type === 'select'"
        v-model="item.value"
        :placeholder="disabled || item.disabled ? '' : '请选择'"
        clearable
        :id="item.fieldName"
        :disabled="item.disabled || false"
      >
        <el-option
          v-for="option in item.options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>

      <el-textarea
        v-if="item.type === 'textarea'"
        v-model="item.value"
        :rows="4"
        placeholder="请输入内容"
        clearable
        :id="item.fieldName"
        :disabled="item.disabled || false"
      />

      <el-radio-group
        v-if="item.type === 'radio'"
        v-model="item.value"
        :id="item.fieldName"
        :disabled="item.disabled || false"
      >
        <el-radio
          v-for="option in item.options"
          :key="option.value"
          :label="option.value"
        >
          {{ option.label }}
        </el-radio>
      </el-radio-group>

      <el-date-picker
        v-if="item.type.slice(0, 5) === 'time-'"
        v-model="item.value"
        :id="item.fieldName"
        :type="item.type.slice(5)"
        :placeholder="disabled || item.disabled ? '' : '请选择'"
        :disabled="item.disabled || false"
      />
      <el-date-picker
        v-if="item.type === 'picker'"
        v-model="item.value"
        :id="item.fieldName"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"
        :placeholder="disabled || item.disabled ? '' : '请选择'"
        :disabled="item.disabled || false"
      >
      </el-date-picker>

      <el-color-picker
        v-if="item.type === 'color'"
        :id="item.fieldName"
        v-model="item.value"
        :disabled="item.disabled || false"
      />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "MyForm",
  props: {
    formData: {
      type: Array,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    labelPosition: {
      type: String,
      default: "left",
      validator(value) {
        return ["top", "left"].includes(value);
      },
    },
    title: {
      type: String,
      default: "弹窗标题",
    },
  },
  watch: {
    formData: {
      handler(newVal) {
        console.log(newVal, "newVal===formData");
        this.formData = newVal;
      },
      deep: true, // 深入监听
      // immediate: true,
    },
    disabled: {
      handler(newVal) {
        console.log(newVal, "newVal===disabled");
        this.isDisabled = newVal
      },
      deep: true, // 深入监听
      immediate: true,
    },
    title: {
      handler(newVal) {},
      deep: true, // 深入监听
      immediate: true,
    },
  },
  //   watch: {
  //   modelValue(newVal) {
  //     // 监听父组件传入的数据变化，更新 formData
  //     this.formData = newVal;
  //   },
  //   formData(newVal) {
  //     // 监听表单数据变化，更新父组件的数据
  //     this.$emit("update:modelValue", newVal);
  //   },
  // },
  data() {
    return {
      formModel: {},
      formRules: {},
      isDisabled: this.disabled,
      localFormData: [...this.formData],
    };
  },

  mounted() {
    this.setupFormRules();
      // this.$nextTick(() => {
      //     this.isDisabled = newVal;
      //   });
  },
  methods: {
    // 设置验证规则
    setupFormRules () {
      console.log(this.formData,'this.formData===set')
      
      this.formData.forEach((item) => {
        this.$set(this.formRules, item.fieldName, {
          required: item.isRequired,
          trigger:
            item.type === "input" || item.type === "textarea"
              ? "blur"
              : "change",
          validator: (rule, value, callback) => {
            if (item.isRequired && (value === "" || value === null)) {
              callback(new Error(`${item.label}是必填项`));
            } else {
              callback();
            }
          },
        });

      });
      console.log(this.formRules,'this.formRules')
    },

    // 验证表单
    // validateForm() {
    //   return this.$refs.myForm.validate((valid, fields) => {
    //     return valid;
    //   });
    // },

    // 表单验证
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.myForm.validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            reject(false);
          }
        });
      });
    },

    // 清空表单
    clearForm() {
      this.$refs.myForm.resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
/* 可以根据需要添加自定义样式 */
.el-form-item {
  margin-bottom: 15px;
}
</style>
