<template>
  <el-form
    class="save-form"
    v-bind="{ ...$attrs, ...$props }"
    v-on="$listeners"
    @submit.stop.native="submit"
    @reset.stop.native="reset"
    ref="form"
  >
    <slot />
  </el-form>
</template>
<script>
import { Searchs } from "@/helpers";
export default {
  name: "save-form",
  props: ["model", "save-key", "noclear"],
  data() {
    return {
      searchs: null
    };
  },

  created() {
    this.setFormValue();
  },
  methods: {
    setFormValue() {
      const searchs = new Searchs(this.saveKey || this.$route.path);
      this.searchs = searchs;
      const active = searchs.get();
      for (const key in active.form) {
        if (active.form.hasOwnProperty(key)) {
          const item = active.form[key];
          this.model[key] = item;
        }
      }
      // console.log(active, "showInfo", this.$route.path);
      if (this.saveKey) {
        this.searchs.update(this.$route.path, undefined, "bind");
      }
    },
    submit(evt) {
      evt.stopPropagation();
      evt.stopImmediatePropagation();
      evt.preventDefault();
      if (this.saveKey) {
        this.searchs.update(this.$route.path, undefined, "bind");
      }
      this.searchs.update(this.model, undefined, "form");
      //  (  new Searchs().searchs)
      if (this.$listeners.submit) {
        this.$listeners.submit(evt);
      }
    },
    reset(evt) {
      evt.stopPropagation();
      evt.stopImmediatePropagation();
      evt.preventDefault();
      let setItemEvent = new Event("watchStorage");
      window.dispatchEvent(setItemEvent);

      if (this.$listeners.reset) {
        if (this.noclear == undefined) {
          this.$nextTick(() => {
            this.resetFields();
            // this.setFormValue()
          });
        } else {
          this.resetFields();
        }
        this.$listeners.reset();
      } else {
        this.resetFields();
      }
    },
    save(search = null, type = "form") {
      search = search ? search : this.model;
      this.searchs.update(search, undefined, type);
    },
    validate(FC) {
      this.$refs.form.validate(valid => {
        FC(valid);
        if (valid) {
          this.searchs.update(this.model, undefined, "form");
        }
      });
    },
    resetFields() {
      this.$refs.form.resetFields();
      this.searchs.update(this.model, undefined, "form");
      this.searchs.update({}, undefined, "page");
    }
  }
};
</script>
<style lang="scss" scoped>
// .save-form {
//   /deep/ .el-input__inner {
//     width: 180px;
//     overflow: hidden;
//     text-overflow: ellipsis;
//   }
//   /deep/.el-select {
//     width: 100%;
//   }
//   /deep/.el-date-editor.el-input {
//     width: 180px;
//   }
//   /deep/ .el-form-item__content .el-col {
//     width: 180px;
//   }
//   /deep/ .el-col.line {
//     width: 15px !important;
//     text-align: center;
//   }
//   /deep/ .el-date-editor--daterange {
//     width: 375px;
//   }
//   /deep/ .el-form-item__content .el-col:last-child .el-form-item {
//     margin-right: 0;
//   }
// }
</style>
