<template>
  <div class="edit-comp">
    <!-- <h3></h3> -->
    <el-divider content-position="left">{{ config.title }}</el-divider>

    <el-form
      :model="formData"
      :label-position="config.labelPosition"
      :label-width="config.labelWidth"
      class="form-style"
      :rules="rules"
      ref="formName"
    >
      <div
        class="item-style"
        v-for="(item, i) in config.list"
        :style="{
          width: item.width || config.inputWidth,
          margin: item.margin,
        }"
        :key="i"
      >
        <el-form-item :label="item.label" :prop="item.key">
          <el-input
            v-if="item.type == 'input'"
            v-model="formData[item.key]"
            :placeholder="item.placeholder"
            :disabled="item.disabled || false"
          ></el-input>
          <template v-if="item.type == 'select'">
            <el-select
              v-model="formData[item.key]"
              :placeholder="item.placeholder"
              :disabled="item.disabled || false"
            >
              <el-option
                v-for="(val, i1) in item.option"
                :key="i1"
                :value="val.value"
                :label="val.label"
              ></el-option>
            </el-select>
          </template>
          <template v-if="item.type == 'date'">
            <el-date-picker
              :disabled="item.disabled || false"
              v-model="formData[item.key]"
              :placeholder="item.placeholder"
              :type="item.config.type || 'date'"
              :range-separator="item.config.rangeSeparator || '-'"
              :start-placeholder="item.config.startPlaceholder"
              :end-placeholder="item.config.endPlaceholder"
              :format="item.config.format || 'yyyy-MM-dd'"
              :value-format="item.config.valueFormat || 'yyyy-MM-dd'"
            >
            </el-date-picker>
          </template>
          <template v-if="item.type == 'textarea'">
            <el-input
              type="textarea"
              v-model="formData[item.key]"
              :placeholder="item.placeholder"
              :autosize="{ minRows: 4 }"
            ></el-input>
          </template>
          <template v-if="item.type == 'number'">
            <el-input-number
              v-model="formData[item.key]"
              :placeholder="item.placeholder"
              :disabled="item.disabled || false"
              :min="item.config.min || -10000000"
              :max="item.config.max || 10000000"
              :step="item.config.step || 1"
              :controls-position="item.config.controlsPosition || 'right'"
              :size="item.config.size || ''"
            >
            </el-input-number>
          </template>
          <template v-if="item.type == 'radio'">
            <el-radio-group
              v-model="formData[item.key]"
              :placeholder="item.placeholder"
              :disabled="item.disabled || false"
            >
              <el-radio
                v-for="(val2, i) in item.option"
                :key="i"
                :label="val2.value"
                >{{ val2.label }}</el-radio
              >
            </el-radio-group>
          </template>
          <template v-if="item.type == 'switch'">
            <el-switch
              v-model="formData[item.key]"
              :active-value="item.config.activeValue"
              :inactive-value="item.config.inactiveValue"
              :active-text="item.config.activeText"
              :inactive-text="item.config.inactiveText"
            ></el-switch>
          </template>
        </el-form-item>
      </div>
      <slot></slot>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["config", "value", "name"],
  module: {
    prop: "value",
    event: "input",
  },

  data() {
    return {
      formData: {},
      rules: {},
      flag: false,
    };
  },
  watch: {
    formData: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
    },
    value: {
      handler(val) {
        this.formData = val;
        setTimeout(() => {
          this.$refs.formName.clearValidate();
          this.flag = true;
        }, 100);
      },
      deep: true,
    },
  },
  methods: {
    initRules() {
      this.config.list.map((val) => {
        this.rules[val.key] = val.rules;
      });
    },
  },
  created() {
    // this.formData = this.value;
    // console.log(this.formData, "data");

    this.initRules();
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.form-style {
  display: flex;
  flex-wrap: wrap;
}
.item-style {
  margin-right: 10%;
}
.el-divider {
  margin-bottom: 40px !important;

  .el-divider__text {
    font-size: 17px !important;
    font-weight: bold !important;
  }
}
</style>
<!--  -->
