<!--  -->
<template>
  <div class="">
    <Form
      ref="formValidate"
      :model="FormDataList"
      :rules="ruleValidate"
      :label-width="80"
      v-if="showForm"
    >
      <Row>
        <Col
          v-for="(item, index) in configList"
          :key="index"
          :span="item.width"
        >
          <!-- :required="item.required" -->
          <FormItem
            v-if="
              item.type == 'input' ||
              item.type == 'text' ||
              item.type == 'textarea' ||
              item.type == 'password' ||
              item.type == 'url' ||
              item.type == 'email' ||
              item.type == 'date' ||
              item.type == 'number' ||
              item.type == 'tel'
            "
            :label="item.ChName"
            :prop="item.EnName"
            :style="item.style"
            :label-width="item.labelWidth"
            :rules="
              item.required == true || item.required == false
                ? {}
                : item.required
            "
          >
            <Input
              @on-change="handleSubmit"
              :disabled="item.disabled ? item.disabled : false"
              v-model="FormDataList[item.EnName]"
              :placeholder="item.ChName"
              :maxlength="item.maxlength"
              :show-word-limit="item.maxlength != undefined"
              :type="item.type == 'input' ? 'text' : item.type"
              clearable
            ></Input>
          </FormItem>
          <!-- <FormItem
            v-if=""
            :label="item.ChName"
            :prop="item.EnName"
            :style="item.style"
            :label-width="item.labelWidth"
            :required="item.required"
          >
            <Input
              @on-change="handleSubmit"
              v-model="FormDataList[item.EnName]"
              :placeholder="item.ChName"
              type="textarea"
            ></Input>
          </FormItem> -->
          <FormItem
            v-else-if="item.type == 'select'"
            :label="item.ChName"
            :prop="item.EnName"
            :style="item.style"
            :label-width="item.labelWidth"
            :rules="
              item.required == true || item.required == false
                ? {}
                : item.required
            "
          >
            <Select
              :disabled="item.disabled ? item.disabled : false"
              filterable
              @on-change="handleSubmit"
              :multiple="item.multiple ? item.multiple : false"
              clearable
              v-model="FormDataList[item.EnName]"
              :placeholder="item.ChName"
            >
              <Option
                :value="select[item.FieldId == '' ? 'vlaue' : item.FieldId]"
                :key="selectkey"
                v-for="(select, selectkey) in item.param"
                >{{
                  select[item.FieldName == "" ? "label" : item.FieldName]
                }}</Option
              >
            </Select>
          </FormItem>
          <FormItem
            v-else-if="
              item.type == 'date' ||
              item.type == 'datetime' ||
              item.type == 'daterange' ||
              item.type == 'datetimerange' ||
              item.type == 'year' ||
              item.type == 'month'
            "
            :label="item.ChName"
            :prop="item.EnName"
            :style="item.style"
            :label-width="item.labelWidth"
            :rules="
              item.required == true || item.required == false
                ? {}
                : item.required
            "
          >
            <DatePicker
              :disabled="item.disabled ? item.disabled : false"
              style="width: 100%"
              @on-change="dateHandleSubmit(item)"
              :type="item.type == 'date' ? 'datetime' : item.type"
              v-model="FormDataList[item.EnName]"
              :placeholder="item.ChName"
            ></DatePicker>
          </FormItem>
          <FormItem
            v-else-if="item.type == 'Cascader'"
            :label="item.ChName"
            :prop="item.EnName"
            :style="item.style"
            :label-width="item.labelWidth"
            :rules="
              item.required == true || item.required == false
                ? {}
                : item.required
            "
          >
            <Cascader
              filterable
              clearable
              change-on-select
              :disabled="item.disabled ? item.disabled : false"
              @on-change="handleSubmit"
              :data="item.param"
              v-model="FormDataList[item.EnName]"
              :placeholder="item.ChName"
            ></Cascader>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
export default {
  name: "autoForm",
  components: {},
  data() {
    return {
      ruleValidate: {},
      FormDataList: {},
      showForm: true,
    };
  },
  props: {
    configList: {
      type: Array,
      default: () => [],
    },
    defaultForm: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    defaultForm: {
      handler: function (newVal, oldVal) {
        this.showForm = false;
        //console.log("edit对象", newVal);
        // if (newVal == {} || newVal == undefined) {
        //   this.configList.forEach((item) => {
        //     if (item.type == "Cascader") {
        //       this.FormDataList[item.EnName] =
        //         this.defaultForm[item.EnName] != undefined
        //           ? this.defaultForm[item.EnName]
        //           : [];
        //     } else {
        //       this.FormDataList[item.EnName] =
        //         this.defaultForm[item.EnName] != undefined
        //           ? this.defaultForm[item.EnName]
        //           : "";
        //     }
        //   });
        // } else {
        //   this.FormDataList = newVal;
        // }
        this.FormDataList = newVal;
        this.showForm = true;
        // this.$emit("returnData", this.FormDataList);
      },
      deep: true,
      immediate: true,
    },
    FormDataList: {
      handler: function (newVal, oldVal) {
        // this.$emit("returnData", this.FormDataList);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    dateFormat(fmt, date) {
      date = new Date(date);
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),
        "m+": (date.getMonth() + 1).toString(),
        "d+": date.getDate().toString(),
        "H+": date.getHours().toString(),
        "M+": date.getMinutes().toString(),
        "S+": date.getSeconds().toString(),
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    handleSubmit() {
      this.$emit("returnData", this.FormDataList);
    },
    dateHandleSubmit(item) {
      // EnName
      if (
        item.type == "date" ||
        item.type == "datetime" ||
        item.type == "daterange" ||
        item.type == "datetimerange"
      ) {
        this.FormDataList[item.EnName] = this.dateFormat(
          "YYYY-mm-dd HH:MM:SS",
          this.FormDataList[item.EnName]
        );
      } else if (item.type == "year") {
        this.FormDataList[item.EnName] = this.dateFormat(
          "YYYY",
          this.FormDataList[item.EnName]
        );
      } else if (item.type == "month") {
        this.FormDataList[item.EnName] = this.dateFormat(
          "YYYY-mm",
          this.FormDataList[item.EnName]
        );
      }

      this.$emit("returnData", this.FormDataList);
    },
  },
  created() {
    this.$emit("returnData", this.FormDataList);
  },
};
</script>
